Menue-Leiste: oben …
Eine Leiste am oberen Bildrand bietet sich insbesondere für Webseiten mit überschaubaren Inhalten an. Auch Untermenues lassen sich damit realisieren. Bei Webseiten mit längeren Textbeiträgen ist zu überlegen, ob die Menue-Leiste statisch am Seitenkopf bleibt oder beim Scrollen mitlaufen soll.
| Art: | Code: |
|---|---|
| CSS: Menue 1 |
nav { background-color:#ddd; border-width:2px 0; border-style:solid; border-color:#fff; }
nav ul { padding:0; margin:0; list-style:none; position:relative; z-index:1; }
nav ul li { display:inline-block; width:9em; }
nav a { line-height:2.5em; padding:0 0.5em; text-decoration:none; color:#000; display:block; }
nav a:hover { background-color:#999; color:#fff; }
nav ul ul li { background-color:#ddd; }
nav ul ul { display:none; position:absolute; top:2.5em; }
nav ul ul li { display:list-item; position:relative; }
nav ul ul a { line-height:2.5em; border-top:2px solid #fff; }
nav ul li:hover > ul { display:inherit; }
nav li > a:after { content:''; }
nav li > a:only-child:after { content:''; }
|
| HTML: Menue 1 |
<nav>
<ul>
<li><a href="#">Thema 1</a>
<li><a href="#">Thema 2</a>
<ul>
<li><a href="#">Kapitel 2-1</a>
<li><a href="#">Kapitel 2-2</a>
</ul>
<li><a href="#">Thema 3</a>
</ul>
</nav>
|
Im Beispiel (oben) wird auf eine Lösung gesetzt, die auf die ausschließliche Steuerung mit Hilfe einer Liste abzielt. Im Beispiel (unten) wird eine Kombination von Buttons und Listen für die Untermenüs verwendet.
| Art: | Code: |
|---|---|
| CSS: Menue 2 |
nav { overflow:hidden; background-color:#666; column-span:all; margin:0 0; line-height:3em; }
nav a { float:left; color:#fff; text-align:center; padding:0 2em; text-decoration:none;}
nav a:hover, .menue:hover .dropbtn { background-color:#ccc;}
nav button { padding:0 0.5em; width:9em; text-align:left; border:none; outline:none; color:white; background-color:inherit; }
nav .menue { float:left; overflow:hidden;}
nav .submenue { display:none; position:absolute; background-color: #f9f9f9; min-width:9em; box-shadow:0px 4px 8px 0px #ccc; z-index:1; }
nav .submenue a { color:black; line-height:2.5em; padding:0 0.5em; text-decoration:none; float:none; display:block; text-align:left; }
nav .submenue a:hover { background-color:#ddd; }
nav .menue:hover .submenue { display:block; }
|
| HTML: Menue 2 |
<nav>
<div class="menue">
<button>Thema 1</button>
<div class="submenue">
<a href="#…">Kapitel 1-1</a>
<a href="#…">Kapitel 1-2)</a>
</div>
</div>
<div class="menue">
<button>Thema 2</button>
<div class="submenue">
<a href="#…">Kapitel 2-1</a>
<a href="#…">Kapitel 2-2</a>
<ul>
<li><a href="#…">Sub 2-2-1</a>
<li><a href="#…">Sub 2-2-2</a>
</ul>
<a href="#…">Kapitel 2-3</a>
</div>
</div>
<div class="menue">
<button>Thema 3</button>
<div class="submenue">
<a href="#…">Kapitel 3-1</a>
<a href="#…">Kapitel 3-2</a>
</div>
</div>
</nav>
|