Duration van een pulldownmenu verhogen
Op deze link (http://taheri.nl/menu/) heb ik een pulldown menu.
alleen als je over de menu gaat en je een sub- submenu wilt aanklikken en je gaat eventjes met je muis buiten de menu staan is hij weg, moet je weer opnieuw van boven beginnen, om bij je submenu te komen.
Mijn vraag is hoe kan ik een timing aan hem geven?
Hoe kan ik een fade in/uit aan toevoegen.
Alvast bedankt voor jullie hulp
Kan niemand me helpen??
want je geeft geen relevante code en ik heb hier geen glazen bol
Mocht je nog wat nodig hebben, hoor ik het graag van je..
dropdown.css
Quote:
@charset "UTF-8";
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Default.ultimate.css
Quote:
@charset "UTF-8";
@import "default.css";
/*-------------------------------------------------/
* @section Base Style Extension
*/
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 7px 10px;
}
/*-------------------------------------------------/
* @section Base Style Override
*/
ul.dropdown li {
padding: 0;
border: none;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 8px;
}
/*-------------------------------------------------/
* @section Base Style Reinitiate: post-override activities
*/
/*-------------------------------------------------/
* @section Custom Styles
*/
ul.dropdown li {
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background: url(images/grad2.png) 0 100% repeat-x;
color: #000;
}
ul.dropdown li a:active {
background: url(images/grad1.png) repeat-x;
}
/* Non-first level */
ul.dropdown ul {
margin-top: 0;
}
ul.dropdown ul li {
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
}
/*-------------------------------------------------/
* @section Support Class `open` Usage
* @source js, artificial
*
*/
ul.dropdown li.hover *.open {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ffa500 #d9d9d9 #d9d9d9;
background-color: #fff;
color: #000;
}
ul.dropdown ul li.hover *.open,
ul.dropdown-vertical li.hover *.open {
padding-left: 15px;
border-top-color: #fff;
border-left: solid 1px #ffa500;
}
ul.dropdown-vertical-rtl li.hover *.open {
padding-right: 15px;
border-right-color: #ffa500;
border-left: none;
}
ul.dropdown-upward li.hover *.open {
border-top-color: #fff;
border-bottom-color: #ffa500;
}
ul.dropdown-upward ul li.hover *.open {
border-bottom-color: #d9d9d9;
}
/* CSS2 clone */
ul.dropdown li:hover > *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ffa500 #d9d9d9 #d9d9d9;
background-color: #fff;
color: #000;
}
ul.dropdown ul li:hover > *.dir,
ul.dropdown-vertical li:hover > *.dir {
padding-left: 15px;
border-top-color: #fff;
border-left: solid 1px #ffa500;
}
ul.dropdown-vertical-rtl li:hover > *.dir {
padding-right: 15px;
border-right-color: #ffa500;
border-left: none;
}
ul.dropdown-upward li:hover > *.dir {
border-top-color: #fff;
border-bottom-color: #ffa500;
}
ul.dropdown-upward ul li:hover > *.dir {
border-bottom-color: #d9d9d9;
}
@import "default.css";
/*-------------------------------------------------/
* @section Base Style Extension
*/
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 7px 10px;
}
/*-------------------------------------------------/
* @section Base Style Override
*/
ul.dropdown li {
padding: 0;
border: none;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 8px;
}
/*-------------------------------------------------/
* @section Base Style Reinitiate: post-override activities
*/
/*-------------------------------------------------/
* @section Custom Styles
*/
ul.dropdown li {
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background: url(images/grad2.png) 0 100% repeat-x;
color: #000;
}
ul.dropdown li a:active {
background: url(images/grad1.png) repeat-x;
}
/* Non-first level */
ul.dropdown ul {
margin-top: 0;
}
ul.dropdown ul li {
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
}
/*-------------------------------------------------/
* @section Support Class `open` Usage
* @source js, artificial
*
*/
ul.dropdown li.hover *.open {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ffa500 #d9d9d9 #d9d9d9;
background-color: #fff;
color: #000;
}
ul.dropdown ul li.hover *.open,
ul.dropdown-vertical li.hover *.open {
padding-left: 15px;
border-top-color: #fff;
border-left: solid 1px #ffa500;
}
ul.dropdown-vertical-rtl li.hover *.open {
padding-right: 15px;
border-right-color: #ffa500;
border-left: none;
}
ul.dropdown-upward li.hover *.open {
border-top-color: #fff;
border-bottom-color: #ffa500;
}
ul.dropdown-upward ul li.hover *.open {
border-bottom-color: #d9d9d9;
}
/* CSS2 clone */
ul.dropdown li:hover > *.dir {
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #ffa500 #d9d9d9 #d9d9d9;
background-color: #fff;
color: #000;
}
ul.dropdown ul li:hover > *.dir,
ul.dropdown-vertical li:hover > *.dir {
padding-left: 15px;
border-top-color: #fff;
border-left: solid 1px #ffa500;
}
ul.dropdown-vertical-rtl li:hover > *.dir {
padding-right: 15px;
border-right-color: #ffa500;
border-left: none;
}
ul.dropdown-upward li:hover > *.dir {
border-top-color: #fff;
border-bottom-color: #ffa500;
}
ul.dropdown-upward ul li:hover > *.dir {
border-bottom-color: #d9d9d9;
}
Toevoeging op 05/07/2011 14:20:35:
Oh die van default.css was ik vergeten.
Quote:
@charset "UTF-8";
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #eee;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.dropdown ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
Plaats code tussen code tags, niet tussen quote tags.
Je zult dit met javascript moeten oplossen. Kijk eens naar jquery en jquery ui.
Is er geen andere methode/hulp hiervoor?
Nee, alleen met javascript, jquery voorbeeldje $(selector).fadeIn(speed,callback)
Nee dit zul je met JavaScript moeten oplossen. Zodra je zoekt op JavaScript DropDown menu krijg je veel resultaten. Als je zoekt op jQuery DropDown menu krijg je veel resultaten en als je zoekt op MooTools DropDown menu krijg je ook veel resultaten.
Ik heb de volgende script gebruikt. hij blijft wel eventjes staan, maar hij verplaats zich naar links, als ik mijn muis van de menu weg haal.
Waarom doet die dat?
Zie link: http://taheri.nl/menu
Quote:
<script type="text/javascript">
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function nav_open()
{ nav_canceltimer();
nav_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function nav_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function nav_timer()
{ closetimer = window.setTimeout(nav_close, timeout);}
function nav_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#nav > li').bind('mouseover', nav_open);
$('#nav > li').bind('mouseout', nav_timer);});
document.onclick = nav_close;
</script>
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function nav_open()
{ nav_canceltimer();
nav_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function nav_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function nav_timer()
{ closetimer = window.setTimeout(nav_close, timeout);}
function nav_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#nav > li').bind('mouseover', nav_open);
$('#nav > li').bind('mouseout', nav_timer);});
document.onclick = nav_close;
</script>
Kan iemand me a.u.b vertellen waarom hij die sprong maakt??