I have one of those responsive menus on my one-pager site which brings up a transparent fullscreen menu when the hamburger icon is clicked. The fullscreen menu closes when user clicks the close button (X) at the top right, so everything works fine. But since most of my site is one-page, all the links in the menu are also links within the same page. When user clicks one of those links, the page jumps there as intended but the transparent fullscreen menu still stays fullscreen as it is...
The menu should disappear when user clicks on a link exactly as it does when user clicks the close button. This is the problem I'm trying to solve and I'm sure it requires just a few lines of Javascript but I'm not so fluent in JS.
This is the website:
http://www.artegradesign.com
Here's the related code (maybe there's more to it, not sure):
HTML
<div class="menu-btn"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
CSS
.menu-btn {
cursor: pointer;
height: 60px;
width: 60px;
display: inline;
z-index: 99;
position: absolute;
top: 2px;
right: 5%;
}
.close-btn {
position: fixed;
z-index: 100;
}
nav {
position: fixed;
top: -1600px;
left: 0;
right: 0;
background-color: rgba(0,26,51,0.95);
transition: all 0.5s;
color: white;
min-height: 100%;
z-index: 99;
}
.open {
top: 0;
}
JS
$(document).ready(function(){
$('.menu-btn').click(function(){
$('nav').toggleClass('open');
$(this).toggleClass('close-btn');
$('.container').toggle();
})
})
Update: I managed to close the fullscreen menu (with the js below) when clicking on a link, but it also makes the menu button disappear entirely. So I still need a hero to bring it back!
$(document).ready(function(){
$('nav li a').click(function(){
$('nav').toggle();
})
})
Thanks!
Seems less ideal how the click event is being handled, but because you are just looking for a toggle when you click it (for both closing and opening), you can just tie a link click in with triggering the menu click like so:
$('nav li a').on('click', function(){
$('.menu-btn').trigger('click');
});
I do suggest using an ID or a specific class for your nav, however. It could easily break if you added a nav element with an unordered link list anywhere else in the site.
Related
*Edit: Everyone is disliking this post :(
So I want a button (I'll make a hamburger text) and when I click the button I want the whole page (the navigation element) to become (100% width and 100 height and I'll put flex in it) the navigation menu and when I click the button again the navigation element disappears.
What I want to know:
How do I do the CSS so that the navigation element opens over everything else?
position:absolute?
(After I know how to put the navigation element over everything else -
Maybe display: none on the navigation page and somehow put it over everything when I change display: visible with JS?)
Where can I find JS (because I don't know it yet) to edit CSS of the navigation element on click?
Something like this from W3, but I will probably need to change the diplay from none to visible and back again:
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
In order to set your navigation into full screen, you should use position:fixed property of css. In order to properly hide and show the navbar you should toggle the class of the element instead of directly applying the display style. Take a look at below example to understand it better -
let btn = document.getElementById('btn');
let nav = document.getElementById('nav');
btn.addEventListener('click', function(){
//event listener toggling the active class
if(nav.classList.contains('active')){
nav.classList.remove('active'); //remove active class if already added
} else {
nav.classList.add('active'); //add active class if not added
}
});
html, body{
height: 100%;
width: 100%;
}
nav{
display: none; /*default in hidden state*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
color: white;
}
nav.active{
display: inline-block; /*visible if nav element contains active class, applied via JavaScript code*/
}
#btn{
position: fixed;
top: 40px;
left: 10px;
z-index: 100;
}
<nav id="nav">
Full screen content
</nav>
<button id="btn">toggle full screen element</button>
<p>Some static content</p>
Try to add css position:absolute; and z-index=99 to your navigation element and toggle its display with onclick.
I am using the veggie theme on Wordpress and have added subcategories to the primary menu, which appear as a dropdown list with mouse hover. However, with mouse out the dropdown disappears. Any ideas on how I can fix it?
The website is http://iceyog.gr/ and the menu element is "FROZEN YOGURT"
Thanks!
there is a few px of space above the ul element (dropdown).
In the style.css file on line 2207 there is this code:
.main-navigation ul ul {
background: white;
float: left;
margin-left: -0.875em;
padding: 0 0.875em;
position: absolute;
top: 1.75em; // (Remove this line to fix the issue)
left: -999em;
text-align: left;
width: 180px;
z-index: 99999;
}
I think it's because the hover event is set on the a element instead of the li element.
Since the ul child group is in the li element, when you hover the li you can still see the dropdown when you hover it instead of hover the a element which is not hover when you hover the dropdown child menu.
Here's a basic example to explain my thoughts
I'm developing a web application for a soccer team. I use HTML5+CSS with Bootstrap 3.0.3 and jQuery.
As first, on the top a menu appears, everything works fine.
So I decided to go to the news section where I added the jQuery bxslider plugin.
The problem is that when the menu is clicked and the dropdown appears, the bxslider buttons are still visible, which looks very disturbing and unuseful.
How to disable those two buttons while displaying the menu? Would a proper solution be to create an jQuery event which will hide slider temporarily or is there a CSS trick that I overlooked?
Demo: here
Resolution with the issue: 320 x 568 (small devices)
Default index.html:
After I click on the menu:
To resolve this, change the z-index of the arrows like so :
.bx-wrapper .bx-controls-direction a{z-index:100};
Give .navbar-fixed-top to z-index:99999; will make arrow in visible when menu open.
.navbar-fixed-top{
z-index:99999;
}
By Default navbar with fixed top have z-index of 1030 as you can see from below code
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
and carousel arrow have z-index 9999;
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
Now You just have to increase the z-index>9999 for your navbar for this to work by adding some custom style to overrride the default z-index of navbar.
e.g
.navbar-fixed-top{
z-index: 10001;
}
So I have a div that is formatted to essentially be a "pop-up" on my website. So on the website, you can scroll. But then when you click an icon to trigger the pop-up, the pop-up itself will allow scrolling (and the scrolling of the website will be disabled). But now I have an image for the "close" button which I want to be fixed in a certain position on (and only on) this div. How would I accomplish this? I don't want the close image to show up at all until the popup is shown, and it disappears when the popup is closed. Currently, I'm using "position:absolute" and it only shows for the popup, and goes away when the popup is closed. But the user has to scroll back up to see the close button again.
Fiddle Here
Using absolute position is a fine idea in this situation. The key is to make sure that the close button isn't inside the scrollable pane, but on the same level as the wrapper.
HTML
<div class="popup">
<div class="popup-content-wrap">
<div class="popup-content"></div>
</div>
<div class="close">close</div>
</div>
CSS
.popup {
position: fixed;
background-color: blue;
left: 50px;
right: 50px;
bottom: 50px;
top: 50px;
}
.popup-content-wrap {
height: 100%;
width: 100%; overflow: auto;
}
.popup-content {
height: 1000px;
}
.close {
position: absolute;
bottom: 20px;
right: 20px;
}
I have a question about my jQuery Bootstrap Dropdown. I have a problem when I try open the dropdown menu and then try to right click menu, the dropdown will appear disappear. And when I try to scroll down, the dropdown not fit with the root menu.
What I want is :
Make keep dropdown show when I try to right click the menu.
Make dropdown fit (fixed) when I try to scroll bar, it will stay to fit.
CSS :
.dropdown
{
position: absolute;
z-index: 9999999;
display: none;
}
for more detail see my fiddle for demo here
Anyone please advice. Thanks
working jsFiddle
change like this.
.dropdown
{
position: fixed;
z-index: 9999999;
display: none;
top: 35px;
right: 6px;
}
and comment
position() in show method.
and comment
$(window).on('resize', position);