Please help, need to add delay on css menu mouse out. Tried different ways but no success. Is it possible to add some javascript code to existing menu?
Please check the jsFiddle example: http://jsfiddle.net/mZLFz/
<div id="nav">
<ul>
<li class="abt">About Us
<ul>
<li>Our style</li>
<li>Our mission</li>
</ul>
</li>
<li class="col">Collection
<ul>
<li class="col-a">2013
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li class="col-b">2014
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
<li class="buy">Good to know
<ul>
<li class="buy-a">Men
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li class="buy-b">Women
<ul>
<li>A</li>
</ul>
</li>
<li class="buy-c">Kids
<ul>
<li>A</li>
</ul>
</li>
</ul>
</li>
#nav{
height:40px;
overflow:hidden;
list-style:none;
}
#nav ul {list-style:none;}
#nav ul li {text-decoration: none;float:left;}
#nav ul li a {
text-transform:uppercase;
font-size:14px;
color:#bcbec0;
text-decoration: none;
padding:0 20px 3px 20px;
}
#nav ul li:hover > a{border-bottom: 2px solid #afb0bd;color:#383a49;}
/* 1 LEVEL DROP-DOWN MENU */
#nav ul li.abt ul {margin-left:-30px;}
#nav ul li.col ul {margin-left:-100px;}
#nav ul li.buy ul { margin-left: -213px;}
#nav ul li.buy ul li {margin-left: 30px;}
#nav ul li ul { display:none;}
#nav ul li:hover > ul {width:100%;display:block; position:absolute; top:48px;background:#e7e8e9;}
#nav ul li:hover > ul li{ float:left;padding:10px 0 5px 0;list-style:none;}
#nav ul li:hover > ul li a {}
#nav ul li:hover > ul li a:hover {}
/* 2 LEVEL DROP-DOWN MENU */
#nav ul li ul li.col-a ul { margin-left:-50px;top:35px;}
#nav ul li ul li.col-b ul { margin-left:-100px;top:35px;}
#nav ul li ul li.buy-a ul { margin-left:-30px;top:35px;}
#nav ul li ul li.buy-b ul { margin-left:-160px;top:35px;}
#nav ul li ul li.buy-c ul { margin-left:-30px;top:35px;}
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul {width:980px; display:block; position:absolute;background:#f1f1f2;}
#nav ul li > ul li:hover ul li {float:left;padding-top:10px; list-style:none; }
#nav ul li > ul li:hover ul li a {}
#nav ul li > ul li:hover ul li a:hover { }
You can change some :hover to .hover and add some jQuery like this?
$('li').hover(
function(){
var x = this;
setTimeout(
function(){
$(x).addClass('hover')
}, 800
)
},
function(){
$(this).removeClass('hover')
}
)
Related
Below is a drop-down list nested in a drop-down list. the first code snippet works just fine; as I hover over the parent of the first drop-down list it's height transitions and it displays as I intended, as with the subsequent nested drop-down list.
The problem is with the second snippet...
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
/*
ul li li:hover {
transform: scale(1.1);
}
*/
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Here I make one change at the very bottom of the CSS as I wanted the hover effect to be just a bit more pronounced. I apply a transform scale effect to the dropdown list's li's.
The first drop-down list works just fine, but then the second drop-down list does not.
Can someone please explain what is happening?
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
ul li li:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Fixed.
I don't understand why the problem occurred in the first place, nor do i understand why the fix I found works but it does.
I simply made the overflow property 'visible' in the (ul li li:hover ) and it works.
I am having problems getting the sub menu on my nav bar to display correctly - hovering doesn't seem to be over the correct link ("media") but in between, and the dropdown displays off to the right and not under "media" link.
Any suggestions gratefully received.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li><a>Media</a>
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li>More Info</li>
</ul>
</nav>
css here:
nav ul {
background-color: black;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
}
nav ul ul li {
display: block;
}
Include the whole sublist ul inside the A tag, instead of after it. That means you need to adjust the nav ul li:hover > ul line as well (you can drop the > if you don't require further levels)
I had everything working fine, then I was cleaning up css and moved some stuff around. Ilost my horizontal menu bar, it all went vertical:$
Ive been tweeking and searched the site for hours and still no luck. Might be a simple error in my code. I am pretty sure its something in css.
Would prefer not to have to use float....
Thanks for your assistance....
I might have a bit more code than need. this is where is got it
http://www.youtube.com/watch?v=PN1iMaVfzfQ
Website:
http://www.enhancedliving.ca/
CSS:
#menu_Box{ /*MENU BOX CONTAINER*/
width: 890px;
height: 100%;
margin: 0 auto;
padding-left: 10px;
}
#menu_Box ul{ /*MENU BOX STYLE*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0 0 0 10px;
margin:0;
position:relative;
}
.extraStyle{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0;
margin:0;
}
#menu_Box ul li{
display:inline-block;
}
#menu_Box ul li:hover{
color:#456692;
}
#menu_Box ul li a,visited{
text-align:left;
color:#263A75;
display:block;
padding: 0 0 0 0; /*Padding between titles*/
text-decoration:none;
}
#menu_Box ul li a:hover{
color:#456692;
text-decoration:none;
}
#menu_Box ul li:hover ul{
display:block;
}
/* ############### DROP DOWN MENU BOX ################ */
#menu_Box ul ul{ /*Drop Down Box*/
border: 3px solid rgba(0, 57, 96, .85) ;
display:none;
position:absolute;
background-color: rgba(139, 183, 212, .9);
padding: 3px; /*Padding between list items*/
}
#menu_Box ul ul li{ /*Drop Down Style*/
display: block;
}
#menu_Box ul ul li a,visited{
color:#263A75;
}
#menu_Box ul ul li a:hover{
color:#456692;
}
HTML:
<ul>
<li>Services
<ul>
<li>Psych-K </li>
<li>Food & Environmental Allergy and Sensitivity Testing </li>
<li>Supplement and Nutrition Evaluation </li>
<li>Food Value Testing </li>
</ul>
</li> <p class="extraStyle">::</p>
<li>Sessions </li> <p class="extraStyle">::</p>
<li>Biography </li> <p class="extraStyle">::</p>
<li>Health Topics </li><p class="extraStyle">::</p>
<li>Favorite Products </li><p class="extraStyle">::</p>
<li>Contact </li>
</ul>
Change the
<p class="extraStyle">::</p>
Into
<span class="extraStyle">::</span>
I want to add a drop down menu in "about us" tab in main menu, I tried hard but its not showing,
Here is the html code for the lists,
<li>
About Us
<ul class="sub-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
and here is my css for the drop down menu I have created:
#menu ul li{float:none}
#menu ul li a{background:none !important;}
#menu ul li a:hover{background:url(../images/menu_active.gif) top repeat-x !important;display:block}
#menu ul{border:solid 1px #FC0;position: absolute;z-index: 100;background: #000;width:300px;display:none}
In this fiddle is a working version of your code:
Jsfiddle
Explanation:
You are not selecting the write <ul> in your css
#menu ul li:hover ul{background:url(../images/menu_active.gif) top repeat-x !important;display:block;}
#menu ul li ul{border:solid 1px #FC0;z-index:999;background: #000;width:300px;display:none;}
Check for the full code the JSFiddle
If you want to select a <li> of a <ul> in a <ul>or<li> Use this in your css.
ul li ul li {}
This is an example for dropdown in pure css.
.sub-menu { display: none; }
.menu:hover + .sub-menu { display: block; }
http://jsfiddle.net/greatghoul/TDA62/
Basically the navigation bar on my page is aligned to right hand side of the page with the logo on its left. Because of this when the drop down for the far right item appears, it drifts off the right side of the page and looks messy. Especially as it's using an aplha background.
Anyway, here is my code at the moment..
HTML:
<ul class="Nav2">
<li>
Category 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 4
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 5
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
CSS:
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2 li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
text-align:center;
text-decoration:none;
opacity:0.6;
padding:0px 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
Basically this is how I WANT it to look....
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
Rather than...
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
(It's actually pushed to the right slightly but not centered to the parent <ul> <li>)
The width MUST be set to auto because of the huge range in widths between the text that is gunna be stored in the navigation bar. Some are about 100px and some are nearly 300px
Here's the fixed CSS. Removed and added styles are commented.
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2>li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
/*removed
text-align:center;
*/
text-decoration:none;
opacity:0.6;
padding:0px 10px;
;
;
;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
float:right
/*added*/
display:block;
padding:0;
min-width:9.3ex;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
EDIT: Updated CSS based on new restriction.