✔ Untermenüs beim klick auf Übergeordnete Menüs anzeigen

Status
Nicht offen für weitere Antworten.
I

Impega

Grünschnabel
Hi @ all,

ich beschäftige mich schon seit kurzer Zeit mit CSS und nun bräuchte mal etwas hilfe.

ich möchte, dass bei einem vertikalem Menü die Unterpunkte zunächst versteckt sind und erst dann auftauchen, wenn man auf den Übergeordneten Begriff geklickt hat - es soll nicht über ein hover geöffnet werden. bei mir wäre es so: wenn jemand auf "Link 2" klickt, sollen die Untereinträge: "Link 2 1" und "Link 2 2" angezeigt werden.
ich denke, dass es irgendwie mit "display: none; " funktionieren könnte - die frage ist nur wie ?



hier wäre mein bisheriger quelltext:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<style>  
* {margin:0; padding: 0; list-style:none; }
#wrapper {
		margin: 1em auto;
		width: 780px;
		text-align: left;
		background-color: cyan;
		border: 1px solid 	#c0c0c0;
  }
  
#header {
    background-color: #c3c3c3;
    height: 120px;
  }

#menu {
  margin-top: 1px;
	background: #ff9f00;
	float: left;
	width: 160px;
}
#menu li {
	font: 12px;
	margin: 2px 8px 2px 8px;
}
#menu li ul {padding-left: 10px; } 
#menu a, #menu a link, #menu a visited {
	background: #ff9f00;  
	color: #3e3e3e;
	display: block;
	text-decoration: none;
}
#menu a:hover, #menu a:active {
	background: #ffc424; 
	color: #3e3e3e;
	text-decoration: underline overline;
}	
</style>
  </head>
  <body>  
  <div id="wrapper">
    <div id="header"></div>
    <div id="menu">
      <ul>
        <li ><a href='#'>Link 1</a></li>
        <li ><a href='#'>Link 2</a>
          <ul>
            <li><a href="#"> Link 2 1</a></li>
            <li><a href="#"> Link 2 2</a></li>
          </ul>
        </li>
        <li ><a href='#'>Link 3 </a></li>
        <li ><a href='#'>Link 4</a></li>
        <li ><a href='#'>Link 5</a></li>
        <li ><a href='#'>Link 6</a></li>
        <li ><a href='#'>Link 7</a></li>
        <li ><a href='#'>Link 8</a></li>
      </ul>  
    </div>
    <div id="content"></div>
    <div id="footer"></div>
  </div> 
  </body>
</html>

danke

EDIT: Was mir da noch auffällt: ich würde gerne das hover auf die ganze Breite des Menüs beziehen, die Listeneinträge jedoch etwas nach rechts versetzt, wie es jetzt im Moment auch schon aussieht, nur gibt es da beim "hovern" den linken orangenen Balken.
 
Zuletzt bearbeitet:
Hallo,

Die Untermenüpunkte sind zunächst mit display:none verborgen.


werden erst bei Mausklick oder bei einfacher Mausberührung mit display:block angezeigt.

LG
 
die frage, die sich mir nun stellt, ist, wo ich das
Code: 
display: block
einfügen muss.

das
Code: 
display: none
habe ich bei
Code: 
#menu li ul
wenn ich
Code: 
#menu a:active {display: block;}
erstelle, dann passiert nichts.
 
Hi,
Code: 
#menu li:active ul {display:block;}
müsste die Regel lauten.

@newbie_php: dein Link hilft auf die letzte Frage überhaupt nicht weiter, da er nur die display-Eigenschaft und ihre Eigenschaftswerte grundsätzlich vorstellt, sich aber nicht mit der Technik für CSS-Menüs beschäftigt.

Euch beiden ist aber wohl nicht bewusst bzw. bekannt, dass sich das Untermenü umgehend wieder schliesst, wenn die Maustaste nach dem Klick losgelassen wird, denn die :active-Pseudoklasse hat nur solange Gültigkeit, wie die Maustaste gedrückt bleibt.

Zum Auf- und Zuklappen des Untermenüs wäre also Javascript vorzuziehen, ansonsten vergraulst du dir deine Seitenbesucher, weil das Menü in dieser Form einfach unpraktikabel ist.
 
danke Maik,
du hast Recht, dass die Untermenüs nur für den Moment des Klicks angezeigt werden.

Javascript wollte ich eigentlich vermeiden.
Auf die Idee mit dem öffnen des Untermüns durch Wählen des Obermnüs bin ich durch diese Seite aufmerksam geworden : http://www.nak-badragaz.ch/news.php
Dort scheint das alles auch ohne Javascript zu funktionieren.

Was für Alternativen gäbe es denn für ein Menü, dass recht viele Unterpunkte hat, damit es nicht zu überladen auf linken seite aussieht.
 
Auf der genannten Seite wird kein Untermenü auf- und zugeklappt, sondern lediglich in der aktuell geöffneten Seite das entsprechende Submenü angezeigt.

Ob dies statisch oder dynamisch mit PHP vonstatten geht, lässt sich anhand des HTML-Codes nicht so recht nachvollziehen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück