How do I make two buttons appear underneath each other in a dropdown menu of Javascript? This is the code that I tried but they appear next to each other:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-pencil"></i> Registeration Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<a id="btn-register" href="#">User</a>
<a id="btn-registerAdmin" href="#">Admin</a>
</ul>
</li>
<li>
Login
</li>
</ul>
<li><a id="btn-register" href="#">User</a></li>
<li><a id="btn-registerAdmin" href="#">Admin</a></li>
Add <li> tags.
Related
How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.
Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>
Bootstrap navbar Active State is not working.
I have bootstrap v3.
I use the class="active" on mynavbar on its submenu when I collapse none work.
Here is my code with js/css/bootstrap files I have included:
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demoadmin">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul id="demoadmin" class="collapse in">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
You didn't show us enough HTML to see exactly what you are doing wrong, but it looks like you're trying to get the active class to work on a bootstrap dropdown-menu.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
DEMO
Try this
$(document).ready(function(){
$(".active").removeClass("active");
$(".dropdown-menu li").addClass("active");
});
I have a one html page and top of the page I am display the some menu .under menu having some li. Now I want to click on any li and displaying the content of each li below the iframe:
<div class='main_container'>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Tea <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation">Tea1</li>
<li role="presentation">Tea2</li>
</ul>
</li>
<div id="nav">
<iframe id='link'></iframe>
</div>
</div>
Can anyone tell me how I can do that?
use target="iframe"
here is the example http://jsfiddle.net/47tub983/
I have a two drop down list using twitter bootstrap, but I have a small problem .. when choosing the menu , the sub items appears , bu then in the next time don't .
Html code :
<ul class="nav nav-pills left">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" style="color:#fff;" data-toggle="dropdown" href="#menu1"><i class="icon icon-user icon-white">
</i> My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Previouse Report</li>
<li>My Profile</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="lbtnLogout" runat="server" CausesValidation="false" ForeColor="Black">Log out</asp:LinkButton></li>
</ul>
</li>
<li class="dropdown active" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"><span class="badge-notification badge badge-error">
<asp:Label ID="lblMsgCount" CssClass="lblMsgCount" runat="server" Text=".."></asp:Label></span>
<i class="icon icon-envelope icon-white">
</i> Notificatons <span class="caret"></span></a>
<ul ID="divNewNotifications" class="dropdown-menu">
</ul>
</li>
</ul>
JavaScript code :
$('.dropdown-toggle').dropdown();
and included the required lib.
<script src="../bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
Here is the code on http://jsfiddle.net/zNVgq/2/