My problem is:
I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both. I use this code:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
},
function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
}
to animate the background-color on hover in menu and submenu.
I want to change the color of the text on hover to (diferent for menu and submenu, not the same color animation). For this I use this code:(Submenu example, for menu example, change the selector to $('ul.menu li a')
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
},
function () {
$(this).css({color:'#00FF00'});
});
All This works fine, but when I hover the submenu the menu returns to the original color state (because the mouseleave is activated on menu hover out).
All I want is that when I hover submenu the hover state in menu stays active as well.
I've tried many things but all give me problems, only thing that works is css, but I need to control the text colors dinamically too.
CSS That Works:
ul li:hover a {
color: #FFF;
}
(with this css code I control the menu color with the css and when I hovered the submenu the menu stays in active state, but the submenu works with jquery .hover).
Can anyone Help? Thanks!
HTML Menu:
<ul class="menu">
<li>text</li>
<li>text
<ul class="submenu">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>text
</ul>
If you want hover to set the current color until you hover some other li, use classes.
css:
ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }
js:
$('ul.submenu li a').mouseover( function() {
if (!$(this).hasClass('hovered')) {
$('ul.submenu li a.hovered').removeClass('hovered');
$(this).setClass('hovered');
}
});
I hope I understood you correctly. Good luck with your project.
[edit]
Oh hm, maybe you want it so when you go off to the submenu, your parent li shouldn't lose its color, despite you mousing out. If so, the same idea is applicable, you'd just want that mouseover code to select on the menu item mouseover (so mousing over the menu unsets all other menus and sets this one), then you just also need to have it remove your menu's class color if you mouse out of its submenu's ul. I don't know what your menus look like structure-wise, so I can't comment on a working CSS for this selector.
Oh and finally you'd want to have a css rule vs. submenu hover to handle your submenu's highlighting.
Sorry for the rambling answer...
Related
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.
I made a custom drop down menu on a HTML page + JavaScript. I want that menu to act as following:
When the button "Freunde" gets clicked, the drop down menu appears
When the button gets clicked again, the drop down menu disappears
When the mouse curor leaves the "area" of button + drop down menu, it disappears
The drop down menu consists of a main div with multiple divs in it (the "menu items").
My first approach was to put a onmouseout() on the main div of the drop down menu, but there is following problem: As soon as I hover over an inner div, the onmouseout() is true, and since the inner divs fill the entire main div, the drop down menu is visible only as long as the user doesn't hover over it.
So I tried it to solve similiarly like a JQuery lightbox, namely to put a "background" div over the whole screen and paste the drop down menu in there, and set the onmouseover() there. That would be almost perfect, but the "Freunde" button is also affected from that.
So is there any way to combine an event from different elements? Like
if(cursor is not over Button && cursor is not over DDMenu) set invisible
I marked the desired are in following image
Assuming you're set up as
<ul>
<li></li>
<li></li>
</ul>
You could set up your CSS like this:
#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }
And then set up your JS like this:
var menuClick = function() {
$(this).toggleClass('active');
menuHover();
};
var menuHover = function() {
$('#nav li.active').hover(function() {
}, function() {
$(this).removeClass('active');
});
});
$('#nav > ul > li').on('click', menuClick);
Granted, this is absolutely gross coding, but I think it should work. (this also assumes you're using the jQuery library).
Question about logics here:
What's the most elegant way to make the menu appear/disappear onmouseover/onmouseout?
See the following JsBin:
http://jsbin.com/owayeb/edit#source
The Menu is hidden by default.
If the user moves his cursor above the Link the showme() function gets called.
When the user moves his cursor away the hideme() functions gets called.
How would I get the Menu to persist while the user moves his mouse away from the Link to above the Menu?
Or is this all the wrong school of thought?
Assuming this is for cascading navigation or something similar, I would do something like...
<style type="text/css">
ul#nav li {
position: relative;
height: 20px;
}
ul#nav li ul {
display: none;
position: absolute;
top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>
<ul id="nav">
<li>
Link
<ul>
<li>Hi There!</li>
<li>Secone Nav Item</li>
...
</ul>
</li>
</ul>
Within the onmouseover state of your list items, you would add the .selected class to #nav thus causing all child UL's to be displayed. Because the child UL elements are within ul#nav, your hover state will still be active while you're rolling over the children.
You'll obviously need to tweak the CSS to match the desired look you want, but that's the general idea. If you were using prototype js for example, your javascript would look something like...
$$('#nav li').each(function(x) {
x.onmouseover = function() { $(this).addClassName('selected'); }
x.onmouseout = function() { $(this).removeClassName('selected'); }
});
you could add the same onmouseover listener to the drop div, so that it stays open:
<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')">
Hi there!
</div>
Best and most simple way I've done it is use the :hover selector to keep the submenu displayed.
Here's how I would go about it:
1. define a menu structure
<ul id='menu'>
<li>Menu Item</li>
<ul id='submenu'>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
</ul>
</ul>
Hide submenu in css and define submenu:hover to leave display: block
Attach to the menu item, the onmouseover to display the submenu (you might just toggle a class or something and toggle again about 5 secs later.)
Hopefully that works for you. The idea here is that you are hovering over the menu item to display the submenu, then the hover selector will keep the menu displayed, finally when the user hovers out the hover selector stops.
Can't remember exactly how I did it before because this was an on the fly thing, but the idea is there.
Not sure if this is what you're looking for or not, but check it out!
http://jsfiddle.net/5NmTB/
Let me know if you have questions
I use the superfish jQuery plugin to build Javascript drop-down menus. Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds some useful enhancements.
I have a Gmail-like Signout mechanism, such that when you hover on the username (on the top right), it slides down a menu that includes a "sign out" link. The username is on a floated list, while the menu that slides out is on an inner list (not floated). The sliding out/in is performed using jQuery.
This is what it's supposed to do:
The inner menu slides down (becomes visible) when username is hovered on;
if the mouse goes to the inner menu, the inner menu should remain visible;
if the mouse hovers elsewhere, the inner menu should slide back up (becomes invisible).
This is what it currently does:
The inner menu slides down when the username is hovered on;
when the cursor is off the username, the menu slides up - regardless of where the cursor is.
Perceived solution: I believe there should be an if clause somewhere that checks if the cursor is on the inner list and keep the inner list open, and that's the part that gets me stumped.
EDIT: Here is the current code:
HTML:
<ul id="user_spot">
<li><span class="username">username
<ul id="user_spot_links">
<li>Sign Out</li> <br />
</ul>
</li>
</ul>
CSS:
ul#user_spot li {
float:left;
position:relative;
}
ul#user_spot_links {
position:absolute;
top:20px;
display:none;
}
ul#user_spot_links li {
float:none;
clear:both;
}
JS:
$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
return false;
}, function() {
// this is where I believe the needed code should be"
$('ul#user_spot_links').slideUp('slow');
});
You don't need JS for that.
Check this fiddle: http://jsfiddle.net/PaKnc/
Basically the UL that slides down is a child of the LI you hover over. You can manipulate the CSS properties of a child in CSS.
For example:
#parent #child {
style1;
}
#parent:hover #child {
style2;
}
Here, style1 and style2 can be totally different. In our case we take advantage of this by altering the display property.
The problem is that when you need to exit the username anchor to hover over the dropdown. The simple solution is to just change the hover selector to be the li instead of the a. Then, you will not exit it even while you remain hovered over the dropdown.
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.