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

Unterpunkte einer Navigationsleiste sollen per Klick erscheinen

R

robwillkeks

Mitglied
Hallo liebe JS´ler ;)

ich hoffe ihr könnts mir weiterhelfen.

Ich habe eine kleine Navigationsleiste. Diese funktioniert auch wunderbar.
Nur wenn ich mit der Maus über ein Oberpunkt fahre, erscheinen sofort die Unterpunkte.
Ich würd das aber gern so haben, dass ich erst auf den Oberpunkt draufklicken muss, dann erst erscheinen die Unterpunkte.
Wenn ich dann wieder auf den Oberpunkt klicke, dann soll er wieder die Unterpunkte zuklappen.

Hier mal mein Code im Header sowie im Body:

Code: 
<style type="text/css">
  ul#Navigation                  
  {                    
   width: 12.5em;
   margin: 0; padding: 0.2em 0.8em 0.8em;         
   border: 0;
   background="layout.gif";
  }
  
  ul#Navigation li 
  {
    list-style: none;
    margin: 0.2em; padding: 0;
  }
  
  ul#Navigation li ul
  {
   margin: 0 0 0 1em; padding: 0;
  }
  
  ul#Navigation li ul li
  {
    margin: 0.1em 0;
  }
  
  ul#Navigation a, ul#Navigation span, ul#Navigation h2
  {
    font-size: 10pt;
    display: block; 
    padding: 0.3em;
    text-decoration: none; font-weight: bold;
    border: 01px solid black;
    border-left-color: black; border-top-color: black;
    color: #A5A6A7;
    background-image: url('inhaltsverzeichnis.gif')
  }

  ul#Navigation a:hover, ul#Navigation span 
  {                  
    border-color: black;              
   border-left-color: black; border-top-color: black;   
    color: white;      
    background-image: url('inhaltsverzeichnis2.gif')  
  }

  ul#Navigation h2 
  {                  
    font-size: 1em;              
    margin: 1.1em 0 0;             
    border-color: black;             
   color: black;              
    background-image: url('inhaltsverzeichnis.gif')
  }

  ul#Navigation li ul
  {
 display: none;
  }

  ul#Navigation li:hover>ul
  {
 display: block;
  }

</style>



<ul id="Navigation">
    <li><h2>Allgemein:</h2></li>
    <li><a href="CRM.htm" target="Arbeitsablauf">&rArr; CRM</a>
     <ul>
      <li><a href="Customer_Center.htm" target="Arbeitsablauf">Customer Center</a></li>
      <li><a href="Besuchsbericht_erstellen.htm" target="Arbeitsablauf">Besuchsbericht erstellen</a></li>
      <li><a href="Info_Center.htm" target="Arbeitsablauf">Info Center</a></li>
      <li><a href="Aktion_erstellen.htm" target="Arbeitsablauf">Aktion erstellen</a></li>
      <li><a href="Reklamation_erfassen.htm" target="Arbeitsablauf">Reklamationsverwaltung</a></li>
     </ul>
    </li>
    <li><a href="Kundenstamm.htm" target="Arbeitsablauf">Kundenstamm</a></li>
    <li><a href="Lieferantenstamm.htm" target="Arbeitsablauf">Lieferantenstamm</a></li>
    <li><a href="Rechnung_prüfen.htm" target="Arbeitsablauf">Rechnung prüfen</a></li>
  </ul>

JS ist nicht so mein Ding. Ich hoffe ihr könnts mir sagen wie ich das realisier :D
Bestimmt ganz simple ;)

Gruß
RobRob
 
Meiner Meinung nach schon etwas komplexer.
Ich gehe mal davon aus, dass du wenn JS ausgeschaltet ist, dennoch das CSS Menü erhalten willst.
Du musst ganz am Anfang alle Menü-Aktivatoren per JS raussuchen (würde dazu tendieren ihnen eine extra css Klasse zu geben).
Auf diese legst du dann einen click-Handler. Mittels der ausgeführten Funktion hast du dann Zugriff auf das geklickte Element (a) (this ist dann das a-Element).
Von dort aus kannst du dann das gewünschte UL ansteuern.
Folgende befehle sind deine Freunde:
- document.getElementsByTagName
- document.getElementsByClassName
- parentNode <-- zum beispiel this.parentNode

Wenn du noch weitere Hilfe benötigst sag bescheid :)
Sollte das Ganze eher ein Job-Auftrag so schreibe diesen bitte in die Jobbörse. =)


-------------

Edit:

Nebenbei. Wenn du das ganze etwas unflexibler gestalten willst sieht die Sache schon simpler aus. Die folgende Lösung ist sehr starr und ist nicht zu empfehlen.

HTML: 
<html>
<head>

<script type="text/javascript">
function menu(activatorId, subMenuId) {
  var active = false;
  var activator = document.getElementById(activatorId);
  var subMenu = document.getElementById(subMenuId);
  
  
  // Untermenü wirklich unsichtbar machen
  subMenu.style.display = "none";
  
  
  
  this.switchMenu = function() {
    if(active) closeMenu();
    else openMenu();
    return false;
  };
  
  var closeMenu = function() {
    subMenu.style.display = "none";
    active = false;
  };
 
  var openMenu = function() {
    subMenu.style.display = "block";
    active = true;
  };
  // Eventhandling
  activator.onclick = this.switchMenu;
  
  
}
</script>
</head>
<body>
<ul>
  <li>
    <a href="#" id="menu1">Menu1</a>
    <ul id="submenu1">
      <li>Test</li>
    </ul>
  </li>
</ul>
</body>
<script type="text/javascript">
  new menu("menu1","submenu1");
</script>

</html>
 
Zuletzt bearbeitet:
Hallo, ich weiß das das Thema hier alt ist, aber ich wollte jetzt kein neues aufmachen.

Also erst mal danke an Gilles so ein Menü habe ich gesucht, aber ich habe ein kleines Problem damit und vielleicht kann mir jemand helfen.

Erstmal der Code
Code: 
<html>
<head>
<script type="text/javascript">
function menu(activatorId, subMenuId) {
  var active = false;
  var activator = document.getElementById(activatorId);
  var subMenu = document.getElementById(subMenuId);
  
  
  // Untermenü wirklich unsichtbar machen
  subMenu.style.display = "none";
  
  
  
  this.switchMenu = function() {
    if(active) closeMenu();
    else openMenu();
    return false;
  };
  
  var closeMenu = function() {
    subMenu.style.display = "none";
    active = false;
  };
 
  var openMenu = function() {
    subMenu.style.display = "block";
    active = true;
  };
  // Eventhandling
  activator.onclick = this.switchMenu;
  
  
}
</script>
<style type="text/css">
li {
    list-style-type: none;
}
#hauptnavi1 {
    padding: 0px;
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    height: 25px;
}
#menu1 {
    clear: right;
    float: left;
}
#submenu1 {
    padding-left: 100px;
}
#submenu1 li {
    display: inline;
    margin-left: 10px;
}
#hauptnavi2 {
    padding: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    height: 25px;
}
#menu2 {
    clear: right;
    float: left;
}
#submenu2 {
    padding-left: 100px;
}
#submenu2 li {
    display: inline;
    margin-left: 10px;
}
</style>
</head>
<body>
<div id="hauptnavi1">
  <ul>
    <li> <a href="#" id="menu1">WORK</a>
      <ul id="submenu1">
        <li><a href="#">FACES</a></li>
        <li><a href="#">KIDS</a></li>
        <li><a href="#">SCAPES</a></li>
        <li><a href="#">THINGS</a></li>
        <li><a href="#">VIDEO</a></li>
        <li><a href="#">CLIENTS</a></li>
      </ul>
    </li>
  </ul>
</div>
<div id="hauptnavi2">
  <ul>
    <li> <a href="#" id="menu2">ABOUT</a>
      <ul id="submenu2">
        <li><a href="#">BIO</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">MAKING OF</a></li>
        <li><a href="#">PORTFOLIO</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
<script type="text/javascript">
  new menu("menu1","submenu1");
  new menu("menu2","submenu2");
</script>
</html>

Das Problem ist jetzt, wenn ich menu1 anklicke und sich das submenu1 öffnet und danach menu2 klicke, sich dann aber nicht das submenu1 automatisch schließt und beide submenüs offen sind.
Ich kenne mich leider sehr sehr wenig mit javascript aus.

Kann mir bitte einer weiter helfen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben