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.
Related
I have a dropdown menu.
On some pages, the link just scrolls to the anchor instead of refreshing the page.
When this happens then dropdown menu is supposed to close. But it does not.
This is my html
<div class="navbar">
<div class="nav_item">
<div class="dropdown menu_item" >
<span class="navbar-submenu"> dropdown</span>
<div class="secondarynav" >
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
</div>
</div>
</div>
<div class="nav_item">
<div class="menu_item" >
link
</div>
</div>
</div>
What is supposed to happen is when a visitor clicks on dropdown, active class is added to the parent nav_item, which then shows the rest of the menu.
When a user clicks dropdown again active is removed and dropdown closes.
$('.dropdown').click(function (e) {
$(this).closest('.nav_item').toggleClass('active');
});
Now the problem, when a visitor clicks dropdown, then any of the children links I would like the active class removed, which currently only happens when the dropdown link is clicked.
I have tried various other methods
$('.nav_item.active > *').click(function(e) {
$(this).closest('.active').removeClass('active');
});
But this glitches with the toggle function in the other scipt. Basically the active is added then removed straight away.
How can I set it so when .dropdown is clicked .active is added to the parent nav_item. But then if any link in that menu is clicked the .active is removed? Thanks
Use e.stopPropagation() to prevent the event on the item from bubbling up to the dropdown.
$('.nav_item.active > *').click(function(e) {
e.stopPropagation();
$(this).closest('.active').removeClass('active');
});
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 am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.