I have the javascript here for menu toggle
//navicon//
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
Here is the html portion
<header>
<div class="logo pull-left"><img src="images/logo.png" alt="" title=""></div>
<div class="navigation pull-right">
<a href="JavaScript:Void(0);">
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
<div class="menu">
<nav>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 centered text-center">
<ul>
<li><a href="#top" >Home</a></li>
<li>About Design Mania</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</header>
The problem is when i click the hamburger button the menu opens perfectly. I have the website as 1 page scroll. So when clicked on a menu item it goes to that portion perfectly. But still the X button is showing , when again clicked on it the hamburger button appearing and this time menu opens and the hamburger button is showing there , but selecting menu and going to specific portion is not a problem.
So the main problem is once it showing closing button while menu is closed and once showing hamburger while menu is opened and this continues. So everytime it needs 2 clicks to make it perfect.
Here is my menu toggle
//menu-toggle//
$(document).ready(function(){
$(".navigation").click(function(){
$(".menu").slideToggle();
});
});
Please help me.
Since your div #nav-icon2 is inside an anchor a you should prevent the default action :
$(function(){
$('#nav-icon2').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
});
});
Hope this helps.
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'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 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.
After opening popup, want to disable the background in jquery reveal modal. Please look at the following fiddle. In this fiddle it is working, but it has taking the whole screen. I want to set it as inside the particular div.
$(function () {
$(document).foundation();
$('ul.f-dropdown li a').on('click', function (event) {
console.log('Dropdown clicked', event.target);
$('.reveal-modal').foundation('dropdown', 'closeall');
});
});
.generation .reveal-modal {
background-color: red;
}
.generation{
width:700px;
height:400px;
background:lightgreen;
}
Click Me For A Wonky Modal
<div class='generation'>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Wonky Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
</div><!-- / .generation -->
<hr/>
Click Me For A Working Modal
<div id="myWorkingModal" class="reveal-modal" data-reveal>
<h2>Working Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
Please check this fiddle and help me for do this.
I don't believe a modal dialog is the appropriate element to use in this situation. A modal dialog is normally used to grab the user's attention and have them perform a global action, such as a confirmation message for deleting something. I'm not sure what you are trying to accomplish with your modal, but I would suggest going for more of a simple show/hide section. This way, it can be placed within the context of your content block. Foundation's modals are always going to be positioned relative to the viewport, not to a specific container.
Check out this article on how modals and overlays are best used: https://www.nngroup.com/articles/overuse-of-overlays/
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>