JAVA Drop down menu [Active div]

Status
Niet open voor verdere reacties.

killer4all2

Gebruiker
Lid geworden
26 mei 2009
Berichten
449
Goede dag,

Op het moment ben ik bezig met een drop down menu voor website. Ik heb tot nu toe het volgende:

1308019490-550.png


HTML:
<ul id="sddm">
<li>
<a href="#" style="padding: 13px 14px 0px 15px;">Home</a>
</li>
<li>
<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">COMMUNITY</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">NEWS</a>
<a href="#">DHTML Menu</a>
<a href="#">MEDIA</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SERVERS</a></li>
<li><a href="#">MEDIA</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div style="clear:both"></div>

[JS]
// Copyright 2006-2007 javascript-array.com

var timeout = 0;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
[/JS]

Code:
#sddm
{	
	margin: 0px 0px 0px 0px;
	padding: 0;
}

#sddm li
{	
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 12px arial;
	text-transform:uppercase;
}

#sddm li a
{	
	display: block;
	margin: 4px 0px 0px 0px;
	padding: 13px 13px 0px 13px;
	width: 140px;
	height:28px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover
{	
	background:#111;
	color:#ffaa00;
}

#sddm div
{	
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #111;
}

#sddm div a
{	
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #111;
	color: #FFF;
	font: 11px arial;
}

#sddm div a:hover
{	
	background: #49A3FF;
	color: #FFF;
}

Wat ik wil dat hij gaat doen? Ik wil dat zodra je over de button gaat hij active blijft. ook als je je in de drop down bevindt. Ik hoop dat jullie een beetje snappen wat ik bedoel :P Het zou fijn zijn als iemand mij hiermee kon helpen ! Alvast bedankt :D :thumb:

1308019490-550.png


Groetjes,
Rowan
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan