Navigation erstellen mit Liste + CSS

Mit einem einfachen CSS-Skript kann ich eine Jimdo-Liste mit händisch vergebenen Verlinkungen als "eigene Navigation" formatieren:

Liste in Jimdo Text-Element:

  • SEITE 1
  • SEITE 2
  • SEITE 3
  • SEITE 4

Inhalt Text-Element (html-Modus) 

<div class="h-menu">

<ul>

<li>
<a href="/forum/navigation/" title="Navigation">
<span style="">SEITE 1</span>
</a>
</li>

<li>
<a href="/forum/navigation/" title="Navigation">
<span style="">SEITE 2</span>
</a>
</li>

<li>
<a href="/forum/navigation/" title="Navigation">
<span style="">SEITE 3</span>
</a>
</li>

<li>
<a href="/forum/navigation/" title="Navigation">
<span style="">SEITE 4</span>
</a>
</li>

</ul>

</div>

(...div und class="h-menu" im html-Modus händisch hinzufügen)

CSS-Skript:

/*eigene horizontale Navigation (.h-menu)
-----------------------------------------------------*/
.h-menu ul {
margin:5px;
padding:5px;
list-style:none;
display:inline
}
.h-menu {/*float:right;*/
width:350px;
margin: 0 auto;
}
.h-menu li {
display:inline-block
}
.h-menu a {
text-transform: uppercase;
text-decoration: none;
border: 1px solid #ccc;
/*  border-bottom: 2px solid transparent;*/
font-size: 14px;
color: #000;
display: block;
min-width: 35px;
padding: 10px;
background-color: transparent;
margin: 5px 0;
border-radius: 5px;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease
}
.h-menu .current a, .h-menu a:hover {
border-bottom:2px solid #000;
background-color: #666;
color: white;
}

Ergebnis:

Black Background (absolut positioniert):

sh.: http://redesign-berlin.xobor.de/t113f2-Zusaetzliche-Navigationsebene.html#msg554

Download
...in Text-Element einfügen und neu verlinken
out-in-the-sky.txt.css
Cascading Style Sheet Datei 472 Bytes
Download
Download
...in Head-Bereich einsetzen
out-in-the-sky.css
Cascading Style Sheet Datei 1.6 KB
Download