CSS Tab Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

CSS Tab Menü

Scripte > Menü Navigation


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

Ein weiteres ganz einfaches ausbaubares horizontales Menü, das Imagedateien zur Grundlage hat.
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_tab-menu", das so übernommen werden kann. Zusätzlich befinden sich im Unterverzeichnis "img" noch 10 Paar weiter Imagedateien zur Gestaltung. Die CSS-Datei muss dann entsprechend angepasst werden.
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_tab-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<div id="tabs">
<ul>
<li><a href="#x"><span>Hauptmenü 1</span></a></li>
<li><a href="#x"><span>Hauptmenü 2</span></a></li>
<li><a href="#x"><span>Hauptmenü 3</span></a></li>
<li><a href="#x"><span>Hauptmenü 4</span></a></li>
<li><a href="#x"><span>Hauptmenü 5</span></a></li>
<li><a href="
#x"><span>Hauptmenü 6</span></a></li>
</ul>
</div>



Variante 2

Code für das HTML-Objekt:


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


Code der CSS-Datei (menu_style.css):


   #tabs {
     float:left;
     width:100%;
     background:#efefef;
     font-size:93%;
     line-height:normal;
     border-bottom:1px solid #666;
     }
   #tabs ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
     }
   #tabs li {
     display:inline;
     margin:0;
     padding:0;
     }
   #tabs a {
     float:left;
     background:url("img/tableftF.gif") no-repeat left top;
     margin:0;
     padding:0 0 0 4px;
     text-decoration:none;
     }
   #tabs a span {
     float:left;
     display:block;
     background:url("img/tabrightF.gif") no-repeat right top;
     padding:5px 15px 4px 6px;
     color:#666;
     }
   
/* Beginn IE5-Mac tollerieren \*/
   #tabs a span {float:none;}
   
/* Ende IE5-Mac tollerieren */
   #tabs a:hover span {
     color:#FFF;
     }
   #tabs a:hover {
     background-position:0% -42px;
     }
   #tabs a:hover span {
     background-position:100% -42px;
     }

   #tabs #current a {
     background-position:0% -42px;
     }
   #tabs #current a span {
     background-position:100% -42px;
     }


Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



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

© 2009 - 2018




  Besucher Statistik
 » 5 Online
 » 16 Heute
 » 1091 Woche
 » 3303 Monat
 » 47064 Jahr
 » 293642 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü