Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen

Posted by sura1 - 4. November 2008

04nov1

Bookmark and Share

9 kostenlose CSS-Menüs – 9 Free CSS Menues

Ich möchte Ihnen in meinem heutigen Artikel 9 horizontale CSS-Menüs vorstellen. Jeweils 3 Menüs befinden sich in einer Datei und werden unten weiter genauer vorgestellt.

Der Quelltext für die einzelnen Menüpunkte ist in allen 9 horizontalen Menüs der gleiche. Ich nehme dafür einen div-Container mit der Bezeichnung menue001 – menue009. In diesem befinden sich dann die einzelnen Hyperlinks <a>…..</a> mit den entsprechenden Menüpunkten. Es kommen in meinen Beispielen  k e i n e Listenelemente zum Einsatz – ich arbeite einzig und allein mit der CSS-Anweisung float.

HTML-Quellcode: (hier für CSS-Menü 001)

<div class="menue001">
<h3>CSS-Menue 001</h3>
<a href="#">HOME</a>
<a href="#">ARCHIV</a>
<a href="#">BILDERGALERIE</a>
<a href="#">DOWNLOADS</a>
<a href="#">PROFIL</a>
<a href="#">KONTAKT</a>
</div> <!-- end menue001 -->

CSS-Datei: (Beispiel CSS-Menü 001)

/* Menue 001 */

.menue001 {
  margin: 10px 0 0 250px;
  height: 33px;
  float: left;
  padding: 10px 10px 40px 10px;
  border: 1px solid #000;
  background-color: #fff;
}
.menue001 a {
  width:auto !important;
  padding: 10px;
  float: left;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  margin-right: 2px;
  background-image: url(images/blue.gif);
  background-repeat: repeat-x;
}
.menue001 a:hover {
  color: #000000;
  background-image: url(images/green.gif);
  background-repeat: repeat-x;
}

Bemerkung zur CSS-Anweisung !important (bei width: auto !important)

Die Wichtigkeit einer Deklaration kann in der Notierung durch den Zusatz ‚ !important ‚ angehoben werden. Eine zusätzlich mit !important gekennzeichnete Deklaration hat Vorrang gegenüber einer normal angegebenen Deklaration!

Sehen Sie die genauen Erklärungen zu diesem Themenbereich in meinem Artikel CSS Menüs ohne Einsatz von Listenelementen (23. Oktober 2008) oder auf der Webseite www.cssplay.co.uk/menus/tutorial.html von Stu Nicholls.

CSS-Menues 001-003 (mit 2x background-image; 5,6KB – Zipfile)

css-menues-001-003

button-viewdemo button-download

CSS-Menues 004-006 (mit 2x background-image+background-color; 10,1KB – Zipfile)

css-menues-004-006

button-viewdemo button-download

CSS-Menues 007-009 (mit 2x background-color; 1,5KB – Zipfile)

css-menues-007-009

button-viewdemo button-download

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Free CSS Menüs – www13stylesscss
Free CSS Menus: 14 gratis CSS Menüs
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: