drop down menu - Twitter Bootstrap - How to start dropdown close -


so first of all, here's link site: http://songfreek.com/

this sidebar dropdown navigation doing:

this i'd sidebar dropdown navigation do:

i guess i'll explain if it's not obvious: want "user" tab automatically start opened upon loading of page, instead of them opening.

here's code (which repeats each tab, different content):

`<li class="nav-header has_submenu">                             <a href="#">                                 user <i class="icon-angle-down"></i>                             </a>                             <ul style="list-style: none;">                                 <li class="active"><a href="#"><i class="icon-home"></i>home</a></li>                                 <li><a href="#"><i class="icon-envelope-alt"></i>messages <span class="badge badge-info">4</span></a></li>                                 <li><a href="#"><i class="icon-cogs"></i>settings</a></li>                                 <li><a href="#"><i class="icon-comment"></i>shoutbox</a></li>                                 <li><a href="#"><i class="icon-user"></i>staff list</a></li>                                 <li><a href="#"><i class="icon-flag"></i>my infractions</a></li>                                 <li><a href="#"><i class="icon-exclamation-sign"></i>rules & regulations</a></li>                                 <li><a href="#"><i class="icon-off"></i>logout</a></li>                             </ul>                         </li>` 

so can change code to make load opened, or closed?

you can use bootstrap data-toggle="collapse" toggle menus. each menu ul have class="collapse" , unique id can assigned data-target attribute of link toggles menu...

use class="collapse in" have user menu open first.

<li class="nav-header">   <a href="#" data-toggle="collapse" data-target="#usermenu">     user <i class="icon-angle-down"></i>   </a>   <ul style="list-style: none;" class="collapse in" id="usermenu">     <li class="active"><a href="#"><i class="icon-home"></i>home</a></li>     <li><a href="#"><i class="icon-envelope-alt"></i>messages <span class="badge badge-info">4</span></a></li>     <li><a href="#"><i class="icon-cogs"></i>settings</a></li>     <li><a href="#"><i class="icon-comment"></i>shoutbox</a></li>     <li><a href="#"><i class="icon-user"></i>staff list</a></li>     <li><a href="#"><i class="icon-flag"></i>my infractions</a></li>     <li><a href="#"><i class="icon-exclamation-sign"></i>rules &amp; regulations</a></li>     <li><a href="#"><i class="icon-off"></i>logout</a></li>   </ul> </li> <li class="nav-header">   <a href="#" data-toggle="collapse" data-target="#radiodjmenu">     radio dj <i class="icon-angle-down"></i>   </a>   <ul style="list-style: none;" class="collapse" id="radiodjmenu">     <li><a href="#">information &amp; stats</a></li>     <li><a href="#">dj says</a></li>      .     .     . 

demo


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -