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
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 494
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: [sign in to see URL] 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 [sign in to see URL] 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
 (Top of the page)
● Premium User ●



Registered: 07-2006
Location: Oχάιο
Posts: 80
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
 (Top of the page)
● Premium User ●


Registered: 07-2005
Location: Texas
Posts: 494
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
 (Top of the page)
● Premium 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)