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>
Related
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 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>
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'm wondering if anybody could help. I'm using a Bootstrap Template from wrapbootstrap, called "Black Pearl". It contains a dropdown style menu that is structured like the below; It creates a menu with options, and you can specify submenus which drop down when the main option is clicked - as per example below. "Customers" is the main heading, and "New Cutomer" drops down when customers is clicked.
<ul class="side-menu shadowed">
<li> <a class="navmenu" url="login.php?" href="#"><i class="icon-home"></i>Home</a>
</li>
<li class="submenu"> <i class="icon-address-book"></i>Customers
<ul>
<li>New Customer
</li>
</ul>
</li>
</ul>
The javascript which i think runs this...
/* --------------------------------------------------------
Side Menu
-----------------------------------------------------------*/
(function(){
$('.side-menu > li.submenu > a').unbind();
$('.side-menu > li.submenu > a').click(function(e){
e.preventDefault();
if (!$(this).next('ul').is(":visible")) {
$('.side-menu > li ul').slideUp(150);
$(this).next('ul').slideDown(150);
}
else {
$(this).next('ul').slideToggle(150);
}
});
})();
Anyone have any ideas how i could toggle the menu change from a link outside the menu?
Thanks a lot :)
You can find the target menu trigger and programatically trigger a click event...
like if you want to trigger the customers menu, for easy selection of the element add a Class to the anchor element as given below
<li class="submenu"><i class="icon-address-book"></i>Customers
then
$('a.customers').click()
I got a menu that opens correctly and close correctly when you touch the menu on a iPad. thats fine, but i also want to close the menu, when you touch outside the menu. it works when you touch a picture and a link, but it doesnt work when you touch anywhere else.
here its my code:
HTML :
<nav onclick="" class="acconicon">
<nav class="accon">
<figure class="acmlogo"></figure>
<h5 class="acconh5">Hovedmenu</h5>
<ul class="sbm3">
<li class="acfront">Forside </li>
<li class="acnews">Nyheder </li>
<li class="acartists">Artister</li>
<li class="acreleases">Udgivelser</li>
<li class="aclive">Live</li>
<li class="acvideo">Videoer </li>
<li class="accomp">Konkurrencer</li>
<li class="acremix">Remix</li>
</ul>
</nav>
</nav>
Script:
$('html').click(function() {
$('.accon').hide();
});
$('.acconicon').click(function(event){
event.stopPropagation();
});
$('.acconicon').click(function(event){
$('.accon').toggle();
});
I think you just need to use not selector of JQuery. I created a simple code that you should try.
$('*:not(.acconh5,sbm3,sbm3 > a)').click(function() {
$('.accon').hide();
});