Duration van een pulldownmenu verhogen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Perziah taheri

perziah taheri

01/07/2011 11:15:47
Quote Anchor link
Beste,

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
 
PHP hulp

PHP hulp

29/03/2024 09:23:21
 
Perziah taheri

perziah taheri

05/07/2011 14:06:03
Quote Anchor link
Kan niemand me helpen??
 
Maikel  B

Maikel B

05/07/2011 14:12:22
Quote Anchor link
nee, dat kan niet














want je geeft geen relevante code en ik heb hier geen glazen bol
 
Perziah taheri

perziah taheri

05/07/2011 14:19:16
Quote Anchor link
OK, Hierbij de codes:
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;
}




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;
}


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%;
}
 

05/07/2011 15:21:43
Quote Anchor link
Plaatst alleen relevante code. Die CSS is niet relevant.
Plaats code tussen code tags, niet tussen quote tags.
Je zult dit met javascript moeten oplossen. Kijk eens naar jquery en jquery ui.
 
Perziah taheri

perziah taheri

05/07/2011 15:28:19
Quote Anchor link
Ik ben niet zo thuis met javascript.
Is er geen andere methode/hulp hiervoor?
 

05/07/2011 18:45:10
Quote Anchor link
Nee, alleen met javascript, jquery voorbeeldje $(selector).fadeIn(speed,callback)
 
Wouter J

Wouter J

05/07/2011 18:54:41
Quote Anchor link
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.
 
Perziah taheri

perziah taheri

06/07/2011 09:58:25
Quote Anchor link
Bedankt voor jullie tips.
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>
 
Perziah taheri

perziah taheri

08/07/2011 10:17:39
Quote Anchor link
Kan iemand me a.u.b vertellen waarom hij die sprong maakt??
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.