• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

submenü bei hover

Status
Für weitere Antworten geschlossen.
XraYSoLo

XraYSoLo

Senior HTML'ler
tag allerseits,

NEIN, DAS IST KEIN APRILSCHERZ, auch ich kann blöde fragen stellen^^.

aus der angehängten grafik könnt ihr mein anliegen entnehmen.
ich habe eine navi. wenn ich über einen der links fahre, soll sich das entsprechende untermenü öffnen, bzw. erscheinen. leider weiß ich jetzt nicht, wie das heißt, bzw. wonach ich da suchen soll, deswegen frag' ich euch.
thx schonmal

shema_01.jpg


Nils aka XraYSoLo
 
Ich nenne das ein switch-Menü.

Das ganze kann man mit versteckten Containern machen und mit den beiden Funktionen onmouseover und onmouseout.


MfG, matibaski
 
(Nun kann ich mal einen MOD zusammenscheissen :D)
Spass beiseite..

http://www.flashbattle.de/forumv2/thread.php?threadid=4025

Diesen habe ich per diesem hier gefunden:
http://www.google.ch/search?hl=de&q=switch-Men%C3%BC&btnG=Google-Suche&meta=

Ich habe dir den Begirff "switch-Menü" nicht umsonst gegeben. :D
Aber wenn du ein switch-Menü ohne JS haben wilst, dann kannst mir ne PN senden. Ich versuch dann mal ein Menü zu generieren, dass nur per CSS ist.


MfG, matibaski

edit: Hab mal den Code durchgesehen und ein wenig verändert.
Das kann man natürlich in Container setzen und dann die Container vertsecken (ACHTUNG: Container müssen positioniert sein)

Hab den Code benutzt und in FrontPage damit gespielt. (Geht einfacher in FP für mich, da es JS hat).
Hier ist der Code:
HTML: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<SCRIPT LANGUAGE="JavaScript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>

<style type="text/css">
.menutitle {
display:block;
width:100px;
height:20px;
border:1px solid black;
}

.untermenu {
display:hidden;
position:absolute;
width:100px;
height:20px;
left:110px;
}
</style>
</head>

<body>

<div id="masterdiv">
<div class="menutitle" onmouseover="SwitchMenu('sub1')" onmoueseout="SwitchMenu('');">Hauptlink 1<br></div>
<div class="untermenu">
 <span class="submenu" id="sub1">
  <a href="x.html" class="untermenue">- Unterlink 1</a><br>
  <a href="y.html" class="untermenue">- Unterlink 2</a><br>
  <a href="y.html" class="untermenue">- Unterlink 3</a><br>
 </span>
</div>
<div class="menutitle" onmouseover="SwitchMenu('sub2')" onmoueseout="SwitchMenu('');">Hauptlink 2<br></div>
<div class="untermenu">
 <span class="submenu" id="sub2">
  <a href="x.html" class="untermenue">- Unterlink 3</a><br>
  <a href="y.html" class="untermenue">- Unterlink 4</a><br>
  <a href="y.html" class="untermenue">- Unterlink 5</a><br>
 </span>
</div>
</div>

</body>

</html>
Leider habe ich da noch einige Probleme mit den Containern, die nebendran erscheinen sollen.
Vielleciht kann dir da einer unserer Mitkollegen helfen, da ich nicht die grosse Leuchte in JavaScript bin.

MfG, matibaski
 
Zuletzt bearbeitet von einem Moderator:
Machs doch am besten komplett ohne Javascript, nur rein mit CSS. Dann gehts auch bei Usern, die kein javaScript aktiviert haben. Ich such dir mal ein beispiel und stells dann online...
 
@gutschiguh
Ich habe mich mit XraY schon per PN kontaktiert und ich habe ihm schon eine Lösung ohen JS angegeben.

Also das Thema sollte man schliessen, sonst spammts noch :D


MfG,matibaski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben