Die Übersichtlichkeit der Seite wird durch Javascript erhöht. Ist dies aktiviert, werden die Texte unter den Überschriften durch Anklicken der Überschriften ein- und ausgeblendet.
Um möglichst viel Menü mit möglichst wenig Platzaufwand anzubieten, bietet sich ein Dropdown-Menü an. Dieses zu erstellen ist ohne Programmierung einfach durch die Anwendung von CSS möglich. Wie das genau funktioniert möchte ich hier beschreiben.
Für das Hauptmenü wird zunächst eine einfache unorderd-List mit den verschiedenen Listen punkten zwischen den <ul> </ul> -Tags. Die Listenpunkte enthalten Ihrerseits die Links auf die späteren Inhalte. Für die erste Erstellung des Menüs werden zunächst dummy-Links erstellt die nur aus dem #-Zeichen bestehen. Den ul-Elementen wird noch eine Klasse navmenu zugeordnet, um später einfacher mit CSS darauf zugreifen zu können. Das Hauptmenü sieht dann in Beispielsweise so aus:
<ul class="navmenu"> <li> <a href="#">Punkt1</a> </li> <li> <a href="#">Punkt2</a> </li> <li> <a href="#">Punkt3</a> </li> <li> <a href="#dd.php?show=impressum>Impressum</a> </li> </ul>
Ein Untermenü besteht zunächst auch nur wieder aus einer unorderd-Liste wie das Hauptmenü. Diese Liste wird in einen Listenpunkt des Hauptmenüs eingebettet. Um das Untermenü später mittels CSS leichter ansprechen zu können, geben wir dem <ul>-Element eine Klasse. Um anzuzeigen, dass ein Untermenü folgt, wird ein kleiner Pfeil eingebettet, bevor das eigentliche Untermenü folgt. in diesem Fall ist es ein Pfeil nach unten, dieser wird durch ▼ representiert und über <span class ="darrow">▼</span> eingebettet. Dies beim obigen Punkt2 eingebettet sähe dann zum Beispiel folgender Maßen aus:
<li> <a href="#">Punkt2</a>
<ul class="sub1">
<span class="darrow">▼</span>
<li> <a href="#">Punkt2.1</a></li>
<li> <a href="#">Punkt2.2</a></li>
<li> <a href="#">Punkt2.3</a></li>
</ul>
</li>
Um noch ein Untermenü zum Untermenü anzubieten, wird mit einem Listenpunkt eines Untermenüs genau so verfahren, wie zuvor mit dem Hauptmenüpunkt. Es wird also eine weitere unorderd-List in eines der Listenelemente des Untermenüs eingebetet und diesem dann die Klasse sub2 zugewiesen. Auch hier wird vor dem eigentlichen Untermenü ein Pfeil eingebetett, der für die Richtung rechts mit <span class="rarrow">▶</span> angegeben wird.
Abstände für alle Elemente aus null setzen
Zunächst stören die Abstände. Um diese zu setzten bzw. auf Null zu stellen werden für alle Elemente (Selektor *) die Eigenschaften margin und padding jeweils mit den Wert Null belegt:
#+BEGINN_SRC: *{ margin: 0px; padding: 0px; }
Body mit einigen Voreinstellungen belegen
Mit dem Selector body wird nun allen darin eingebetteten Elementen einige gewünschte Standardeigenschaften zugewiesen:
#+BEGINN_SRC: body { font-family: verdana; bachground-color : #ABC; padding: 50px; }
Die Überschrift soll zentriert und unterstrichen werden. Dafür wird mit
h1 {
text-align: center;
boder-bottom: 2px solid #009;
margin-bottom: 50px;
}
Das Zurücksetezen der Abstände war ein erster Schritt. Dadurch sind nun alle Elemente untereinander angeordnet. Nun soll das Menü daraus geformt werden.
Dies ist der Down-Pfeil, also Pfeil nach unten. Dieser soll im Butten des Hauptmenüelemets angezeigt werden um zu verdeutlichen, dass sich hier ein Untermenü versteckt. Dieser wird hier wie folgt designd:
Oberkante des zugehörigen Listenelementes
die rechte Kante des zugehörigen Listenelements
.darrow{
font-size: 11pt;
position: absolut;
top: 5px;
right: 4px;
}
Mit diesem Selector wird jetzt der Pfeil nach rechts designd, der auf dem sub1-Menüpunkt nach rechts zeigen soll, um anzuzeigen, dass ein Untermenü folgt:
Da es im späteren Verlauf der Seite ggf. weitere Listen geben kann, die sich nicht wie das Menu verhalten sollen werden die ul-Elemente über ihre ID bzw ihre Klasse angesprochen. Diesem Selector wird nun mitgegeben, dass
ul#navmenu, ul.sub1, ul.sub2{
list-style-type: none;
font-size: 9px;
}
#+END:SRC
*** ul#navmenu li
Um sich zunächst anzuschauen, welchen Bereich die
Elemente auf der Seite einnehmen, kann mann die
Eigenschaft outline: 1px solid red; nutzen.
Daurch ist zu erkennen, dass derzeit alle
Listenpunkte untereinander stehend jeweils den
kompletten Bildschirm in der Breite ausnutzen.
Um das zu ändern wird nun zunächst für die
Listenpunkte des Hauptmenüs mit:
- width: 125px; :: eine Breite von 125 Punkten
festgelegt
- text-align: center; :: Die Listentexte innerhalb
dieser Breite zentriert.
- position: relative; :: festgelegt, das sich die
Positionsbeschreibungen relativ auf das
Vorgängerelement beziehen.
- float: left; :: ordnet die Listenpunkte nicht
mehr untereinander sondern
direkt fließend hintereinander
von links nach rechts an.
- margin-right: 4px :: Sorgt für 4 Punkte Abstand
zwischen den Listenpunkten des Hauptmenüs
Danach sind die Listenelemente des Hauptmenus
nebeneinander angeordnet und ihre Untermenüs
befinden sich direkt unter Ihnen mit der selben Breite.
ul#navmenu li{
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}