nicht angemeldet
Vertikales Menü mit 3 Ebenen,Hover,jQuery
Gunnar Bittersmann
Matthias ApselHallo,
ich versuche ein vertikales Menü mit 3 Ebenen zu erstellen, die Ebenen 2 und 3 sollen jeweils durch "Hovern" eingeblendet werden. Die Hover-Funktionalität wird durch "jQuery" realisiert. Test erfolgte mit "Firefox Version 10".
Mein Problem:
Wenn ich in Ebene 2 "hovere", wird ein vorhandenes Menü der Ebene 3 immer am Anfang der Ebene 2 und nicht in Höhe des gehoverten Elements angezeigt.
Am Beispiel:
'Verschiedenes' -> 'Hover, Animate': die 3 zugehörigen Untermenü-Einträge werden nicht in der Höhe von 'Hover, Animate' dargestellt.
Hier nun der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Vertikales Menü</title>
<style type="text/css">
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:rgb(0, 255, 255);
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
line-height:2em
}
#nav a {
display:block;
padding:0px 5px;
border:1px solid #333;
text-decoration:none;
background-color:#eef4d3;
}
#nav li{
position:relative;
width:12em;
margin: 0;
margin-top:-3px;
}
#nav ul {
position:absolute;
display:none;
left:12em;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav li ul{
top:3px;
}
/* für Menü-Ebene 3 */
#nav li ul ul {
margin:0px 0 0 10px;
}
</style>
<script type='text/javascript' src='Scripts/jquery-1.4.1.js'></script>
<script type='text/javascript'>
function mainmenu(){
$("#nav li").hover(function(){ //handlerin
$(this).find('ul:first').css({visibility: "visible"}).show(400);
},function(){ //handlerout
$(this).find('ul:first').css({visibility: "hidden"});
});
$("#nav a").hover(function(){
$(this).css({backgroundColor:'#fff',color:'#333'});
},function() {
$(this).css({backgroundColor:'#eef4d3',color:'#333'});
});
}
$(document).ready(function(){
$("h3").append(new Date().toLocaleString());
mainmenu();
});
</script>
</head>
<body>
<h3>Zeit: </h3>
<ul id="nav">
<li><a href="bildKlick.html">Bilder klicken</a></li>
<li><a href="#">Formular</a>
<ul>
<li><a href="formWerte.html">Formular prüfen</a></li>
<li><a href="input.html">Formular in Tabelle</a></li>
</ul>
</li>
<li><a href="#">Verschiedenes</a>
<ul>
<li><a href="#">Menus</a>
<ul>
<li><a href="menus/menu.html">Horizontal, 3-stufig</a></li>
<li><a href="menus/index.html">Vertikal, 2-stufig</a></li>
</ul>
</li>
<li><a href="focus.html">Focus</a></li>
<li><a href="find.html">Find</a></li>
<li><a href="#">Hover, Animate</a>
<ul>
<li><a href="showHideHover.html">showHideHover</a></li>
<li><a href="animate.html">Animation</a></li>
<li><a href="animEff.html">Animation,5 Varianten</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Bin dankbar für jeden Hinweis.
Gruß Wicki
-
@@Wicki:
nuqneH
Die Hover-Funktionalität wird durch "jQuery" realisiert.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Warum?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Wicki:
nuqneH
Die Hover-Funktionalität wird durch "jQuery" realisiert.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=Warum?
Qapla'
"jQuery" verwende ich, weil ich damit noch andere Funktionalitäten realisieren will und weil es die Sache zumindest für den jQuery-Kenner kompakter gestaltet. Dein Verweis war mir natürlich auch bekannt, hilft mir jedoch nicht weiter. Mein Menü sollte linksseitig vertikal in der 1. Ebene sein und die Folgeebenen jeweils nach rechts in Höhe des gehoverten Elements aufklappen.
Wicki
-
@@Wicki:
nuqneH
"jQuery" verwende ich, weil ich damit noch andere Funktionalitäten realisieren will und weil es die Sache zumindest für den jQuery-Kenner kompakter gestaltet.
Es ist keine gute Idee, etwas, das mit CSS realisiert werden kann, mit JavaScript zu realisieren. Die CSS-Lösung läuft im Browser schneller. Und man ist nicht darauf angewiesen, dass beim Nutzer JavaScript ausgeführt wird.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Es ist keine gute Idee, etwas, das mit CSS realisiert werden kann, mit JavaScript zu realisieren. Die CSS-Lösung läuft im Browser schneller. Und man ist nicht darauf angewiesen, dass beim Nutzer JavaScript ausgeführt wird.
Das gilt inzwischen auch für Animationen[1], so merken die Nutzer antiker Browser wenigstens, dass sie antike Browser benutzen.
[1] Man kann CSS-Animationen auch langsam ablaufen lassen.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Es ist keine gute Idee, etwas, das mit CSS realisiert werden kann, mit JavaScript zu realisieren. Die CSS-Lösung läuft im Browser schneller. Und man ist nicht darauf angewiesen, dass beim Nutzer JavaScript ausgeführt wird.
Ihr habt ja Recht und ich gelobe Besserung. Trotzdem interessiert mich, welche Fehler ich gemacht habe und wie das korrigiert werden könnte.
Wicki
-
Inzwischen habe ich den Fehler gefunden, der eigentlich weder JavaScript- noch jQuery-Kenntnisse erforderlich macht.
#nav li ul a{ width:12em; height:auto; float:left; /* das war der Fehler, Zeile muss entfernt werden */ }Gruß und Dank
Wicki-
Hi!
Dann brauch ich ja gar nicht weiterschauen, warum die li nicht da waren. Hatte mir das angesehen, musste dann aber ein paar andere Dinge erledigen.
Ja. Das Float nimmt die a aus den li raus. Die klappen dann zusammen und befinden sich allesamt auf top 0 und left 0 des ul.
--
Signaturen sind blöd!
-
-
-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Es ist keine gute Idee, etwas, das mit CSS realisiert werden kann, mit JavaScript zu realisieren. Die CSS-Lösung läuft im Browser schneller. Und man ist nicht darauf angewiesen, dass beim Nutzer JavaScript ausgeführt wird.
Hier nochmal die online-Adresse des Codes
Wicki
-
-
-
-
-
Om nah hoo pez nyeetz, Wicki!
Bin dankbar für jeden Hinweis.
* Du brauchst kein JavaScript, CSS-FUnktionalität ist gegeben
* Stelle ein online-Beispiel zur Verfügung, damit niemand cnp-en braucht* Ich vermute, du hast ein Problem mit dem Verständnis der Positionierung
Matthias
--
1/z ist kein Blatt Papier.
-
* Du brauchst kein JavaScript, CSS-FUnktionalität ist gegeben
* Stelle ein online-Beispiel zur Verfügung, damit niemand cnp-en braucht
Matthiashier das online-Beispiel
-