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 & 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 & stats</a></li> <li><a href="#">dj says</a></li> . . .
Comments
Post a Comment