This question already has answers here:
Show submenu's submenu on submenu hover only
(3 answers)
Closed 4 years ago.
I created an HTML page with a navigation menu in a sidebar. Some of the menu element contain sub-elements. What I am trying to do is:
Hide all sub-elements (this I managed)
If I hover over an element that has sub-element, show the sub-elements.
If I hover over an element that does not have any sub-elements, don't do anything.
I sort of know how to do this with CSS, but since this is for a jQuery class, I want to use jQuery.
I already found a few hints on the web, but I don't really know how to apply the suggestions to my code. I am completey new to jQuery, hence any help will be much appreciated!
Here's the HTML:
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
CSS:
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
}
This is a jQuery snippet that I found and that seems to make sense, but I am not sure how to apply it.
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'deployed'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('deployed');
$(this).addClass('deployed');
}
});
});
If you want to only use jQuery to achieve this. This is how you can do it.
$(document).ready(function() {
$('.menu > li').hover(function() {
$(this).has('.submenu').children('.submenu').stop().slideToggle();
});
});
So what the above code does is that on hover, it checks if the hovered element has a children with a class '.submenu' and if it does, then it selects that children and toggles it with a sliding effect. Instead of slide toggling it you could obviously do anything with it like adding a class.
The .stop() stops repetition of the sliding effect if you were to quickly toggle hover on and off several times.
I fixed below then the sample works like below snippet (for demo purpose, remove position:fixed from ):
1. bind hover event to $('nav > ul > li > a') intead of $('#nav > li > a'), but it slideDown the sub menu when the mouse hover on the sub menu, so need to change it to $('nav > ul > li')
2. replace max-height:0 with display:none; Below is the reason using display instead of max-height.
Check JQuery API:
As JQuery Defined:
The .slideToggle() method animates the height of the matched elements.
This causes lower parts of the page to slide up or down, appearing to
reveal or conceal the items. If the element is initially displayed, it
will be hidden; if hidden, it will be shown. The display property is
saved and restored as needed. If an element has a display value of
inline, then is hidden and shown, it will once again be displayed
inline. When the height reaches 0 after a hiding animation, the
display style property is set to none to ensure that the element no
longer affects the layout of the page.
3. in the handler of hover bind, execute $('ul', $(this)).slideToggle( "slow" );
$(document).ready(function () {
$('nav > ul > li').hover(function(){
$('ul', $(this)).slideToggle( "slow" );
});
});
nav {
float: left;
width: 200 px;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
We add const subMenu = $(this).find('.submenu'); to find .submenu element with .menu > li selector.
Then we add our logic to toggle class via addClass and removeClass. I have also included second callback for .hover, which is hoverout.
$(selector).hover(hoverInCallback, hoverOutCallback);
Since I did not want to mess your css I have added only following rule
.submenu.visible {
overflow: initial;
max-height: auto;
}
Hope this helps!
Here is working example.
$(document).ready(function () {
$('.menu > li').hover(function() {
const subMenu = $(this).find('.submenu');
subMenu.addClass('visible');
},
// hoverout
function() {
const subMenu = $(this).find('.submenu');
subMenu.removeClass('visible');
});
});
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
}
.submenu.visible {
overflow: initial;
max-height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
You just need to make a few adjustments to your code, mostly targeting, but also a minor CSS change.
Change #nav to .menu in all jQuery code so that the correct elements are targeted.
Change max-height: 0; to display: none; in the .submenu CSS so your submenu can be shown . You can also set a min-width for your menu so the width doesn't change when the submenu is visible.
You may also choose to modify your jQuery code or add a mouseout handler so the submenu is hidden when you are no longer over the parent/submenu.
See this fiddle: https://jsfiddle.net/vbryo27z/9/
To actually answer your question unlike these others... Basically add a mouseenter event handler, check if the li has a submenu, if so add the active class to it.
Modify it to how you want them to close
$('.menu li').mouseenter(function() {
if($(this).has('.submenu')) {
$(this).find('.submenu').addClass('active');
}
});
$('.menu .submenu').mouseleave(function() {
$('.submenu').removeClass('active');
});
nav {
float: left;
width: 200 px;
position: fixed;
top: 80px;
left: 10px;
border-top: 1px solid #9AA2B2;
border-right: 1px solid #9AA2B2;
border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
padding: 10px 15px;
background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%);
border-top: 1px solid #9AA2B2;
border-bottom: 1px solid #2E323A;
text-decoration: none;
color: white;
}
.menu a:hover {
background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%);
}
.submenu a {
padding: 10px 25px;
background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
border-bottom: 1px solid #CFD0CF;
color: black;
}
.submenu a:hover {
background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%);
background-color: #C5C6C5;
}
.submenu {
overflow: hidden;
max-height: 0;
transition: 0.3s ease;
}
.submenu.active {
max-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Page 1</li>
<li>Page 2
<ul class="submenu">
<li>Subpage 2a</li>
<li>Subpage 2b</li>
<li>Subpage 2c</li>
</ul>
</li>
<li>Page 3</li>
</ul>
</nav>
Can someone please tell me how to solve the problem. I recently tried to make a navigation menu for my website which opens subcategories on hover. But the problem is that the subcategory LI items are not displayed properly, they are displayed behind the other objects and are not visible. I tried to put z-index and some other solutions to fix the problem, but I havent managed to do that
Here's a picture that will show you whats the exact problem
http://s27.postimg.org/soa5vro1f/Untitled.jpg
This is the CSS and JS code i used for it, only CSS Code is here:
<style>
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative; font-size:0;
list-style: none; margin: 0; padding: 0; display:block;
}
/* Top level menu links style
---------------------------------------*/
.showMe
{
z-index: 99999999999;
}
#menu-v li
{
list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height:26px;
padding-left:26px;
}
#menu-v ul li a
{
}
#menu-v li a.arrow:hover
{
background-image:url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
position: absolute;
width: 200px; /*Sub Menu Items width */
visibility:hidden;
z-index: 9999999999;
}
#menu-v a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover, #menu-v li.onhover
{
background-position:0 -62px;
}
#menu-v ul li
{
background: rgba(255, 255, 255, 0.86);
background-image:none;
}
#menu-v ul li:hover, #menu-v ul li.onhover
{
background: #eeeeee;
background-image:none;
}
/* Holly Hack for IE \
* html #menu-v li
{
float:left;
height: 1%;
}
* html #menu-v li a
{
height: 1%;
}*/
/* End */
</style>
And this is part of the ul list, the JS code is not included:
<ul id="menu-v">
<li><a class=" arrow" href=""><strong></strong></a>
<ul style="left: 180px; top: 0px; display: none;" class=" sub showMe">
<li ><i class="icon-double-angle-right"></i> Преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Опрема за преносни компјутери</li>
<li ><i class="icon-double-angle-right"></i> Таблет компјутери (Tablet PC)</li>
</ul>
</li>
You have a couple problems here:
1. NO INLINE STYLES!
As a rule of thumb, NEVER EVER EVER EVER EVER EVER EVER put styles inline. It is hideous and hard to debug and can't be overridden easily by other CSS. One style in particular, your display:none in your submenu <ul> is causing you grief here.
2. Use display:none in your CSS for your submenu, not visibility:hidden
So to remedy this, you put it in your CSS:
#menu-v li ul
{
display:none;
/*visibility:hidden <----NO!*/
}
3. Use li:hover to show the submenu
#menu-v li:hover ul
{
display:block;
}
Voila!
JSFiddle
As it stands i have created a navigation menu using the background-position css property. click here
#nav-menu li a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
display: block;
cursor: pointer;
height: 102px;
}
#nav-menu .shop a{
background-position: left top;
width: 139px;
}
on the shop link i have created a drop-down function to display another menu, the issue i am having is all the tags within my property are duplicating the background of
nav-menu li a
Is there a way i can cancel out this particular background image in my show and hide menu to display another background image?
in #nav-menu li a you should use the descendant operator so that only direct children are selected.
For example
#nav-menu > li > a
Replace in your css :
#nav-menu li a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
display: block;
cursor: pointer;
height: 102px;
}
With :
#nav-menu > li > a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
display: block;
cursor: pointer;
height: 102px;
}
Know more about Direct Decedent Selector ( " > " ) Here
You can either use first-child; to only set the background to the first element
#nav-menu li:first-child a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
}
Or you can force the background to something else on all <li> elements following another <li> element
#nav-menu li + li a{
background-image: none;
}
I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!
nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.
nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}
try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }
I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/
To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS
I'm trying to disable the hover functionality for a menu.
I want it to be enabled only under certain conditions.
I've tried using $(".ulColor").removeClass('hover');, but that hasn't worked
The CSS code for enabling the hover is :
li:hover ul, li.over ul { display: block; }
Here is the HTML DIV inside which the menu resides -
<div id="pColorSelectorDiv" class="parentOfAll">
<ul id="colorNav" class="ulColor">
<li id="liColorNav" ><a id="colorSelected" class="firstAnchorChild">Colors</a>
<ul id="ulColorChild" class="ulColor">
<li><a id="bkgColor-1" class="bkgColor-1 anchorClass" name="colorPallete" onclick="colorPicked('1');">COLOR</a></li>
<li><a id="bkgColor-2" class="bkgColor-2 anchorClass" name="colorPallete" onclick="colorPicked('2');">COLOR</a></li>
<li><a id="bkgColor-3" class="bkgColor-3 anchorClass" name="colorPallete" onclick="colorPicked('3');">COLOR</a></li>
</ul>
</li>
</ul>
</div>
Here is the rest of the CSS code :
div[id="pColorSelectorDiv"] ul {
margin: 0;
padding: 0;
list-style: none;
width: 50px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
div[id="pColorSelectorDiv"] ul li {
position: relative;
}
.firstAnchorChild{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
li ul {
position: absolute;
left: 49px; /* Set 1px less than menu width */
top: 0;
display: none;
background: White;
}
/* Styles for Menu Items */
.anchorClass{
display: block;
text-decoration: none;
color: #777;
background: White; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
cursor: pointer;
}
.bkgColor-1 {background: #00FFFF; color: #00FFFF;}
.bkgColor-2 {background: #0000FF; color: #0000FF;}
.bkgColor-3 {background: #7FFF00; color: #7FFF00;}
I think you want
li.hover:hover ul { display: block; }
instead of
li:hover ul, li.over ul { display: block; }
Now this style will affect ul only when li is hovered and has hover class.
A simplified example.
PS You might also benefit from using 'code sample' button on edit form (the one with zeroes and ones) to format your code. Among other things, it'll preserve indentation (and thus increase readability). The key combination is ctrl+K. I've edited one of your code samples to demonstrate it.