Runboard.com
You're welcome.





runboard.com       Sign up (learn about it) ● Sign in (lost password?)

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 500
Karma: 12 (+12/-0)
Reply Quote
Lesigner Girl's newest menu


This menu resembles the menu created for the "Mystery Skin" but with clicking instead of hovering, and it slides down instead of popping down.

The HTML:

<div id="nav">
<h3>Navigation</h3>
<ul>
     <li onclick="$('li').not(this).removeClass('open'); $(this).toggleClass('open');">Section 1
          <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
          </ul>
     </li>
     <li onclick="$('li').not(this).removeClass('open'); $(this).toggleClass('open');">Section 2
          <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
          </ul>
     </li>
     <li onclick="$('li').not(this).removeClass('open'); $(this).toggleClass('open');">Section 3
          <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
           <li><a href="#">Link 3</a></li>
           <li><a href="#">Link 4</a></li>
          </ul>
     </li>
</ul>
</div>

The CSS:

#nav h3 { font-size: 1em; }
#nav li { cursor: pointer; }
#nav li li { cursor: default; }

#nav ul { margin: 0; padding: 0; }
#nav li { list-style: none; margin: 0; padding: 0.25em 0; }

#nav li ul {
     overflow: hidden; max-height: 0; opacity: 0;
     transition: max-height 2s, opacity 1s;
     -webkit-transition: max-height 2s, opacity 1s; /* Safari */
}
#nav li.open ul {
    opacity: 1; max-height: 500px;
}



Last edited by Lesigner Girl, 1/3/2014, 11:58 pm


---

Advertise Boards On TRDConceptsDE
1/3/2014, 8:28 am Link 2 this post Send Email to   Send PM to Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user


Registered: 07-2006
Location: Oχάιο
Posts: 82
Karma: 4 (+4/-0)
Reply Quote
Re:


That looks nice!

---


SS eH PF
1/7/2014, 12:34 pm Link 2 this post Send PM to Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 500
Karma: 12 (+12/-0)
Reply Quote
Re:


LG is amazing. I get a idea and get it almost right then she comes in and makes my initial idea better! emoticon

---

Advertise Boards On TRDConceptsDE
5/9/2014, 12:03 am Link 2 this post Send Email to   Send PM to Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user
Head of Runboard staff

Registered: 11-2005
Posts: 2
Karma: 0 (+0/-0)
Reply Quote
Re: Lesigner Girl's newest menu


Thanks! emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
5/9/2014, 9:41 am Link 2 this post Send Email to   Send PM to Blog
 


Add a Reply





You are not logged in (login)