Die Navigation besteht aus zwei Codes. Einmal der
CSS-Code für das Aussehen der Navigation und einmal der html-Code für den Aufbau der Navigationsleiste.
Beginnen wir mit dem CSS-Code.
------------------------------------------------------------------------------------------------
Ab hier nur für Nutzer von NetObjects Fusion 9 und niedriger ------------------------------------------------------------------------------------------------
Nutzer die bis einschließlich NOF9 verwenden, kopieren den folgenden Code und fügen ihn ins
Masterrahmen-html ihres Projekts zwischen die Head-Tags ein.
Dazu drückt ihr einmal die Taste F10 auf der Tastatur, und klickt dann auf den html-Button der Eigenschaftenpalette. Es öffnet sich ein Fenster, Ihr aktiviert den Reiter „Zwischen
Head-Tags” und fügt im unteren Teil des Fensters den Code ein. Die Eingabe bestätigt Ihr mit dem OK-Button.
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
/* Formatierung der Standard-Schaltflächen */
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
background: #617F8A;
}
/* Formatierung der Klapp-Schaltflächen bei mousover*/
li:hover li a:hover {
background: #95A9B1;
}
</style>
------------------------------------------------------------------------------------------------
Ab hier nur für Nutzer von NetObjects Fusion 10 und höher------------------------------------------------------------------------------------------------
Nutzer ab der NetObjectsFusion - Version 10 kopieren den folgenden Code, wechseln in die Designansicht, aktivieren dort den Reiter CSS und fügen den kopierten Code am Ende des vorhandenen Codes ein.
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
/* Formatierung der Standard-Schaltflächen */
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
/* Formatierung der Standard-Schaltflächen bei mousover*/
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
/* Formatierung der Klapp-Schaltflächen*/
li:hover a {
background: #617F8A;
}
/* Formatierung der Klapp-Schaltflächen bei mousover*/
li:hover li a:hover {
background: #95A9B1;
}
Die wichtigsten Bereiche habe ich mit entsprechenden Kommentaren versehen, so dass Ihr genau sehen könnt, an welcher Stelle Ihr ggf. Farben oder Schrift Eurer Schaltflächen ändern könnt.