I am coding a multilevel drop down menu in which when the parent is hovered, the submenu drops down with JQuery fadeIn(). But the effect is getting propagated to the child elements. They are also having fadeIn() when hovered on. The code is
HTML
<nav>
<ul id="headnav">
<li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
<li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
<li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a>
<ul>
<li> Papers </li>
<li> Articles </li>
<li> PhD Students </li>
<li> Presentations </li>
</ul>
</li>
</ul>
</nav>
JQuery
$(document).ready(function() {
$('nav > ul > li > ul').hide();
$('nav > ul > li').hover(function() {
$(this).find('ul').fadeIn(400);
},function() {
$(this).find('ul').fadeOut(400);
});
});
CSS
nav {
position: absolute;
min-width:30%;
float:right;
right:12%;
top: 16%;
}
nav ul li {
display: inline-block;
min-width: 20px;
text-transform: uppercase;
}
nav ul li a{
float: left;
padding: 0px 10px 0px 10px;
}
nav ul li ul {
display: inline-block;
position: absolute;
width: auto;
margin-left:-35%;
margin-top:7%;
}
nav ul li ul li {
display: inline-block;
min-width:10px;
}
nav ul li ul li a {
color:#7f8c8d;
}
When you hover your mouse over the child elements, they again fadeIn(). I tried e.stopPropagation() and e.preventDefault() but none of them are working.
Please help
Show the submenu on hovering over the outer li, but hide it on leaving the inner ul:
$('nav > ul > li').mouseenter(function(e) {
$(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
$(this).fadeOut(400);
});
http://jsfiddle.net/mava7btt/3/
Related
i refer to this thread: JS using onclick event on li to display block
From desktop is ok but how do i do the same thing but that from the mobile you can touch the "disappearing" menu and make sure that it remains visible until the next touch?
I'm currently using this code here:
function dropdown() {
document.getElementById("Menuitems").style.display = "block";
}
#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul {
/*this is what the onclick event should do*/
display: block;
}
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
I just added an active class onclick .. the active class toggles on every click. and just add the same hover effect to active class
function dropdown() {
document.getElementById("Menuitems").classList.toggle("active");
}
#dropdown ul {
display: block;
transition-duration: 1s;
}
#dropdown ul li {
display: block;
background-color: #212121;
color: #ffffff;
}
#dropdown ul li ul {
display: none;
}
#dropdown ul li:hover>ul,
#dropdown ul li>ul.active{
/*this is what the onclick event should do*/
display: block;
}
<div id="dropdown">
<ul>
<li onclick="dropdown()"><a>Menu</a>
<ul id="Menuitems">
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</li>
</ul>
</div>
I have display drop down menu slider effect from bottom to top after hover with linearly and all drop down text should be display left align.
I tried some code but when i hovered first menu my second menu displaying on right side.would you help me in this?
HTML
<div class="right-menu-bar">
<ul class="main-menu">
<li>Menu
<ul>
<li>menu1 details</li>
<li>menu1 details</li>
<li>menu1 details</li>
</ul>
</li>
<li>Menu
<ul>
<li>menu1 details</li>
<li>menu1 details</li>
<li>menu1 details</li>
</ul>
</li>
</ul>
</div>
CSS
.right-menu-bar ul.main-menu > li
{
float: left;
margin: 15px;
font-size: 16px;
}
li ul
{
list-style: none;
background: #3498db;
z-index: 2;
font-size: 16px;
padding:0 ;
}
li ul li
{
text-transform: capitalize;
}
.main-menu li > ul {
display:none;
}
.main-menu li:hover > ul {
display:block;
}
li ul li a{
text-decoration: none;
color: #fff;
padding: 10px 50px;
display:block;
text-align: left !important;
}
li ul li a:hover{
background-color:#5dade2;
text-decoration: none;
color: #000;
}
I thought your problem is stop the second menu slide to right when hover the 1st menu. so adding the position:absolute property to dropdown menu to avoid the second menu sliding.
Now I am adding sideDown() and slideUp() to show or hide the dropdown on menu hover Try below code.
//Hide and Show The Sub Menus
$(".jquery-test ul li.menu-list").hover(function(){
$(this).find('ul').stop().slideDown();
},function(){
$(this).find('ul').stop(true,true).slideUp();
});
.jquery-test ul.menu li.menu-list{display:inline-block;padding-right:20px;}
.jquery-test ul{list-style:none;padding-left:10px;}
.jquery-test ul.menu li.menu-list ul.submenu {display:none;}
.jquery-test ul.menu li.menu-list ul.submenu{position:absolute;}
.jquery-test ul.menu li.menu-list ul.submenu li{position:relative;left:0px;}
.jquery-test ul li a{text-decoration:none;color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="jquery-test">
<ul class="menu">
<li class="menu-list">Menu1
<ul class="submenu">
<li>Menu1.0</li>
<li>Menu1.1</li>
<li>Menu1.2</li>
<li>Menu1.3</li>
</ul>
</li>
<li class="menu-list">Menu2
<ul class="submenu">
<li>Menu2.1</li>
<li>Menu2.2</li>
<li>Menu2.3</li>
<li>Menu2.4</li>
</ul>
</li>
<li class="menu-list">Menu3
<ul class="submenu">
<li>Menu3.0</li>
<li>Menu3.1</li>
<li>Menu3.2</li>
<li>Menu3.3</li>
</ul>
</li>
</ul>
You can do this by applying position: absolute; to the menus that appear, like this:
.main-menu li:hover > ul {
display:block;
position: absolute;
}
Working Fiddle
I have code that makes my menu expand when the parent li is hovered over. I want to change it so that it only expands when it is clicked.
My code in CSS is:
.nav li:hover li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
How do I make this happen only when the parent is clicked?
My HTML:
<ul class="nav">
<li class="dropdown" id="dropdownparent">
Categories
<ul id="dropdown">
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
</ul>
</li>
</ul>
Here is the live page I am using to test this... http://portal.electrovision.co.uk/dropdown-test/
A slight css tweak
.nav li.open li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
And some javascript (jQuery)
$('.nav > li.dropdown').on('click', function(e) {
$(this).toggleClass('open');
});
So I have tried to setup a responsive menu using the code here
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html
The problem I'm having is that the js seems to only activate when I resize the browser otherwise the larger version does not show the sub menu li when hovering and the smaller version has the li showing without clicking them first.
JS
var ww = '100%';
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
HTML
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals</li>
<li>Sneakers</li>
<li>Wedges</li>
<li>Heels</li>
<li>Loafers</li>
<li>Flats</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Loafers</li>
<li>Sneakers</li>
<li>Formal</li>
</ul>
</li>
</ul>
</li>
<li>
Shirts
<ul>
<li>
Mens
<ul>
<li>T-Shirts</li>
<li>Dress Shirts</li>
<li>Tank Tops</li>
</ul>
</li>
<li>
Womens
<ul>
<li>T-Shirts</li>
<li>Blouses</li>
<li>Dress Shirts</li>
<li>Tunics</li>
<li>Camisoles</li>
</ul>
</li>
</ul>
</li>
<li>
Pants
<ul>
<li>
Mens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
<li>Leggings</li>
</ul>
</li>
</ul>
</li>
<li>
Skirts
<ul>
<li>
Long
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Short
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Mini
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
</ul>
</li>
<li>
Dresses
<ul>
<li>
Casual
</li>
<li>
Formal
<ul>
<li>Wedding</li>
<li>Party</li>
</ul>
</li>
</ul>
</li>
<li>
Sweaters
<ul>
<li>
Mens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
</ul>
</li>
<li>
Accessories
<ul>
<li>
Womens
<ul>
<li>Belts</li>
<li>Bags</li>
<li>Jewelery</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Belts</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
</ul>
</li>
<li>
Outerwear
<ul>
<li>
Womens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>
The initial value of ww is '100%', which is a string.
On $(document).ready you call the adjustMenu() method, which reads the value of ww.
Both conditions (ww < 768 and ww >= 768) evaluate to false, so adjustMenu() does nothing on DOMready.
You can avoid this to call $(window).trigger('resize') instead of calling adjustMenu() in your $(document).ready(function() { ... } method so that ww has a numeric value:
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
$(window).trigger('resize');
});
I'm looking to have an additional subnav to this accordion menu. I tried to add a child element to the nav ul li, but that didn't seem to work. Ideally, I would like to be able to list web projects under "web" and print under "print".
FIDDLE: http://jsfiddle.net/schermerb/rGMAu/1/
.header button {
cursor:pointer;
float:right;
padding:5px;
margin:10px 10px;
border:none;
border:1px solid #ececec;
background:#444;
color:#ececec;
}
.nav {
text-align:center;
background:#444;
}
.nav ul li {
text-transform:capitalize;
display:block;
border-bottom:1px solid #ececec;
}
.nav a {
display:block;
padding:10px;
color:#ececec;
}
.nav a:hover {
background:#029b9d;
color:#ececec;
}
<button id="show">Menu <span>+</span> <span style="display:none;">-</span>
</button>
<div class="clear"></div>
</div>
<div class="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Web
</li>
<li>Print
</li>
</ul>
</div>
I have updated your js
$('.nav, .nav li ul').hide();
$('#show').click(function () {
$(".nav").toggle();
$("span").toggle();
});
$('.nav li').click(function(){
$(this).children('ul').toggle();
});
Updated jsFiddle File
Adding a child element was the right path.
http://jsfiddle.net/jonigiuro/rGMAu/2/
<li>Web
<ul class="sub">
<li class="item">item1</li>
<li class="item">item2</li>
</ul>
</li>
You hide the child element by default, and when you hover on the parent, you show the it:
ul li:hover ul
Here's the revelant css for your case:
.nav ul li ul {
color: red;
margin: 0;
padding: 0;
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li ul li {
padding: 10px 0;
}