I am trying to implement a drop down menu in a HTML page using CSS and jquery. Here is a sample of the HTML and javascript code.
<nav id="topNav">
<ul>
<li>Menu 1</li>
<li>
Menu 2
<ul>
<li>Sub Nav Link 1</li>
<li>Sub Nav Link 2</li>
<li>Sub Nav Link 3</li>
<li>Sub Nav Link 4</li>
<li class="last">Sub Nav Link 5</li>
</ul>
</li>
<li>
Menu 3
</li>
</ul>
</nav>
Here is the Javascript code:
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$(this).click(function() {
$(this).find("ul").stop(true, true).slideToggle();
});
}
});
I will be adding content to menu programmatically, and I want the dropdown menus to be scrollable when the content of the dropdown menu gets too large.
How can I do this?
Try this using css like,
#topNav ul li ul{
max-height:250px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
Demo
There is a css property max-height you can use it:
#topNav ul ul{
max-height:150px; // you choice of number in pixels
overflow-x:hidden; // hides the horizontal scroll
overflow-y:auto; // enables the vertical scroll
}
Why not use a purely CSS solution?
FIDDLE
You can change the transition property to have the style of animation for the slide you prefer, and the max-height value to limit the size of the dropdown before scrolling occurs.
HTML
<ul id='menu'>
<li>item</li>
<li>item</li>
<li>dropdown
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
CSS
body, html {
width:100%;
}
ul {
list-style:none;
margin:0;
padding:0
}
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
width:100%;
max-height:0;
overflow:hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
#menu li:hover ul {
overflow:auto;
max-height:50px;
}
use CSS style:
#topNav{
overflow:scroll;
}
Isn't it possible to set a height and then overflow: auto, as CSS a property? and the scroll will automatically appear?
Related
When I open a child div on hover with Javascript it works, also when I hover over the next parent div that child div opens but when I go back to the first parent the second one stays open (on top) and doesn't fade-out.
What I would like is that the other child div('s) close when hovering to a new one. Maybe good to know is that I only want the other child div(s) to close when hovering to a new parent with a child div not when im just hovering out of the current parent.
Does anyone know the trick?
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
I found the solution when 'parent()' and 'children()' are not 'this'.
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
Sorry have just re-read your question and realised you wanted the menu to stay active. I've created a demonstration which does this by adding an .active class and toggling the submenus are you initially wanted using fadeIn and fadeOut. This will also allow you to attribute css styles to the dropdown if you would rather use that rather than jquery.
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
The second example I will leave up for others, it shows how to do a more traditional dropdown where it fades out once the hover leaves the parent. You can use the exit function as well as the entry function of hover, the first function you provide is ran on mouseenter and the second on mouseleave.
Jquery .hover()
EXAMPLE WITH PERSISTENT DROPDOWNS
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
EXAMPLE WITH TRADITIONAL DROPDOWNS
These collapse when the hovering over the parent ends.
// Hover function
$('li.menu-item-has-children').hover(
// Hover in function
function() {
$('ul.dropdown-menu-main', this).fadeIn('slow');
},
// Hover exit function
function() {
$('ul.dropdown-menu-main', this).fadeOut('slow');
}
);
ul,
ul li {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px !important;
}
ul.dropdown-menu-main {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background: black;
z-index: -1;
padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
How to use event .stopPropagation() (or something else) in the following situation.
I have a standard menu with submenu. In the submenu background, I have background image which I need to overlay adding pseuso-element (background:green) on the parent. Because with jquery I cant control css pseudo-elements (I need control opacity), I add another class to my parent.
Everything works as I need, but adding / removing the class on parent makes the image background blink.
jsfiddle
my site live (top menu is my problem)
HTML:
<ul class="top-menu">
<li>
link 1
<div class="submenu">
<ul>
<li>sublink 1</li>
<li>sublink 2</li>
<li>sublink 3</li>
<li>sublink 4</li>
<li>sublink 5</li>
</ul>
</div>
</li>
<li>link 2</li>
<li>link 3</li>
</ul>
jquery
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
var cover = $(".submenu");
cover.data('timer', setTimeout(function(){
cover.removeClass("myclass");
}, 2000)
);
e.stopPropagation();
});
css
*{
box-sizing:border-box;
}
ul.top-menu {
display:flex;
list-style:none;
text-transform:uppercase;
width:100%;
justify-content:center;
background:white;
position:relative;
}
ul.top-menu li a {
color:black;
padding:10px;
text-decoration:none;
display:block;
}
.submenu {
position:absolute;
background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg");
background-position:right top;
background-size:200px auto;
background-repeat:no-repeat;
width:100%;
top:100%;
left:0;
z-index:0;
}
.submenu:after {
content:"";
background:green;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
z-index:-1;
}
.submenu.myclass:after {
opacity:1;
}
.submenu ul {
list-style:none;
}
.submenu a {
color:white;
display:block;
}
have you tried this?
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
e.preventDefault();
$(".submenu").removeClass("myclass");
});
but adding / removing the class on parent makes the image background blink
This happens because on mouseover you add and add the class. Change from:
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
})
to:
$(".submenu a").mouseover(function(e){
if ($(".submenu.myclass").length == 0) {
$(".submenu").addClass("myclass");
}
})
The updated fiddle.
I successfully created this not so bad css-only dropdown. I'm trying to hide the .submenutwo so that it is only visible when .submenu is on hover. If we can do this with css only that would be nice. But if javascript or jQuery can help it's fine.
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2
</li>
<li>Option 2
</li>
<li>Option 2
</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
<li class='listOptionLvlThree'> Option 3
</li>
</ul>
</li>
<li>Green Grapes
</li>
<li>Red Grapes
</li>
</ul>
</li>
</ul>
</nav>
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
Here's how you can do it in css. Basically, what's happening here is. At first, you just need to hide .submenutwo. After the hover triggered, you just need to bring back the display to the default or even other display value will do.
may be this will help u
/* define a fixed width for the entire menu */
.navigation {
min-width: 300px;
}
.submenutwo {
display: none }
.submenu:hover .submenutwo {
display: initial }
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height:auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Apples
<ul class="submenu">
<li>Green Apples
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
</ul>
</li>
<li>Oranges
<ul class="submenu">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
<li>Grapes
<ul class="submenu">
<li>Purple Grapes
<ul class="submenutwo">
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
<li class='listOptionLvlThree'> Option 3</li>
</ul>
</li>
<li>Green Grapes</li>
<li>Red Grapes</li>
</ul>
</li>
</ul>
</nav>
Example:
I am in the "Contact" page. I want the "Contact" menu item to be at 100% opacity and the rest at 30% opacity.
I am in the "About" page. I want the "About" menu item to be at 100% opacity and the rest at 30% opacity.
My menu is this:
HTML:
<ul class="menu">
<li class="menu-item menu-item-1">Home</li>
<li class="menu-item menu-item-2 current-menu-item">Contact</li>
<li class="menu-item menu-item-3">About</li>
</ul>
CSS:
.menu .menu-item-1 {background: url('images/image1.jpg');}
.menu .menu-item-1 a {background: url('images/transparent-black-border-1.png') no-repeat; background-position: bottom;}
.menu .menu-item-2 {background: url('images/image2.jpg');}
.menu .menu-item-2 a {background: url('images/transparent-black-border-2.png') no-repeat; background-position: bottom;}
.menu .menu-item-3 {background: url('images/image3.jpg');}
.menu .menu-item-3 a {background: url('images/transparent-black-border-3.png') no-repeat; background-position: bottom;}
What I want:
When the .current-menu-item class appears, that menu item should be at 100 opacity and the others at 30%. Also the .menu .menu-item-1 background image should fade too, not only the a-tag.
Can you help me?
You can use the not() function..
JSFiddle
JS:
$(".menu-item").on('mouseenter', function(){
$(".menu-item").find('a').not($(this).find('a')).css('opacity','0.3')
}).on('mouseleave', function(){
$(".menu-item").find('a').css('opacity','1');
});
HTML:
<ul class="menu">
<li class="menu-item">Some text</li>
<li class="menu-item">Some text</li>
<li class="menu-item">Some text</li>
</ul>
Note: Having an anchor-tag inside an ul is a bad practice. There should be only li-tags inside an ul. Therefor I put the a-tag inside each list.
E: After your update you say you want to have the current page on opacity 1 all the time and the rest on 0.3. On hover you want the hovered li element to go on 1 as well.
Updated Fiddle
In your HTML markup you set the class active at each page for the desired menu-item. Give that class an opacity of 1 and the rest of the menu items an opacity of 0.3. On hover do not touch the active class but the others.
HTML:
<ul class="menu">
<li class="menu-item active">Home</li>
<li class="menu-item">Page1</li>
<li class="menu-item">Page2</li>
</ul>
CSS:
.menu-item {
opacity: 0.3;
}
.active {
opacity: 1;
}
JS:
$(".menu-item").on('mouseenter', function(){
$(this).not('.active').css('opacity','1')
}).on('mouseleave', function(){
$(this).not('.active').css('opacity','0.3');
});
To change the opacity you can do something like this:
$(".menu-item").hover(function(){
$(".menu-item").each(function(){
$(this).css("opacity", 0.8);
})
$(this).css("opacity", 1);
});
For easier selector, it would be better to change your HTML structure into this:
<ul class="menu">
<li class="menu-item menu-item-1">...</li> Some text
<li class="menu-item menu-item-2">...</li> Some text
<li class="menu-item menu-item-3">...</li> Some text
</ul>
For changing the image into B&W/grayscale you need to use HTML5 Canvas, and use this jQuery.BlackAndWhite..
I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File