I have a simple 2 level dropdown nav in bootsrap with the code below:
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-left">
<li>Főoldal</li>
<li class="dropdown">
Iskolánk
<ul class="dropdown-menu">
<li>Alapadatok</li>
<li>Még egy teszt menü</li>
<li>Osztályok</li>
<li>Teszt menüpont valami</li>
</ul>
</li>
<li class="dropdown">
Információk
<ul class="dropdown-menu">
<li>Teszt, infók menüpontba</li>
</ul>
</li>
<li>Árlista</li>
<li>Hírek</li>
<li>Képgaléria</li>
<li>Dokumentumok</li>
<li>Kapcsolatfelvétel</li>
</ul>
</div>
I added this css to the style file, because i want to show the submenu on hover, not clicking a nav item.
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
When i click the "iskolánk" nav item, and move the cursor to the submenu, the "Iskolánk" nav item will get a white background, that shows me, that this is the active item, and also shows the submenu.
If i dont click the "Iskolánk" nav item, only just hover it, the submenu shows up, but if i move the cursor to the submenu, the "Iskolánk" nav item looses the white background, and it doesnt show that that is the active nav item.
How can i do that? I want to show the submenus always on hover, and not by clicking the parent. The bootstrap css and js file is from the bootstrap website, i dont change anything in them.
The problem is when you are moving to the submenu, cursor leaves the menu (parent) so the CSS hover does not work on it. So to solve this you can write a simple jquery code which keeps the hover effect on the parent(menu) when you are moving to the submenu. but remember, when you are leaving that submenu, you have to remove that effect from the parent.
Add this code snippet to your HTML file.
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu').hover(function(){
$(this).parent().css({background:'#eee'});
})
$('.dropdown-menu').mouseleave(function(){
$(this).parent().css({background:'#fff'});
})
})
</script>
Related
I have a problem regarding the class selector. I have this hamburger menu that is only shown in certain window size (small). In order to show/hide the hidden menu, you need to click the hamburger menu itself. Those menu hidden have submenus as well and can be shown by clicking the dropdown button.
Then here's my problem, when the window gets resized, the list hidden from the hamburger menu must be hidden, as well as the submenus. However, those lines of codes that were meant to close the hamburger menu (toggleClass and slideToggle as shown) only works when you manually click the close button, but not in resizing. I've investigated and found out that $subMenu didn't point to element that has sub-menu-open class, therefore the toggleClass and slideToggle didn't work. This is not the case for manually clicking the close button of hamburger menu (also calls closeNav function). In both scenario, if $('#nav-main ul').find('li').hasClass('sub-menu-open') is true so the slideToggle and toggleClass are the only items who aren't working.
I hope you can help me.
Jquery
$subMenu = $('#nav-main ul').find('.sub-menu-open')
openNav = () ->
# Insert stuff here
$container.toggleClass('menu-open', true)
if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
$menuCollapsed.stop(true, true).slideDown()
else
$navigation.stop(true, true).slideDown()
# Close navigation on window resize
$(window).on('resize', closeNav)
return
closeNav = () ->
# Insert stuff here
$container.toggleClass('menu-open', false)
# Hide menus
if $(window).width() > collapseWidth and ! $('body').hasClass('landing-page')
$menuCollapsed.stop(true, true).slideUp()
else
$navigation.stop(true, true).slideUp()
if $('#nav-main ul').find('li').hasClass('sub-menu-open')
$subMenu.toggleClass('sub-menu-open')
$subMenu.find('.sub-menu').stop(true, true).slideToggle()
HTML ELEMENTS
<nav class="nav-main" id="nav-main" style="display: block;">
<ul class="menu">
<li class="menu-item menu-item-icon">Library</li>
<li class="menu-item menu-item-icon">Store</li>
<li id="menu-classroom" class="menu-item menu-item-icon sub-menu-open">
<i class="icon-classroom"></i> Classroom
<ul class="sub-menu" style="display: block;">
<li class="menu-item menu-item-icon">Feedback</li>
<li class="menu-item menu-item-icon">Setup</li>
<li class="menu-item menu-item-icon">Mandatory assessments</li>
</ul>
</li>
</ul>
</nav>
I have a navigation menu which is almost perfect.
On Mobile:
When I open the hamburger menu, it will take up 3/4 of the screen size. I am okay with that. When I click on one of the links in the navbar I am taken to the correct section but the Menu remains open.
I prefer having the menu close as soon I click on one of the links rather than me having to press the Hamburger to close the menu.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Education
</li>
<li>
Experience
</li>
<li>
Testimonials
</li>
<li>
Skills
</li>
<li>
Contact
</li>
</ul>
</div>
you can add click listener on all of <a>'s and then close the bar in listener function
best way to do this is to give same class to all of them and add listener to them with for loop
or you can use jquery so you wont need for loop
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
Use this code, it will call click event for navbar-toggle class when you will click on navigation bar items. Which will close the navigation bar as you wanted.
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I am trying to setup a wizard-style theme on one of my pages for building a profile, and I want to be able to toggle the class of the pill nav on bootstrap by clicking next, although I am not entirely sure how to do so. My nav for the tabs layout is like this:
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">aaa</li>
<li role="presentation">bbb</li>
<li role="presentation">ccc</li>
<li role="presentation">ddd</li>
</ul>
My buttons look something like this, and they work, but they don't toggle the "active" class on the corresponding nav-pills:
Next
Is there a way I an target the nav-pills to toggle the active class?
$('.nav-tabs > .active').next('li').find('a').trigger('click');
This JQuery code in next button click may helps you to set next item in list as active.
Also i think that you should remove href="#bbb" from 'Next' button.
I have already got a nav menu at the top of my page, but now I am trying to expand a sub menu when I hover over one of these options. My first idea was to simply have a "div" section of the code like such
<div id= "expanded_menu"> <!-- sub menu option --> </div>
and show/hide it based on whether it's nav option was hovered over, but then I realized that the submenu would disappear as soon as I took my mouse off of it's corresponding nav menu button. Does anyone know a way to hover over an option, have that bring up a menu, and then be able to access the submenu without it disappearing?
The usual way to do this is with nested lists...
<ul id="main-menu">
<li>
First menu item
<ul class="sub-menu">
<li>Sub menu item</li>
...
</ul>
</li>
<li>Second menu item</li>
...
</ul>
And use the following CSS.
.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }
As long as the sub-menu is nested in the parent menu item's div, your method should work. So your HTML structure would be:
<div class="main_menu_item">MainItem
<div class="sub_menu_item">Item1</div>
<div class="sub_menu_item">Item2</div>
</div>
Then you're still hovering on the main item when hovering on the sub-items.
However, I personally would implement this all in CSS -- search for "CSS menus" and you'll find a ton of resources.