Beste scripters,
Ik heb even een vraagje want ik kom er even niet meer uit omdat ik met dit soort menu's niet echt ervaring heb.
Het gaat om een horizontaal menu, met als je met de muis over een van de knoppen gaat, dat er dan een gedeelte uitschuift naar beneden.
Alleen het wil me maar niet lukken om de breette van deze knoppen te veranderen. Het liefst zou ik het hebben dat de breedte van de knoppen automatisch wordt aangepast aan wat er in staat (woord en klein plaatje).
Hier is het menu-gedeelte wat in mijn php script staat:
PHP
<head>
<link rel="stylesheet" type="text/css" href="../hoofdmenu/Hoofdmenu.css">
<link rel="shortcut icon" href="../images/Eagle.ico">
<script>
var timeout = 500;
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;
</script>
</head>
<ul id="sddm">
<li><a href="help.php" target="pagina"><img src="hoofdmenu/faq.gif" width="15" height="15" border="0" align="top" alt="FAQ" /> Faq</a></li>
<li><a href="forum.php" target="pagina"><img src="hoofdmenu/forum.gif" width="15" height="15" border="0" align="top" alt="Forum" /> Forum</a></li>
<li><a href="klikmissie1.php" target="pagina"><img src="hoofdmenu/promotie.gif" width="15" height="15" border="0" align="top" alt="Promotie" /> Promotie</a></li>
<li><a href="profile.php?x=<?=$data['login'];?>" target="pagina"
onmouseover="mopen('m1')"
onmouseout="mclosetime()"><img src="hoofdmenu/persoonlijk.gif" width="15" height="15" border="0" align="top" alt="Persoonlijk" /> Persoonlijk</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="status.php" target="pagina">Hoofdkwartier</a>
<a href="bank.php" target="pagina">Bank Account</a>
<a href="sms.php" target="pagina">Email</a>
<a href="respect.php" target="pagina">Respect Credits</a>
<a href="kladblok.php" target="pagina">Notities</a>
<a href="instellingen.php" target="pagina">Instellingen</a>
<a href="logboek.php" target="pagina">Logboek</a>
</div>
</li>
<li><a href="home.php" target="pagina"
onmouseover="mopen('m2')"
onmouseout="mclosetime()"><?=$landmenu; ?></a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="intranet/country.php?country=<? echo $data['land']; ?>" target="pagina">De landkaart</a>
<a href="luchthaven.php" target="pagina">Vliegveld</a>
<a href="gevangenis.php" target="pagina">Gevangenis</a>
<a href="hospital.php" target="pagina">Ziekenhuis</a>
<a href="zoek.php" target="pagina">Detective Bureau</a>
<a href="hitlist.php" target="pagina">Bounty Hunters</a>
</div>
</li>
<li><a href="stats_new.php" target="pagina"
onmouseover="mopen('m3')"
onmouseout="mclosetime()"><img src="hoofdmenu/intranet.gif" width="15" height="15" border="0" align="top" alt="FreeCrimes" /> Intranet</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="list.php" target="pagina">Criminelen Lijst</a>
<a href="list.php?x=online" target="pagina">Criminelen Online</a>
<a href="stats_new.php" target="pagina">Klassement</a>
<a href="stats.php" target="pagina">Statistieken</a>
<a href="drugsoverzicht.php" target="pagina">Drugsoverzicht</a>
<a href="../intranet/ammo.php" target="pagina">Ammo Business</a>
<a href="beheeroverzicht.php" target="pagina">Bussinesses</a>
<a href="cokefabriek-stat.php" target="pagina">Cokefabrieken</a>
<a href="nieuws.php" target="pagina">Nieuws</a>
<a href="forum.php" target="pagina">Forum Boards</a>
</div>
</li>
<li><a href="missies.php" target="pagina"><img src="hoofdmenu/missies.gif" width="15" height="15" border="0" align="top" alt="Missies" /> Missies</a></li>
<li><a href="poll.php" target="pagina"><img src="hoofdmenu/polls.png" width="15" height="15" border="0" align="top" alt="Polls" /> Polls</a></li>
<li><a href="credits.php" target="pagina"
onmouseover="mopen('m4')"
onmouseout="mclosetime()"><img src="hoofdmenu/vip.gif" width="15" height="15" border="0" align="top" alt="VIP" /> Vip <img src="hoofdmenu/vip.gif" width="15" height="15" border="0" align="top" alt="VIP" /></a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="credits.php" target="pagina">Credits Kopen</a>
<a href="creditshop.php" target="pagina">Credits Shop</a>
<a href="creditmarkt.php" target="pagina">Credit Markt</a>
</div>
</li>
<li><a href="loguit.php" target="pagina"><img src="hoofdmenu/logout.gif" width="15" height="15" border="0" align="top" alt="Uitloggen" /> Uitloggen</a></li>
</ul>
<div style="clear:both"></div>
</center>
</html>En hier is de layout die erbij hoort:
PHP
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
width: auto;
list-style: none;
float: right;
font: bold 11px arial}
#sddm ul
{ width: auto}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
background: #9C9B9B;
color: #333333;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #B4B4B4;
border: 1px solid #5970B2}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 70px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #4B3D32;
color: #CCCCCC;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
.ItemMouseOut
{
WIDTH: 100%
}
.Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
.barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: deepskyblue;
TEXT-ALIGN: center
}Volgens mij was dat alles.;)
Ik hoop dat er hier dan iemand is die me hierbij kan helpen!
Alvast bedankt!
Mvg,
Nick.