title image


Smiley CSS Menübar zuklappen

Hallo Zusamen,

ich bin ein absoluter Anfänger was CSS und Html angeht. Ich habe mir nur folgendes Menü zusammen gefrickelt. Nun möchte ich, dass das Menü zuklappt wenn ein Menüeintrag ausgewählt wurde. Hier scheitere ich bisher aber. Kann mir jemand licht ins Dunkel bringen?! :)

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Design</title></head><style> /* Formatierung der Container */ /* #Einzeleinträge */ #container {margin:0     auto;     width:100%;     height:100%}     #Aktionsleiste {height:30px;      background:red;     padding-left:14px}      #Infoleiste {height:25px;      background:#eee;     padding-left:20px;     padding-top:6px}      #Inhalt {height:600px;    background:#ffa;}

 #lbltipAddedComment {font-weight: bold;} /* .Klassen */  /* Elemente */nav {  box-sizing: border-box;  float: left;  width: 100%;  background: red;  font-size: 16px;}

nav ul {  margin: 0;  padding: 0;} nav a {  display: block;  color: #fff;  text-decoration: none;}

nav ul li {  position: relative;  float: left;  list-style: none;} nav ul li:hover {  background: #aaaaaa;}

/* Größe der Menüeinträge (erste ebene) */nav ul li a {    padding: 6px;}

/* Schatten des menüs */nav ul ul {  position: absolute;  top: -9999px;  left: -9999px;  background: red;  box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.6);}

/* Submenü box */ nav ul ul li {  float: none;  width: 200px;    border-Top: 1px solid #555;}

/* Größe und Texteinzug der Submenüs */ nav ul ul li a {padding: 6px 20px;    border-left: 1px solid black;}

/* Position des Submenüs (100% = volle höhe des Menüs) */    nav ul li:hover > ul {  top: 100%;  left: 0;}

/* Abstand des Untermenüs */nav ul ul li:hover > ul {  top: 0;  left: 200px;}

/* Pfeilsymbol */nav ul li.submenu > a:after {  position: relative;  float: right;  content: '';  margin-left: 10px;  margin-top: 5px;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 50px solid White;  border-bottom: 5px solid transparent;}nav ul ul li.submenu a:after {  margin-left: auto;  margin-right: -10px;  border-left: 5px solid white;  border-right: 5px solid transparent;  border-top: 5px solid transparent;  border-bottom: 5px solid transparent;}

nav ul ul li:last-child {  border-bottom: none;}

</style>

<script language="JavaScript">function Statuszeile(value){ document.getElementById('lbltipAddedComment').innerHTML = value;};

</script>

<body><div id="container"> <div id="Aktionsleiste">  <nav>   <ul>    <li>     <a id="Alphaverzeichnis" title="Alphaverzeichnis" href="#" onclick="Statuszeile('Alphaverzeichnis');return false;">Startseite</a>    </li>    <li>     <a href="#" title="Ansichten">Ansichten</a>     <ul>      <li class="submenu">       <a href="#" title="Intern">Intern</a>       <ul>        <li><a id="Alphaverzeichnis" title="Alphaverzeichnis" href="#" onclick="Statuszeile('Alphaverzeichnis');return false;">Alphaverzeichnis</a></li>        <li><a id="Bereich / GS / Gruppe" title="Bereich / GS / Gruppe" href="#" onclick="Statuszeile('Bereich / GS / Gruppe');return false;">Bereich / GS / Gruppe</a></a></li>        <li><a id="Standort" title="Standort" href="#" onclick="Statuszeile('Standort');return false;">Standort</a></li>        <li><a id="PVT" title="PVT" href="#" onclick="Statuszeile('PVT');return false;">PVT</a></li>        <li><a id="OE" title="OE" href="#" onclick="Statuszeile('OE');return false;">OE</a></li>        <li><a id="Personalnummern" title="Personalnummern" href="#" onclick="Statuszeile('Personalnummern');return false;">Personalnummern</a></li>        <li><a id="Ersthelfer" title="Ersthelfer" href="#" onclick="Statuszeile('Ersthelfer');return false;">Ersthelfer</a></li>        <li><a id="Geburtstage" title="Geburtstage" href="#" onclick="Statuszeile('Geburtstage');return false;">Geburtstage</a></li>       </ul>      </li>      <li class="submenu">       <a href="#" title="Extern">Extern</a>       <ul>        <li><a id="Kurzwahl" title="Kurzwahl" href="#" onclick="Statuszeile('Kurzwahl');return false;">Kurzwahl</a></li>        <li><a id="Externe Partner" title="Externe Partner" href="#" onclick="Statuszeile('Externe Partner');return false;">Externe Partner</a></li>       </ul>      </li>         <li class="submenu">       <a href="#" title="Administration">Administration</a>       <ul>        <li><a id="Neue Eingabe" title="Neue Eingabe" href="#" onclick="Statuszeile('Neue Eingabe');return false;">Neue Eingabe</a></li>        <li><a id="Neue Kurzwahl" title="Neue Kurzwahl" href="#" onclick="Statuszeile('Neue Kurzwahl');return false;">Neue Kurzwahl</a></li>        <li><a id="Neue Externe Adresse" title="Neue Externe Adresse" href="#" onclick="Statuszeile('Neue Externe Adresse');return false;">Neue Externe Adresse</a></li>        <li><a id="Zu Pr&uuml;fende" title="Zu Pr&uuml;fende" href="#" onclick="Statuszeile('Zu Pr&uuml;fende');return false;">Zu Pr&uuml;fende</a></li>        <li><a id="Sonstiges" title="Sonstiges" href="#" onclick="Statuszeile('Sonstiges');return false;">Sonstiges</a></li>        <li><a id="Ausgetretene" title="Ausgetretene" href="#" onclick="Statuszeile('Ausgetretene');return false;">Ausgetretene</a></li>        <li><a id="Alle Dokumente" title="Alle Dokumente" href="#" onclick="Statuszeile('Alle Dokumente');return false;">Alle Dokumente</a></li>        <li><a id="&Auml;nderungen" title="&Auml;nderungen" href="#" onclick="Statuszeile('&Auml;nderungen');return false;">&Auml;nderungen</a></li>       </ul>      </li>      <li class="submenu">       <a href="#" title="Andere Funktionen">Andere Funktionen</a>       <ul>        <li><a id="Spezielle Aktionen" title="Spezielle Aktionen" href="#" onclick="Statuszeile('Spezielle Aktionen');return false;">Spezielle Aktionen</a></li>        <li><a id="Visitenkarten" title="Visitenkarten" href="#" onclick="Statuszeile('Visitenkarten');return false;">Visitenkarten</a></li>        <li><a id="PIS-Stempel" title="PIS-Stempel" href="#" onclick="Statuszeile('PIS-Stempel');return false;">PIS-Stempel</a></li>        <li><a id="Namensschilder" title="Namensschilder" href="#" onclick="Statuszeile('Namensschilder');return false;">Namensschilder</a></li>        <li><a id="GS &Ouml;ffungszeiten" title="GS &Ouml;ffungszeiten" href="#" onclick="Statuszeile('GS &Ouml;ffungszeiten');return false;">GS &Ouml;ffungszeiten</a></li>               </ul>      </li>     </ul>    </li>    <li>     <a id="Hilfe" title="Hilfe" href="#" onclick="Statuszeile('Hilfe');return false;">Hilfe</a>    </li>   </ul>  </nav> </div></div><div id="Infoleiste"> <label>Sie befinden sich hier: </label><label id="lbltipAddedComment">Alphaverzeichnis</label></div><div id="Inhalt"> Inhalt</div>

</body></html>


ot => Ohne Text
-----------------------------------------------------------------------------------------------------
Wenn bereits der Ansatz falsch ist, so führt strenge Logik
unweigerlich zum falschen Ergebnis. Nur Unlogik gibt Dir
jetzt noch die Chance, wenigstens zufällig richtig zu liegen.
-----------------------------------------------------------------------------------------------------
mfg und schon mal Danke
6168761




geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: