When I clicked on sub menu item my menu get closed, if I clinked on sub menu items. Please let me know how can I avoid this.
Actually "open" class get remove on clicking sub item.
<ul class='wraplist' style="height: auto">
<li class="">
<a href="javascript:;">
<i class="fa fa-home"></i>
<span class="title">{{app.translateByLocale('menu_home')}}/span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li submenu ng-show="app.checkOffSectionConfig('app_home')">
{{app.translateByLocale('menu_home_dashboard')}}
</li>
<li submenu ng-show="app.checkOffSectionConfig('app_statistic')">
{{app.translateByLocale('menu_home_statistics')}}
</li>
</ul>
</li>
</ul>
You can use e.preventDefault() to overwrite the default behavior by binding it with the click event on the sub menu item.
Related
I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
i use bootstrap 3 and i try to display a button group with a submenu.
i use bootstrap-submenu
i created the menu
http://jsfiddle.net/L8kbaqw3/
<div class="btn-group">
<button class="btn btn-primary" type="button">Actions</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a tabindex="0">Annuler</a></li>
<li><a tabindex="0">Sauvegarder</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="0">Payer</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Comptant</a></li>
<li><a tabindex="0">Débit</a></li>
<li><a tabindex="0">Carte de crédit</a></li>
<li><a tabindex="0">Carte cadeaux</a></li>
<li><a tabindex="0">Chèque</a></li>
</ul>
</li>
</ul>
</div>
</div>
that work fine.
but when i try to add something under it, i don't see all the menu
http://jsfiddle.net/hxnznnz6/
it's seem like something block it to display completly the menu.
Also if you compare the layout of the two button, it's different
Edit
i removed the first btn-group like #Eduardo Arruda Pimentel said.
look ok, but the sub menu of Payer is not displayed when i click on it
New result
http://jsfiddle.net/wn9u5z28/
1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:
Bootstrap 3 dropdown sub menu missing
Responsive multilevel menu with Bootstrap 3
2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:
class="btn-group"
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?
See the following code:
<div ng-controller="DropdownCtrl">
<div style="height: 100px; overflow-y: auto;">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</div>
</div>
http://plnkr.co/edit/DwQIi6ipDgN9LIOe5TqR?p=preview
I know that the problem is the height of the div, but I need to leave the height as is.
See the screenshot from my project:
How can I solve that problem?
I use position:fixed but it is not ok, because you use overflow:
if don't use position:fixed, Remove overflow..
My bootstrap dropdown menu changes position after I select an item and redirect to another page. The first image shows the dropdown in proper position prior to selecting dropdown item. And the second shows the position of the dropdown after I've selected a dropdown item and redirected to another page. I select the second menu item and the dropdown appears underneath the first menu item. (I guess I need a 10 reputation rating to post images, so you'll just have to imagine it. Sorry.)
My code is below
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-static-top">
<ul class="nav">
<li id="liHome" class="active" runat="server">
<a id="aHome" href="/home.aspx" runat="server">HOME</a>
</li>
<li id="liFindxxx" class="dropdown" runat="server">
<a id="aFindxxx" href="/xxxbrowse.aspx" class="dropdown-toggle" data-toggle="dropdown" runat="server">FIND SOMETHING</a>
<ul class="dropdown-menu">
<li id="liBrowsexxx" class="dropdown" runat="server">
<a id="addBrowsexxx" href="/xxxbrowse.aspx" runat="server">Browse</a>
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
<li class="divider"></li>
<li class="nav-header">Header</li>
<li>
A Link
</li>
<li>
Another Link
</li>
</ul>
</li>...
When i add a active class to li with id liFindxxx like class="dropdown active", or to a li from the submenu i don't find a problem.
When you remove the dropdown class from li with id liFindxxx you will get the results you describe. So make sure to add active to class tag and not overwrite it.