13 svar · 267 visningar · startad av Percy
Hej!
Hur ser koden för en navigationsmeny ut som liknar den på följande adress:
http://www.itkontor.nu/bredband/hotel.html
eftersom jag inte är särskilt framstående inom dhtml så vore jag väldigt tacksam om ni även kommenterade koden så att även jag kan förstå vad den gör.
tack på förhand
ooops, fel forum, kan någon flytta den till rätt forum kanske?
Jepp! Flyttar tråden till "JavaScript, DHTML".
------------------
/Erik
www.juhlin.nu /sk8files/ /mp2d/
har redan varit där och har fått det att fungera men kan jag bara "stoppa" in den i en tabell med t.e.x en bred på 500 pixlar? jag vill nämligen inte ha menyn över hela sidan utan så som den länken jag angav i första inlägget dvs i en tabell!
Men asså på menyscriptet på bratta.com så är det ju massor av variabler där man ställer in bredd och höjd och allt sånt själv ju.. läs kommentarerna i koden :)
------------------
//M@rtin || Peachy.nu\\
Sue Me!
Man behöver ju inte krångla till det med en massa externa js-filer.
Lägg bara menyerna i två lager, ett som syns och ett som är gömt. I dessa lager kan du lägga menyerna i tabeller och på så vis få dom att se ut hur du vill.
När du sedan för musen över det ena lagret anropar du en funktion som visar det gömda och när musen lämnar detta lager anropar du en funktion som stänger det.
På detta vis kan du bygga upp dina menyer med två lager per meny och få dom så breda och många du vill.
/ J
hej Johnsen, blir inte ditt förslag tungladdad om man har många "menyer"?
------------------
/Peter
Tungladdat, jo det är möjligt.
Men nu handlade det ju inte om många menyer, de skulle ju inte täcka hela sidan.
Fast det är klart, man får ju lägga till lite extra kod för att det skall funka för både IE & NS eftersom inte NS (4+ åtminstone) stöder onMouseOver på <div>.
Jag skall göra en test för att kolla om det blit tungt, återkommer...
/ J
Så har jag testat lite och jag tycker inte att det blir säskilt tungt.
Detta är dock ett mycket enkelt sätt att skapa sådana typer av menyer, så vill man ha en massa avancerade tillägg får man antingen sätta sig och koda själv eller ta del av någon annans skript.
Däremot tror jag att de flesta av de som vill ha denna typ av menyer söker just enkelhet.
Det vore kul om någon annan testade nedanstående för att se hur tungladdat det blir.
Utöka gärna med några fler menyer.
<html>
<head>
<script type="text/javascript" language="JavaScript">
function showMen(men) {
if (document.layers) document.layers[men].visibility = "show"
else { document.all(men).style.visibility = "visible" }
}
function hideMen(men) {
if (document.layers) document.layers[men].visibility = "hide"
else { document.all(men).style.visibility = "hidden" }
}
</script>
<head>
<body>
<!-- Första menyn. Först syns bara starter1-diven, men onmouseover... --->
<div id="starter1" onMouseOver="showMen('m1');" style="position:absolute; left:20; top:20;">
<layer onMouseOver="showMen('m1');"><table width=100><tr><td bgcolor="#999999">
<b>Meny 1</b></td></tr></table></layer></div>
<!-- ...kommer denna div (m1) att synas och den försvinner onmouseout. --->
<div id="m1" onMouseOver="showMen('m1');" onMouseOut="hideMen('m1');" style="position:absolute; left:20; top:20; visibility:hidden">
<layer onMouseOver="showMen('m1');" onMouseOut="hideMen('m1');">
<table width=100><tr><td bgcolor="#999999">
<b>Meny 1</b></td></tr>
<tr><td bgcolor="#cccccc">
<a href="#"> Länk 1:1 </a><br>
<a href="#"> Länk 2:1 </a><br>
<a href="#"> Länk 3:1 </a><br>
<a href="#"> Länk 4:1 </a><br><br>
</td></tr></table></layer></div>
<!-- Slut på första menyn. --->
<!-- Andra menyn. Först syns bara starter2-diven, men onmouseover... --->
<div id="starter2" onMouseOver="showMen('m2');" style="position:absolute; left:115; top:20;">
<layer onmouseover="showMen('m2');"><table width=100><tr><td bgcolor="#999999">
<b>Meny 2</b></td></tr></table></layer></div>
<!-- ...kommer denna div (m2) att synas och den försvinner onmouseout. --->
<div id="m2" onMouseOver="showMen('m2');" onMouseOut="hideMen('m2');" style="position:absolute; left:115; top:20; visibility:hidden">
<layer onMouseOver="showMen('m2');" onMouseOut="hideMen('m2');">
<table width=100><tr><td bgcolor="#999999">
<b>Meny 2</b></td></tr>
<tr><td bgcolor="#cccccc">
<a href="#"> Länk 1:2 </a><br>
<a href="#"> Länk 2:2 </a><br>
<a href="#"> Länk 3:2 </a><br>
<a href="#"> Länk 4:2 </a><br>
<a href="#"> Länk 5:2 </a><br>
<hr>
<a href="#"> Länk 6:2 </a><br>
<a href="#"> Länk 7:2 </a><br><br>
</td></tr></table></layer></div>
<!-- Slut på andra menyn. Bygg på så många menyer du vill. --->
<!-- Ändra bara på lagrens namn och plats (position). --->
</body>
</html>
/ J
för att fortsätta denna tråd, var kan man fixa en meny som den på ww.sgn.nu har sett den på flera ställen så det borde väl finns någon färdigt script som det på bratta men som är lättare och snyggare?
------------------
Jag är lite borta men lämna ett meddelande
ingen, usch va dåligt ;)
nä men helt ärligt, ingen som har minsta suck? eller måste jag göra en själv?
------------------
Jag är lite borta men lämna ett meddelande
Gör en själv, det brukar ändå alltid bli bäst.