I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.
I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow.com to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.
EDIT
Here is the menu layout:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>menu1</li>
<li class="dropdown open">
menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<div class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">go</span>
</div>
</div>
</div>
Thanks.
EDIT 2
DanDavis suggestion in the comments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.
This uses only css. working demo
Add a class to the dropdown ul (.stay-open)
<ul class="dropdown-menu stay-open">
then apply style display block with !important
.stay-open {display:block !important;}
I am assuming that you are using a bootstrap dropdown, give this a shot:
$('li.dropdown').on({
"shown.bs.dropdown": function() { this.close = false; },
"click": function() { this.close = true; },
"hide.bs.dropdown": function() { return this.close; }
});
The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.
Here is working proof bootply
Here is a working proof bootply that will always stay open
Related
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
I am trying to replicate the "tabs" section as explained in this tutorial: Google material Design. Everthing works fine except when I insert a date which uses a datepicker widget from this url: Datepicker. As soon as I select the date all the tabs in Megamenu become unresponsive
HTML code for the tabs:
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">Home</li>
<li>Reminder</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">
Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Insurance History Between Dates</li>
<li class="divider"></li>
<li>Insurance history of Account</li>
<li class="divider"></li>
<li>Insurance Amount between dates</li>
</ul>
</li>
<li>Bulletin Board</li>
<p class="user" data-toggle="tab">Welcome Wasim(1117004017)</p>
</ul>
Script for datepicker:
$("#dtBox").DateTimePicker();
This renders Megamenu like this:
One more strange thing I came across is that as soon as tabs become unresponsive and I click on "Reports" tab I get this:
It was the fault of the DatePicker plugin. This line of code
$(document).unbind('click')
stopped bootstrap's propagation of the menu.
I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.
My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").
I'll share some code to make it a bit more understandable:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown <span class="caret"></span>
<!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service -->
<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>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown <span class="caret"></span>
<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>
</li>
</ul>
</div>
</div>
</nav>
http://jsfiddle.net/kozog9rx/2/
(be sure to read the comment in the HTML and give the "Result-view" enough space/width so the menu appears)
Well, assuming you are using bootstrap 3.2.0 Here's the code:
<li class="dropdown">
Dropdown
<span class="caret"></span>
<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>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
What i'm doing is making the carat open the menu, and the text href to wherever you want it to go to.
Check my FIDDLE, as you can see there are some dropdown menus,please resize the browser in a way that 'Dropdown' menu will come to right side. Then go to '2nd level menu' as you can see submenu are opening in right side, hence they are not visible fully. Although we have space in left-side, is there any way we can make sub-menu visible on left if it's going beyond screen.
How it's looking:
So this is what I want to achieve:
How to detect particular menus is going outside the browser edge??
After detection How to make it reverse aligned, so that user can see it.
How it should behave, if there is not enough space in right-side to open submenu, menus will be shown in left-side:
HTML
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Dropdown <b class="caret"> </b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>I can be in left side</li>
<li>Why i am coming on right side</li>
<li>I want to come in Left side</li>
<li>Enough space in left</li>
<li>I will not be visible as i am long</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
you can use pull-left if the dropdown in the right of the page: Fiddle
you can use some JS to make it dynamic on browser re-size, by calculating the div position
I'm creating a whole website using Java / JSP, but also using zurb foundation.
Now I know that you have to call $(document).foundation(); to make foundation work, but because I'm using ajax to switch between screens (does not have that flash effect of that white screen when switching between pages) when I open my home page it executes that method ($(document).foundation();) and everything looks fine.
The problem comes in with the Top Nav bar that I have. If it goes over to the mobile version, you get that Menu button on the right hand side, and switching there between sub categories, shows a "Back" button to go back to the parent category.
The problem begins when I open my next page (using ajax), it now has components on there namely components. These in fact looks way better on foundation than the normal standard html ones. When I execute $(document).foundation(); again, the components goes into the foundation styled components but now with the top nav bar, there are 2 back buttons and that messes around with the functionality of the back button as well i.e. breaks it. When I go to the screen again, it adds another back button and so on.
Is there someway to revert the foundation() method, and then call it again to refresh it?
This is my Top Nav bar.
<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'>Non-Financial
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li>SubCat 1</li>
<li class="divider"></li>
<li>SubCat 2</li>
<li class="divider"></li>
<li>SubCat 3</li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin- right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li>Cat 4</li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>
If you need any more info, please ask and I will respond.
Thanks.
I've been having the same issue. I couldn't find a solution through foundation, but I did come up with something that's suitable for my purposes.
Firstly, instead of simply doing $(document).foundation(), I execute
$(document).foundation({topbar : {custom_back_text: false }});
This makes it so that the "back" button is now named after its previous menu. So, each back button title should be unique. It's important that they are unique. Now, I have a script that removes all duplicate menu items, based on their link text. I have it set to trigger each time someone clicks on a menu item with sub-items (foundation gives these a class of 'has-dropdown not-click'). This way the script only runs when it's truly needed.
function (){
var uniqueBackButtons = [];
$.each($('.back'), function(){
if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
}
else{
$(this).remove();
}
});
}
I also have the same issue.
I think the reason why I do have multiple "back" button is because of multiple declaration of this code:
$(document).foundation();
Notice that I have embedded this
<script src="js/app.js"></script>
that also contains that script. It works to me. I put all my scripts on js/app.js