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.
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 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 have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks
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()