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

Navigation mit waagerechten Untermenüs

S

SpeedyX

Mitglied
Hi Leute,

ich bin grade dabei mir ein Navigationsmenü mit waagerechten Untermenüs zu erstellen.
Die Menüleiste soll hauptsächlich aus 2 Farben bestehen. Einer aktiven (Dunkelblau(#0404B4)) und einer passiven (Hellblau(#006FFF)). Die Menüleiste generell soll die passive Farbe haben. Wird ein Element ausgewählt oder fährt man mit der Maus darüber, soll der Hintergrund die aktive Farbe erhalten und die Schrift die passive.

Habe das ganze auch schon versucht zu realisieren.
Dazu zwei DIV's unter der Hauptnavigationsleiste, die übereinander liegen. Das ausgewählte Untermenü wird dann jeweils sichtbar gemacht via Javascript. Die Hover Effekte mache ich mit CSS.

Hier mein bisheriges Ergebnis: http://moeller.mx/hcp_new2/

Um die Untermenüs kümmer ich mich später.

Wie ihr seht, kann ich zwar ein Menüelement auswählen, der Hover Effekt im Hauptmenü geht zuerst auch. Jedoch geht das Hovereffekt nach öffnen und schließen eines Menüs nicht mehr.

Hier mein Code:
HTML: 
    <nav>
       <ul id="menu">
         <li id="menu1">
           <a if="menu1_a" href="javascript:void(0);" onClick="hide_sub(); loadPage('home');">Home</a>
         </li>
         <li id="menu2">
           <a id="menu2_a" href="javascript:void(0);" onClick="switch_sub2();">Benutzerkonto verwalten</a>
         </li>
         <li id="menu3">
           <a id="menu3_a" href="javascript:void(0);" onClick="switch_sub3();">Administration</a>
         </li>
         <li id="menu4">
           <a id="menu4_a" href="javascript:void(0);" onClick="hide_sub(); logout();">Logout</a>
         </li>
       </ul>
       <ul id="sub2">
         <li id="sub2-1">
           <a href="javascript:void(0);">E-Mail Adresse ändern</a>
         </li>
         <li id="sub2-2">
           <a href="javascript:void(0);">Passwort ändern</a>
         </li>
         <li id="sub2-3">
           <a href="javascript:void(0);">Sonstige Informationen</a>
         </li>
       </ul>
       <ul id="sub3">
         <li id="sub3-1">
           <a href="javascript:void(0);">Benutzer verwalten</a>
         </li>
         <li id="sub3-2">
           <a href="javascript:void(0);">Allgemeine Einstellungen</a>
         </li>
       </ul>
     </nav>

CSS: 
nav {
    font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}

nav ul#menu {
    box-shadow: 2px 2px 2px #888888;
}

nav ul {
    padding: 0px;
    margin: 0px;
}

nav ul#menu, nav ul#menu li {
    background-color: #006FFF;
}

nav ul li {
    list-style: none;
    float: left;
}

nav ul li a {
    text-decoration: none;
    display: block;
}

nav ul li a {
    color: #0404B4;
}

nav ul#menu li a {
    padding: 10px 25px 10px 25px;
    transition: background 0s ease-out 0s;
}

nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0px;
    height: 0px;
    visibility: hidden;
}

nav ul#menu li:hover a, nav ul#menu li a:hover {
    color: #006FFF;
}

nav ul#menu li:hover {
    background-color: #0404B4;
}

nav ul#sub2, nav ul#sub3 {
    visibility: hidden;
    position: absolute;
    width: 1000px;
    box-shadow: 2px 2px 2px #888888;
}

nav ul#sub2, nav ul#sub3 {
    background-color: #0404B4;
}

nav ul#sub2 {
    z-index: 1;
}

nav ul#sub3 {
    z-index: 2;
}

nav ul#sub2 li, nav ul#sub3 li {
    padding: 10px;
}

nav ul#sub2 li:hover, nav ul#sub3 li:hover {
    background-color: black;
}

nav ul#sub2 li:hover > a, nav ul#sub3 li:hover > a {
    color: #FAFAFA;
}

Javascript: 
function hide_sub() {
   document.getElementById("sub2").style.visibility = "hidden";
   document.getElementById("sub3").style.visibility = "hidden";
   document.getElementById("menu2").style.backgroundColor = "#006FFF";
   document.getElementById("menu2_a").style.color = "#0404B4";
   document.getElementById("menu3").style.backgroundColor = "#006FFF";
   document.getElementById("menu3_a").style.color = "#0404B4";
}

function switch_sub2() {
   if(document.getElementById("sub2").style.visibility == "visible") {
     document.getElementById("sub2").style.visibility = "hidden";
     document.getElementById("menu2").style.backgroundColor = "#006FFF";
     document.getElementById("menu2_a").style.color = "#0404B4";
   }
   else {
     document.getElementById("sub2").style.visibility = "visible";
     document.getElementById("menu2").style.backgroundColor = "#0404B4";
     document.getElementById("menu2_a").style.color = "#006FFF";
   }
   if(document.getElementById("sub3").style.visibility == "visible") {
     document.getElementById("sub3").style.visibility = "hidden";
     document.getElementById("menu3").style.backgroundColor = "#006FFF";
     document.getElementById("menu3_a").style.color = "#0404B4";
   }
}

function switch_sub3() {
   if(document.getElementById("sub3").style.visibility == "visible") {
     document.getElementById("sub3").style.visibility = "hidden";
     document.getElementById("menu3").style.backgroundColor = "#006FFF";
     document.getElementById("menu3_a").style.color = "#0404B4";
   }
   else {
     document.getElementById("sub3").style.visibility = "visible";
     document.getElementById("menu3").style.backgroundColor = "#0404B4";
     document.getElementById("menu3_a").style.color = "#006FFF";
   }
   if(document.getElementById("sub2").style.visibility == "visible") {
     document.getElementById("sub2").style.visibility = "hidden";
     document.getElementById("menu2").style.backgroundColor = "#006FFF";
     document.getElementById("menu2_a").style.color = "#0404B4";
   }
}

Falls es eine viel einfachere Methode gibt als die übereinanderliegendes DIV's würde ich mich freuen wenn ihr mir diese näher bringen könntet!
Ansonsten bleibt halt die Frage, warum die CSS hover Effekte nach der Anwendung von JavaScript nicht mehr funktionieren.

Danke schonmal im voraus!

LG

SpeedyX
 
Schau dir mal dein Script an. Fallen dir die Wiederholungen im Code auf? deine 45 Zeilen lassen sich auf etwa 5 verkürzen.

- Verwende jQuery. Das ist zugänglicher und kürzer in der Syntax.
- Verwende Klassen anstatt IDs zum stylen.
- Du benötigst genau eine einzige Funktion, die besagt: entferne einen Style von allen Elementen und wende ihn auf das aktuelle Element an.
- javascript:void(0) ist so was von 90'er Jahre
- mit jQuery würde deine Funktion so beginnen:
Code: 
$('a').on('click', function(e) {
  e.preventDefault();
  // tu was mit den Styles
})

Den Rest lass ich dir zum knobeln. ;)
 
Ok, Danke auf jeden Fall erstmal! Aber was soll ich statt javascript:void(0) verwenden? # will ich nicht verwenden, da dann beim ersten Aufruf die Seite quasi neu geladen wird.
 
Eine Frage noch:
Javascript: 
$('a').on('click', function(e) {
  e.preventDefault();
  // tu was mit den Styles
})

Was genau ist das e, das der Funktion übergeben wird?
 
Ok, Danke!
Aber irgendwie will das bei mir nicht so ganz:
Javascript: 
$('a').on('click', function(e) {
   e.preventDefault();
   alert("Hallo!");
});
Habe zum Testen mal einen alert mit Hallo! reingeschrieben.

Er müsste doch dann, wenn ich auf einen Link im HTML Doc klicke, egal auf welchen, diese Funktion ausführen und somit "Hallo!" ausgeben, was er aber nicht tut.

Weiß jemand zufällig warum?

Die jQuery Lib habe ich eingebunden.
 
HTML: 
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="main_scripts.js"></script>

Hab die beiden so im <head> Bereich eingebunden.
 
Danke!
Funktioniert jetzt:
Javascript: 
$(document).ready(function() {
   $('a').on('click', function(e) {
     e.preventDefault();
     console.log("Hallo!");
   });
});

Einmal muss ich noch nerven:
Wie unterscheide ich jetzt am besten auf welchen Link im Hauptmenü geklickt wurde?
Ich muss ja, je nachdem ob man auf Link 2 oder 3 geklickt hat das jewilige Untermenü sichtbar machen.

EDIT: Hat sich erledigt. Hab den LI's einach ID's von 1 - 4 zugewiesen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben