I have a menu with sub menu(vertical). My first li is active with the sub menu because i'm in the current page but My problem is when I hover in the next li I have the sub menu display it but if i lost the active li when i quits the menu
What I need is:
when my cursor is not hovering in my menu, i need the default sub menu that has the on class
This what i look do it
enter link description here
this link of my code in FIDDLE
enter link description here
I've changed your css so you don't need any js now.
It works this way:
In normal state an element with .on class is displayed;
When you hover #menu then we hide all the .niveau2 elements
When you hover some tab then we show only its .niveau2 element by adding an !important keyword to display property.
#menuu ul li:hover ul{
display: inline-block !important;
}
#menuu ul:hover .niveau2 {
display: none;
}
#menuu .on {
display: block;
}
Here is an example with my changes: http://jsfiddle.net/bymb6kvm/14/
Related
Having a side menu with parent and child options which used to display the content on the right main div if any of the child options are selected. Parent options will be shown on page load and
when the mouse hovers on the parent, child options are displayed, and when the mouse out the child options are hiding.
Now I wanted to keep the child options(submenu) expanded of that particular parent on mouse out also if the child option is selected/clicked and it should be hidden when other parent-child options are selected.
Below is the CSS property
# parent
ul li: hover li{
display : block;
}
# child
ul li ul li a : hover{
background-color - red;
border-radious: 25px;
color : red;
}
Keep submenu open on mouse out, already tried this.
Passing a class (e.g. selected/active) to the parent, if the child option is selected/clicked, and using that class to make the child 'display block important' might help you in this situation.
Try this.
CODE
//JS
$('.child-option').on('click', function() {
$('.child-option').parents('.parent').removeClass('selected');
$(this).parents('.parent').addClass('selected');
});
//CSS
.parent.selected li {
display: block!important;
}
I have changed mouseover event to a mouse-click event, and then by using jquery I fulfilled my requirement.
$(document).ready(function(e){
#To prevent action on child click
if(e.target !==e.currentTarget)
return ;
$("li.parent").children().addClass("dropdown")
});
To be simple I added a jquery function that allow me to insert an element to add an image to the menu:
$('.menu-item').append('<div class="hover--state"><img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png" /> </div>');
When the append is done this will be the layout of my menu.
<li class="menu-item">
Home
<div class="hover--state">
<img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png">
</div>
</li>
My css code for hovering:
#top-menu-nav > ul > li > a:hover + div{
display: block;
}
The image that I append its a shadow image of a menu when the state is on hover, so every time when the state is hover the image will be displayed which I added a display: block and when there is no hovering happen the image will be display: none.
The hover state are already done but there is a blingking every hover that I made. You can check the blinking hover on this link http://myway-hannover.de/
The problem isn't with your jQuery function - this is a CSS issue.
What's happening right now is, when the hover state is activated, it covers the <a> element, which then deactivates the hover state. You want to make sure the hover state remains activated when the shadow image is present. You can do this by moving the hover detection onto the <li> level like this:
change
#top-menu-nav > ul > li > a:hover + div {
...
}
to
#top-menu-nav > ul > li:hover > .hover--state {
...
}
I have small issue that I'm sure will be very straight forward to figure out just can't get it to work.
I'm working on site and can't seem to get the parent nav to stay highlighted whilst I scroll through the sub menu.
Hover over 'The Event' and then down through sub nav 'Key Facts' Etc you will see what I mean, the parent link goes back to white and I want it to remain #af5030 whilst scrolling down.
Any ideas how I can resolve this?
Thanks,
Jamie
You're only changing the color of the a element when the a element is hovered, you need to also change the color of the a element when the li element is hovered.
css
a:hover {
color: blue;
}
li:hover a {
color: blue;
}
html
<ul>
<li> // nav item
link
<ul> // dropdown content
<li></li>
...
</ul>
</li>
...
</ul>
#globalnav li:hover a{
color: red;
}
You are hovering the parent li then the a needs to take a style based on this.
Big story short: I created a responsive menu from a tutorial. The menu is supposed to show the submenu when you hover on portfolio button, and when on mobile mode you need to press the button to show the submenu (that works fine). The problem is that the tutorial had a error: if you press the portfolio button in desktop mode the submenu will not show again unless you press (click) the button, like in mobile mode.
Here's the live example: http://armandorodriguez.pe/info
I tried to write the code here but didn't understand the instructions, so here's the jsfiddle: jsfiddle.net/x44w1twf/
So basically what i need is that if I'm on desktop mode it always shows the submenu on hover, even if I press the portfolio button, and in mobile only when i press the button. Now I suppose this can be solved with a simple code in js, but I don't know nothing of js, so any help will be appreciated.
The thin is that when you click on the element to hide it that set the style inline display: none and that overwrite the style:
header nav ul li:hover .children {
display:block;
}
So add !important to the style like this:
header nav ul li:hover .children {
display:block !important;
}
Here a working jsfiddle example
For the normal behavior in mobile just add the style inside a media like this:
#media screen and (min-width: 800px) {
header nav ul li:hover .children {
display:block !important;
}
}
I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?
Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.
You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});
Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.
Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.