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

Navigationsleiste per klick aufklappen

robwillkeks

Mitglied
Hallo liebe CSS´ler ;)

ich hab eine kleine Navigationsleiste auf einer Webseite. Sie funktioniert auch wunderbar.
Nur wenn ich jetzt mit der Maus über ein Oberpunkt gehe öffnet sich automatisch die Unterpunkte dazu.
Ich möchte aber das sich die Unterpunkte erst öffnen, wenn ich auf den Oberpunkt klicke.

Wie mach ich das? :D

Hier mal der CSS-Code im Header und der Code der Navigationsleiste im Body:

HTML:
<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>

Bestimmt ganz simple :D

Gruß
RobRob ;)
 
Werbung:
Hallo.

Per CSS ist das nicht möglich. dazu musst du Javascript verwenden.
Ich kenne mich in Javascript aber nicht gut genug aus um dir weiter zu helfen.

Gruss
Elroy
 
Werbung:
Per CSS ist das nicht möglich.
Warum nicht?

Hier der Beweis:
HTML:
<!DOCTYPE html>
<html>  
    <head>   
        <meta charset="utf-8">
        <title>Navigation</title>        
        <meta name="description" content="Navigation Sample">
           
<style type="text/css">
  
#wrapper {position:relative; height:350px; width:160px; margin:0 auto; }
/* fuer Internet Explorer erzwingt einen refresh nach :active + ul */
#menu li a,

/* allgemeines Styling */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:150px;}
#menu {padding:10px 0; background:white; border:5px solid brown; position:absolute; bottom:0; }

#menu li {display:inline;}
#menu li {*float:left;} /* entfernt im IE7 die horizontale Luecke zwischen den li */
#menu li a {display:block; width:150px; line-height:30px; background:white; color:black; text-decoration:none; font-family:arial, sans-serif; font-size:13px; text-align:center; font-weight:bold; outline:0;}
#menu li:hover > a {background:yellow;}
#menu ul {background:white; height:0; overflow:hidden;}

#menu ul li a {background:white; font-weight:normal; font-size:13px;}
#menu ul li a:hover {background:pink; }

#menu li a:active {background:white;}
#menu li a:active + ul {padding:0 0 10px 0;}
#menu li a:active + ul.fly {height:150px;}

#menu li a:focus {background:white; }
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.fly {height:150px;}

#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.fly:hover {height:150px;}
</style>
</head>
<body>
  <div id="wrapper">
    <ul id="menu">
        <li><a href="#" >Home</a></li>
        <li><a href="#" >&rArr; CRM</a>

            <ul class="fly">
                <li><a href="#">Customer Center</a></li>
                <li><a href="#">Besuchsbericht erstellen</a></li>
                <li><a href="#">Info Center</a></li>
                <li><a href="#">Aktion erstellen</a></li>
                <li><a href="#">Reklamationsverwaltung</a></li>
            </ul>
        </li>
        <li><a href="#" >Kundenstamm</a></li>
        <li><a href="#" >Lieferantenstamm</a></li>
        <li><a href="#" >Rechnung prüfen</a></li>
    </ul>
 </div>
<body>
<html>

Funktioniert in IE7, IE8, >IE9, Firefox, Safari(Win), Chrome und Opera.

Die Anpassungen kannst ja jetzt selber vornehmen.
 
Danke Wustersoss für deine Lösung, hab sie ebenfalls erfolgreich übernommen.
Jedoch ist eine Anpassung sinnvoll, da sich (bei mir im FF) zwischen den aufgeklappten Überschriften immer der gleiche 150px block erschien. Hatte ich zu wenig Einträge, war der Platz leer, hatte ich zu viele Einträge, wurden diese abgeschnitten.

Um den block dynamisch zu gestalten, ändert die Werte der folgenden Einträge von "height:150px;" in "display:inline;":
#topmenu li a:active + ul.submenu {height:150px;}
#topmenu li a:focus + ul.submenu {height:150px;}
#topmenu li ul.submenu:hover {height:150px;}
 
Hey, ich hab noch ein wenig an dem Problem gearbeitet und bin auf eine bessere Lösung (für mich) gekommen.
Mein Dropdownmenü sollte ebenfalls nur HTML und CSS beinhalten. Darüberhinaus Vertikal angeordnet sein, sich dynamisch erweitern lassen und nur per klick aufklappen. Das geht sogar sehr einfach, mit dem Checkboxhack!
Hier das nötigste:

HTML:
<html>
<head>
<meta charset="utf-8">
  <title>Navigation</title>   
  <meta name="description" content="Navigation Sample">

<style>
.hackbox{
 display: none;
}
.dropdown-menu{
  display: none;
}
label {
  color: #0060f6;
  cursor: pointer;
}
label:hover {
  color: #ffb400;
}
.dropdown div a{
  text-decoration: none;
}
.dropdown div a:hover {
  color: #ffb400;
}
input[type="checkbox"]:checked ~ .dropdown-menu {
  display: block;
}
</style>
</head>
<body>
  <div class="dropdown">
  <input type="checkbox" class="hackbox" id="ErstesMenü" />
  <label class="knopf" data-toggle="dropdown" for="ErstesMenü" >Erstes Menü</label>
  <div class="dropdown-menu">
  <div><a href="#">Eins</a></div>
  <div><a href="#">Zwei</a></div>
  <div><a href="#">Drei</a></div>
  <div><a href="#">Vier</a></div>
  </div>
  </div>
  <div class="dropdown">
  <input type="checkbox" class="hackbox" id="ZweitesMenü" />
  <label class="knopf" data-toggle="dropdown" for="ZweitesMenü" >Zweites Menü</label>
  <div class="dropdown-menu">
  <div><a href="#">Elf</a></div>
  <div><a href="#">Zwölf</a></div>
  <div><a href="#">Dreizehn</a></div>
  <div><a href="#">Vierzehn</a></div>
  </div>
</div>
</body>
</html>
Es lässt sich natürlich auch mit der <ul><li> Baumstruktur lösen. Ich hatte jedoch ein paar Probleme damit und hab es so für mich schneller und schöner hin bekommen.
 
Werbung:
Hallo zusammen,

Hey, ich hab noch ein wenig an dem Problem gearbeitet und bin auf eine bessere Lösung (für mich) gekommen.
Mein Dropdownmenü sollte ebenfalls nur HTML und CSS beinhalten. Darüberhinaus Vertikal angeordnet sein, sich dynamisch erweitern lassen und nur per klick aufklappen. Das geht sogar sehr einfach, mit dem Checkboxhack!
Hier das nötigste:

HTML:
<html>
<head>
<meta charset="utf-8">
  <title>Navigation</title> 
  <meta name="description" content="Navigation Sample">

<style>
.hackbox{
 display: none;
}
.dropdown-menu{
  display: none;
}
label {
  color: #0060f6;
  cursor: pointer;
}
label:hover {
  color: #ffb400;
}
.dropdown div a{
  text-decoration: none;
}
.dropdown div a:hover {
  color: #ffb400;
}
input[type="checkbox"]:checked ~ .dropdown-menu {
  display: block;
}
</style>
</head>
<body>
  <div class="dropdown">
  <input type="checkbox" class="hackbox" id="ErstesMenü" />
  <label class="knopf" data-toggle="dropdown" for="ErstesMenü" >Erstes Menü</label>
  <div class="dropdown-menu">
  <div><a href="#">Eins</a></div>
  <div><a href="#">Zwei</a></div>
  <div><a href="#">Drei</a></div>
  <div><a href="#">Vier</a></div>
  </div>
  </div>
  <div class="dropdown">
  <input type="checkbox" class="hackbox" id="ZweitesMenü" />
  <label class="knopf" data-toggle="dropdown" for="ZweitesMenü" >Zweites Menü</label>
  <div class="dropdown-menu">
  <div><a href="#">Elf</a></div>
  <div><a href="#">Zwölf</a></div>
  <div><a href="#">Dreizehn</a></div>
  <div><a href="#">Vierzehn</a></div>
  </div>
</div>
</body>
</html>
Es lässt sich natürlich auch mit der <ul><li> Baumstruktur lösen. Ich hatte jedoch ein paar Probleme damit und hab es so für mich schneller und schöner hin bekommen.



Ich finde diesen Code sehr hilfreich,
allerdings habe ich immer wieder das Problem, dass ich die Menü-DIVS nicht nebeneinander bekomme.

1. Wie bekomme ich so eine Struktur nebeneinander, wie eine NAV-Leiste (nebeneinander die <ul><li> und jeweils darunter die nächste Ebene <ul><li> ?

2. Wie bekomme ich die Menü-Divs dann auch noch sinnvoll an die Größe der 2. Ebene angepasst, dass es nicht blöd aussieht ? (Bsp. Menüpunkt ist 120px, untere ebene hat aber 150px oder 70px, denn wenn man es mit Farbe hinterlegt, sieht es blöd aus. -> Inline-Block ? aber wie ?
 
Zuletzt bearbeitet:
So?
Code:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Test</title>
<style>
* {
 margin:0;
 padding:0;
 text-decoration:none;
 list-style:none;
}
nav {
 width:100%;
 background:#eee;
}

nav li {
  position:relative;
}

nav ul {
 display:flex;
}
nav ul ul {
 flex-direction:column;
 position:absolute;
 left:-99999em;
 top:-99999em;
 width:100%;
 background:#eee
}
nav li:active ul,
nav a:focus ~ ul  {
 left:0;
 top:auto;
}
nav a {
 display:block;
 padding:10px;
}
</style>
</head>
<body>
<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li tabindex="0"><a href="#">Kategorie 1</a>
   <ul>
     <li><a href="#">Angebot</a></li>
     <li><a href="#">Info</a>
     <li><a href="#">Wo</a>
       </ul>
  </li>
  <li tabindex="0"><a href="#">Kategorie 2</a>
   <ul>
     <li><a href="#">Räume</a></li>
     <li><a href="#">Aussicht</a>
       </ul>
  </li>
</ul>
</nav>
</body>
</html>

Wobei :focus in diesem Fall völlig ausreicht.
 
So?
Code:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Test</title>
<style>
* {
 margin:0;
 padding:0;
 text-decoration:none;
 list-style:none;
}
nav {
 width:100%;
 background:#eee;
}

nav li {
  position:relative;
}

nav ul {
 display:flex;
}
nav ul ul {
 flex-direction:column;
 position:absolute;
 left:-99999em;
 top:-99999em;
 width:100%;
 background:#eee
}
nav li:active ul,
nav a:focus ~ ul  {
 left:0;
 top:auto;
}
nav a {
 display:block;
 padding:10px;
}
</style>
</head>
<body>
<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li tabindex="0"><a href="#">Kategorie 1</a>
   <ul>
     <li><a href="#">Angebot</a></li>
     <li><a href="#">Info</a>
     <li><a href="#">Wo</a>
       </ul>
  </li>
  <li tabindex="0"><a href="#">Kategorie 2</a>
   <ul>
     <li><a href="#">Räume</a></li>
     <li><a href="#">Aussicht</a>
       </ul>
  </li>
</ul>
</nav>
</body>
</html>

Wobei :focus in diesem Fall völlig ausreicht.


Hi djheke. Danke für die Rückmeldung.

Das sieht soweit schon super aus, allerdings noch mit einem kleinen Haken,
kann man das Menü bei Klick auf den Menüpunkt auch wieder schließen ?
(Idee ggf. irgendwie mit einer zweiten Nav-Leiste die geladen wird oder ein-/ausblenden?)
 
Werbung:
Zurück
Oben