Teil 1 Teil 2
Reisebericht Bolivien Kurzübersicht Bolivien ausführlich

Anleitung Menü Dropdown Tabs Teil2

Schritt 3 NPage-Design-Style erstellen

Der Design-Style definiert den Rahmen und damit auch das Aussehen der Textseiten und übrigen Inhalte.

Jeder Design-Style besteht aus Header und Footer

Design-Style-Header

Zunächst die Anfangseinstellungen und die Links zur JavaScript- und zur CSS-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Beispiel für den Einbau eines Drop-Down-Tab-Menüs bei NPage</title>
<!--Hier wird das für alle Varianten gleiche JavaScript eingebunden-->
<script type="text/javascript" src="https://file1.hpage.com/001581/42/html/dropdowntabs.js">
</script>
<!--Hier wird die in den einzelnen Varianten unterschiedliche CSS-Datei eingebunden-->
<link rel="stylesheet" type="text/css" href="https://file1.hpage.com/001581/42/html/glowtabs.css" />
</head>

Die rot und fett dargestellten Teile müssen wiederum angepasst werden.

Jetzt der Teil in dem die Menüstruktur definiert wird:

<body>
<!--Jetzt werden die einzelnen Menüpunkte definiert-->
<!--Zuerst die Hauptmenüpunkte-->

<div id="glowmenu" class="glowingtabs">
<ul>
<li><a href="http://eigenes-design.npage.de" title="Zur Startseite"><span>Home</span></a></li>
<li><a href="" title="Anleitung zum Menüeinbau" rel="dropmenu1_d"><span>Anleitung</span></a></li>
<li><a href="" title="Mein Bolivien-Webseiten" rel="dropmenu2_d"><span>Bolivien</span></a></li>
<li><a href="http://ratgeber.bpgs.de" title="Ratgeber-Seiten"><span>Ratgeber</span></a></li>
</ul>
</div>
<br style="clear: left;" />
<br class="IEonlybr" />


<!--Untermenüpunkte für Anleitung -->
<div id="dropmenu1_d" class="dropmenudiv_d">
<a href="http://eigenes-design.npage.de/anleitung_menue_dropdown_tabs_teil1_92221376.html">Teil 1</a>
<a href="http://eigenes-design.npage.de/anleitung_menue_dropdown_tabs_teil2_93342389.html">Teil 2</a>
</div>


<!--Untermenüpunkte für Anleitung -->
<div id="dropmenu2_d" class="dropmenudiv_d" style="width: 150px;">
<a href="http://reisebericht.npage.de">Reisebericht</a>
<a href="http://bolivien.npage.de">Bolivien Kurzübersicht</a>
<a href="http://bolivien.bpgs.de">Bolivien ausführlich</a>
</div>

Hier sind natürlich sämtliche Linkadressen und Titel anzupassen. Ausserdem ist darauf zu achten, dass die grün und fett markierten Schlüsselworte übereinstimmen.

Zum Abschluss muss noch ein kleines JavaScript eingefügt werden:

<!--Zum Abschluss noch ein kurzes JavaScript zur Initialisierung-->
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("glowmenu", "auto")
</script>

Design-Style-Footer

Der Design-Style-Footer enthält standrdmäßig schon Anweisungen, die übernommen werden.

</body>
</html>

Schritt 4 NPage-Design-Style zuordnen

Abschließend wird allen Textseiten, auf denen das Menü erscheinen soll der Design-Style zugeordnet.