Ik heb een DropDown menu gevonden op het internet.
Die gebruik ik ook en ik werk ermee.
Nou heb ik gemaakt dat als ik hover over de hoofd menu om zo te zeggen dat hij dan van kleur veranderd.
Maar zodra ik met mijn muis naar de dropdown ga, gaat hij naar wit, is er mogelijkheid dat hij in kleur blijft?
Ook als ik een border om het dropdown gedeelte doe dus wat er naar beneden kom. En ik ga weer weg verdwijnt hij niet 100% maar word hij gedeeltelijk doorzichtig gemaakt. Iemand oplossing voor beide problemen?
Javascript:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
CSS:
.menu {list-style:none; margin:0; padding:0}
.menu * {margin:0; padding:0}
.menu a {display:block; color:#000; text-decoration:none;}
.menu li {position:relative; float:left; padding-right:0px}
.menu ul {position:absolute; top:26px; left:0; background:white; display:none; opacity:0; list-style-type:none}
.menu ul li {position:relative; border-top:none; width:230px; margin:0}
.menu ul li a {display:block; padding:0px; background-color:white}
.menu ul li a:hover {background-color:white}
.menu ul ul {left:235px; top:-1px}
.menu .menulink { padding:5px 7px 7px; font-size: 9px; width:92px}
.menu .sub {background:white url(../../images/menu/arrow.gif) 220px 8px no-repeat}
.menu .submenu-block-item {
float: left;
position: relative;
display: inline;
width: 230px;
margin: 2px 0px 2px 6px;
padding-bottom: 2px;
background: url("../../images/stippellijn-horizontaal.gif") repeat-x bottom;
}
.menu .submenu-block-lastitem {
background: none;
margin: 2px 0px 0px 6px;
padding-bottom: 0px;
}
.menu .submenu-block-item > a {
padding: 2px 0px 2px 6px;
line-height: 27px;
}
/* Taal menu */
.menu #taal {
border: 3px red solid;
background-color: red;
color: white;
}
.menu #taal2:first-child:hover {
background-color: red;
}
.menu #taal2 {
border: 3px red solid;
}
/* Spraak menu */
.menu #spraak:hover {
border: 3px #71A0A4 solid;
background-color: #71A0A4;
color: white;
}
/* Stem menu */
.menu #stem {
border: 3px #BFA9A1 solid;
background-color: #BFA9A1;
color: white;
}
/* Gehoor menu */
.menu #gehoor {
border: 3px #9FC2C6 solid;
background-color: #9FC2C6;
color: white;
}
/* Slikken menu */
.menu #slikken {
border: 3px #686D8C solid;
background-color: #686D8C;
color: white;
}
/* Appwijzer menu */
.menu #appwijzer {
border: 3px #92AF5F solid;
background-color: #92AF5F;
color: white;
}
Menu:
<ul class="menu" id="menu">
<li><a href="javascript:pages('content/home/homepage.php', 'main');" class="menulink">HOME</a></li>
<li><a href="#" class="menulink" id="taal">TAAL</a>
<ul >
<li id="taal2">
<div class="submenu-block-item "><a href="#">VERTRAAGDE TAALONTWIKKELING</a></div>
<ul>
<div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=1', 'main');">FONOLOGIE</a></li></div>
<div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=2', 'main');">MORFOLOGIE</a></li></div>
<div class="submenu-block-item"><li><a href="javascript:pages('content/pages/main.php?pageid=3', 'main');">SYNTAXIS</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=4', 'main');">SEMANTIEK</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=5', 'main');">PRAGMATIEK</a></li></div>
</ul>
</li>
<div class="submenu-block-item "><a href="javascript:pages('content/pages/main.php?pageid=6', 'main');">DYSLEXIE</a></div>
<div class="submenu-block-item"><a href="javascript:pages('content/pages/main.php?pageid=7', 'main');">AFASIE</a></div>
<li>
<div class="submenu-block-item submenu-block-lastitem"><a href="#">LEESVOORWAARDEN</a></div>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=27', 'main');">FONOLOGISCH BEWUSTZIJN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=28', 'main');">FONEMISCH BEWUSTZIJN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=29', 'main');">LETTERKENNIS</a></li></div>
<li>
<div class="submenu-block-item submenu-block-lastitem"><a href="#">AUDITIEVE VAARDIGHEDEN</a></div>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=30', 'main');">AUDITIEVE CONCENTRATIE</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=31', 'main');">AUDITIEVE WERKGEHEUGEN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=32', 'main');">AUDITIEVE DISCRIMINATIE</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=33', 'main');">AUDITIEVE ANALYSE</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=34', 'main');">AUDITIEVE SYNTHESE</a></li></div>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="menulink" id="spraak">SPRAAK</a>
<ul>
<li>
<div class="submenu-block-item "><a href="#">VERTRAAGDE SPRAAKONTWIKKELING</a></div>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=9', 'main');">FONETIEK</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=10', 'main');">FONOLOGIE</a></li></div>
</ul>
</li>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=11', 'main');">VERBALE ONTWIKKELINGSDYSPRAXIE</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=12', 'main');">SLISSEN EN LISPELEN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=13', 'main');">AFWIJKENDE MONDGEWOONTEN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=14', 'main');">NASALITEITSSTOORNIS</a></li></div>
<li>
<div class="submenu-block-item "><a href="#">VLOEIENDHEIDSSTOORNISSEN</a></div>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=15', 'main');">STOTTEREN</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=16', 'main');">BRODDELEN</a></li></div>
</ul>
</li>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=17', 'main');">DYSARTRIE</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=18', 'main');">VERBALE APRAXIE</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=19', 'main');">AANGEZICHTSVERLAMMING</a></li></div>
</ul>
</li>
<li><a href="#" class="menulink" id="stem">STEM</a>
<ul>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=20', 'main');">STEMSTOORNISSEN</a></li></div>
</ul>
</li>
<li><a href="#" class="menulink" id="gehoor">GEHOOR</a>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=21', 'main');">AUDITIEVE VERWERKINGSPROBLEMEN</a></li></div>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=22', 'main');">GEHOORREVALIDATIE</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=23', 'main');">SLECHTHORENDHEID</a></li></div>
</ul>
</li>
<li><a href="#" class="menulink" id="slikken">SLIKKEN</a>
<ul>
<div class="submenu-block-item "><li><a href="javascript:pages('content/pages/main.php?pageid=24', 'main');">EET- EN DRINKSTOORNISSEN BIJ KINDEREN</a></li></div>
<div class="submenu-block-item submenu-block-lastitem"><li><a href="javascript:pages('content/pages/main.php?pageid=25', 'main');">DYSFAGIE</a></li></div>
</ul>
</li>
<li><a href="javascript:pages('content/apps/apps.php', 'main');" class="menulink" id="appwijzer">APPWIJZER</a></li>
<?php
if(isset($_SESSION['login'])){
?>
<li><a href="javascript:pages('content/mijn/logowall.php', 'main');" class="menulink">MIJN LOGOWALL</a></li>
<?php
}
?>
<li><a href="javascript:pages('content/forum/forum.php', 'main');" class="menulink">FORUM</a></li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
[size=xsmall]Toevoeging op 03/01/2015 20:26:47:[/size]
http://i59.tinypic.com/209pswm.png
Is een voorbeeld van wat ik bedoel, zonder border gaat hij helemaal weg.
