Navigationsleiste per klick aufklappen

robwillkeks · 9 November 2011

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?

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

Gruß
RobRob ;)

Elroy · 9 November 2011

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

about · 9 November 2011

Das Tutorial habe ich einmal verwendet um soetwas zu verwirklichen. Vielleicht hilft es ja, es wird daran mit Javascript in Kombination mit CSS gearbeitet, eigentlich ziemlich simpel und gut erklärt.

JavaScript Tutorial: Dropdown-Menü erstellen mit JavaScript | deutsch - YouTube

Wustersoss · 9 November 2011

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.

Talem · 1 Februar 2016

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;}

Talem · 16 Februar 2016

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.

Foxbone · 2 Juni 2017

Hallo zusammen,

Talem schrieb:
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 ?

djheke · 2 Juni 2017

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.

Foxbone · 8 Juni 2017

djheke schrieb:

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?)

djheke · 8 Juni 2017

Mit input :checked. Aber davon halte ich nicht nichts.

Navigationsleiste per klick aufklappen

robwillkeks

Mitglied

Elroy

Senior HTML'ler

about

Guest

Wustersoss

Guest

Talem

Neues Mitglied

Talem

Neues Mitglied

Foxbone

Neues Mitglied

djheke

Aktives Mitglied

Foxbone

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge