CSS Gif-Tab Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

CSS Gif-Tab Menü

Scripte > Menü Navigation


Ein einfaches vertikales Tab-Menü auf CSS. (UTF-8)

CSS

Ein einfaches vertikales Menü, das Imagedateien zur Grundlage hat und nur als Hauptmenü dient.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "
cs_giftab-menu", das so übernommen werden kann.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Browser


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="cs_giftab-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<ul class="menu">
<li><a href="#x"><em></em><b>M e n ü<br /><br />1</b></a></li>
<li><a href="#x"><em></em><b>M e n ü<br /><br />2</b></a></li>
<li><a href="#x" class="selected"><em></em><b>M e n ü<br /><br />3</b></a></li>
<li><a href="#x"><em></em><b>M e n ü<br /><br />4</b></a></li>
<li><a href="#x"><em></em><b>M<br />e<br />n ü<br /><br />5</b></a></li>
<li><a href="#x"><em></em><b>M e n ü<br /><br />6</b></a></li>
<li><a href="#x"><em></em><b>M e n ü<br /><br />7</b></a></li>
</ul>



Variante 2

Code für das HTML-Objekt:


<? include "cs_giftab-menu/index.html"; ?>


Code der CSS-Datei (menu_style.css):


.menu {list-style:none; padding:10px 0 40px 25px; margin:0; width:25px; background:url(img/back.gif); border-top:1px solid #593; border-bottom:1px solid #593;}
.menu li {display:block; width:25px; margin-bottom:-29px;}
.menu li a {text-decoration:none; color:#fff; font-size:11px; line-height:10px;}
.menu li a em {display:block; width:25px; height:29px;background:url(img/vertical.gif) left top; font-style:normal;}
.menu li a b {display:block; width:15px; padding:0 3px 29px 7px; text-align:center; text-decoration:none; background:url(img/vertical.gif) left bottom; color:#fff;}

.menu li a:hover {border:0; position:relative; z-index:100; cursor:pointer;}
.menu li a:hover em {background-position: center top;}
.menu li a:hover b {background-position: center bottom; color:#660;}

.menu li a.selected, .menu li a:hover.selected {border:0; position:relative; z-index:200; cursor:default;}
.menu li a.selected em, .menu li a:hover.selected em {background-position: right top;}
.menu li a.selected b,.menu li  a:hover.selected b {background-position: right bottom; color:#242;}

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 2 Online
 » 3 Heute
 » 1053 Woche
 » 3754 Monat
 » 61269 Jahr
 » 237569 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü