Submenu with jquery is not working as it should - javascript

My process:
I´m using jQuery for the hover effect, when I hover the mouse in list item I want to find for a submenu and then I use the fadeToggle effect.
Its like, When I hover my mouse it will look for children list items and if its displayed it will hide if its hidden it will display.
And I use the stop method to avoid some strange effects if people pass very fast over the menu over and over again.
My issue:
I think I thought correctly but unfortunately I´m having a issue.
The submenu items are appear behind other elements, behind the #banner-container, so the submenu items are not visible.
I have tried to play with the positions, but so far without success, does anyone know how to solve this problem?
My jsfiddle where you can see my problem:
http://jsfiddle.net/jcak/9EcnL/6/
html:
<nav id="menu">
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Procuts
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
jQuery:
$('li').hover(function(){
$(this).find('ul>li').stop().fadeToggle(300);
});
CSS:
#menu ul li ul li {display:none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
float:left;
height:46px;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}

You probably want something like this, right?
http://jsfiddle.net/9EcnL/3/
Your javascript was fine, you just forgot to add in the jQuery library in the jsfiddle options. I put in some CSS to make it so that the submenus displayed a little better.
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}

Related

Show submenu with css

this is my menu. I would like to show the submenu (in the last item) when I pass the mouse over the last item. I'm trying to do it with css only but it doesn't work. this is the code
#submenu {
display: block;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav>
Is it possibile to show/hide the submenu when I mouseover/mousout on the last nav item?
This is how you can do this:
nav a.last:hover+#submenu { display:block;}
Complete running example:
#submenu {
display: none;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
nav a.last:hover+#submenu { display:block;}
<nav>
First item
Second item
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</a>
</nav
<a> can't be nested inside another <a>. You html should be like following.
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
and css should be
nav .last:hover + #submenu {
display: block;
}
#submenu { display:block; position:absolute;float:right;right:26px;background-color:#f1f3f5;width:21%;}
#submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right;}
#submenu li:first-child { padding-top: 10px;}
#submenu li:last-child { border-bottom: none;}
#submenu li a {border-right: 0 !important;padding:5px 2px 0 0;}
#submenu { display:none;}
nav .parent:hover #submenu { display:block;}
<html>
<nav>
First item
Second item
<span class="parent">
Third item
<ul id="submenu">
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</span>
</nav>
</html>

Most efficient way to create a slide-down submenu in jQuery

I am trying to make a submenu which slides down from the main menu bar when hovering over a certain element. I am currently doing this using the following code:
$(document).ready( function() {
$('.navlist li a').hover( function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
$('#subnavbar-' + $(this).attr( 'data-slug' )).slideDown( 200 );
}
}, function() {
if( $(this).attr( 'data-param' ) == "parent" )
{
var name = '#subnavbar-' + $(this).attr( 'data-slug' );
setTimeout( function() {
if( !$(name).is(':hover') )
{
$(name).slideUp( 200 );
}
}, 200 );
}
});
});
a {
color: white;
}
.navbar {
background-color: green;
margin-bottom: 0;
height: 30px;
}
ul.navlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.navlist li {
display: block;
width: 100px;
float: left;
}
.subnavbar {
background-color: blue;
margin-top: 0;
height: 20px;
display: none;
}
ul.subnavlist {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
float: left;
}
ul.subnavlist li {
display: block;
width: 80px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
As you can see by running the snippet; it works, but there are lots of bugs that I'm not sure what the best way to iron out are. Firstly, if the user hovers back and forth over the main menu item I don't want the event to be spammed, I could solve this problem using a setTimeout() and clearTimeout() but I'd like a better way if at all possible. Secondly, I'm not sure how best to get the subnavbar not to retract if the user has hovered over it instead of the parent menu item, how I'm doing it at the moment works, but then if the user hovers off, the navbar doesn't retract.
The efficient solution would be using just CSS. Absolutely no JQUERY required! Try this Fiddle.
HTML:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3
<ul>
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</nav>
CSS Code:
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
display: inline-table;
list-style: outside none none;
padding: 0 10px;
position: relative;
}
nav ul::after {
clear: both;
content: "";
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
color: #757575;
display: block;
padding: 15px 20px;
text-decoration: none;
}
nav ul ul {
background: none repeat scroll 0 0 #5f6975;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
border-bottom: 1px solid #575f6a;
border-top: 1px solid #6b727c;
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
padding: 5px 10px;
}
nav ul ul li a:hover {
background: none repeat scroll 0 0 #4b545f;
}
nav ul ul ul {
left: 100%;
position: absolute;
top: 0;
}
as you told me better css I've made a quick fiddle for you.
Of course you need to polish the style but the "working" is there.
css just:
.container {
height:30px;
background-color:green;
color:#fff;
}
.container > ul {position:relative;}
.container > ul li {
display:inline-block;
margin-right:30px;
}
.container > ul >li > ul {
position:absolute;
left:0;
background-color:blue;
top:0px;
z-index:-1;
}
.container > ul > li:hover > ul {
top:30px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
edited: I change the aproach and insteed of makign the transition with height I've use just top. check it out
to solve your first issue I would recommend using the jQuery plugin Hover Intent. Like the name suggests, this provides an easy way to determine if the user intends to hover over the element and avoids the possibility of spamming the animation by quickly hovering in and out of the element multiple times.
To solve your second issue, if possible, you can add a containing element around both navbar and subnavbar and use that to close the subnavbar when you leave the containing element, if the subnavbar happens to be visible.
HTML:
<div id="containing_element">
<div class="navbar">
<ul class="navlist">
<li>Item 1</li>
<li>Hover Here</li>
<li>Item 3</li>
</ul>
</div>
<div class="subnavbar" id="subnavbar-test">
<ul class="subnavlist">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</div>
jQuery:
$(document).ready( function() {
function hoverEnter() {
$('#subnavbar-test').slideDown(200);
}
$('#hoverlink').hoverIntent( hoverEnter );
$('#containing_element').mouseleave(function () {
if($('#subnavbar-test').is(':visible')) {
$('#subnavbar-test').slideUp(200);
}
});
});
Remember to include the script for hover intent as well.

How do I create a wordpress navigation menu which changes the background image on hover?

I saw this website and I like the navigation of the website
ref: http://www.visitvirginiabeach.com
When you hover the mouse over each menu the big picture will change.
I have tried integrate the jQuery with the class but it didn't work at all.
$(".nav-item1").hover(function){
$(".bg-nav").css('background','url('images/bg2.jpg')');
}
Is there any plugin or some advanced jQuery coding that can make this happen?
Any answer is appreciated.
Thank you.
body {
font-family: verdana,arial,sans-serif;
font-size: 20px;
}
#nav,#nav ul{
line-height: 50px;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
a{
background-color: #B7AF0E;
border: 1px solid #B7AF0E;
color: #FFFFFF;
display: block;
padding: 0 5px 0 10px;
text-decoration: none;
}
a:hover{
background-color:#F8EBA5;
color:#77885B;
}
#nav li{ float: left;
position: relative;
}
#nav ul {
position:absolute;
display:none;
}
#nav ul li a {
width: 140px;
float: left;
height: auto;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:6em;
margin:0px 0 0 35px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
</style>
<script>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
</script>`<body>
<ul id="nav">
<li>Home</li>
<li>Testimonials</li>
<li>Gallery
<ul>
<li>Gallery 1
<ul>
<li>Gallery 1.1</li>
<li>Gallery 1.2</li>
</ul>
</li>
<li>Gallery 2
<ul>
<li>Gallery 2.2</li>
<li>Gallery 2.2</li>
</ul>
</li>
<li>Gallery 3</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>PHP
<ul>
<li><a href="#">Wordpress</li>
<li><a href="#">Magento</li>
</ul>
</li>
<li>ASP.NET
<ul>
<li>Project 1</li>
<li>project 2</li>
</ul>
</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</body>`

how to center dropdown menu when position is absolute for dropdown menu

my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.
hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>
your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}

sIFR slector for li:hover effect

I have a menu
<div id="nav">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>What We Do</span>
<ul id="sideNav">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li><span>Studies</span></li>
</ul>
</div>
I am trying to create a pop out menu the CSS that does this is:
#nav ul{
padding: 0;
margin: 0;
}
#nav ul li{
list-style: none;
font-size: 16px;
width:170px;
padding:0px 0px 10px 0px;
}
#nav ul li ul li{
font-size: 13px;
}
#nav ul li ul{
display: none;
}
.showMenu, #nav ul li:hover ul{
width:220px;
padding:7px;
background: #F2F2F2;
border:1px solid #F2F2F2;
display: block;
position: absolute;
left: 85px;
top: 30px;
}
#nav ul li ul li{
padding:2px 0px 2px 0px;
}
I am tring to replace the items within both lists but they have different stlyes. I can replace the top level elements easy enough but its the pop out menu that I can not replace the links on.
my SIFR code:
sIFR.replace(futura, {
selector: '#nav ul li span',
css: ['.sIFR-root {}a{ color:#639463;text-decoration:none; font-size: 16px; font-weight:bold;} a:hover{color:#83C000;text-decoration:underline;}'],
wmode: 'transparent'
});
I think part of your problem is that sIFR needs displaying elements to act on.
If you can't use #font styles, I can telly ou that I've successfully used Cufon in this way on a small job, as seen here: http://www.reneworganicbeauty.com/
It's still a bit finicky, and colour changes take a bit of fiddling, but at least it works ok in menus.

Categories