10 kostenlose CSS Menüs auf www.styledmenus.com – Teil 1

10 kostenlose CSS Menüs auf StyledMenus.com – Teil 1

Auf der Webseite StyledMenus.com gibt es ein große Anzahl von schönen und eleganten CSS-Menüs zum kostenlosen Download.

Lt. Lizenzbedingung können Sie die Menüs für nicht kommerzielle Zwecke kostenlos und gratis benutzen. Bei einer kommerziellen Verwendung gilt dies auch, jedoch ist hier ein Backlink vorgeschrieben.

Ich habe mir alle Menüs näher angesehen und die meiner Ansicht nach 40 besten heruntergeladen. Ab heute möchte ich Ihnen in einer kleinen Artikel-Serie jeweils 10 CSS-Menüs vorstellen und in meinem Blog zum kostenlosen Download anbieten.

StyledMenüs Nr. 1 – Nr. 10

Klicken Sie auf das gewünschte CSS-Menü und Sie gelangen zur Demo. Zum Download klicken Sie bitte auf den Download-Button unter(!) dem jeweiligen Menü!

Meine Texte und Grafiken sind Copyright © Sura 1 Artworks und unterliegen einer Creative-Commons-Lizenz (Österreichische Version).

Ähnliche Artikel:
29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Free CSS Menüs – www13stylesscss
Free CSS Menus: 14 gratis CSS Menüs

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com

13styles CSS Menus beschäftigt sich mit der Erstellung von CSS-Menüs. Die Menüs basieren alle auf Listen, haben nur sehr wenige KB, sind sehr leicht in Ihre Webseite einzubauen und wurden in allen gängigen Browsern erfolgreich getestet. Die neuesten Entwürfe sehen Sie in der CSS Menu Gallery. Das Copyright läuft unter der Creative Commons License / Attribution-Share Alike 3.0 United States.

Sie finden derzeit auf der Webseite von 13styles CSS Menus insgesamt 16 verschiedene CSS Menüs, welche Sie kostenlos herunterladen können.

Ich habe mir die einzelnen Menüs einmal genauer angesehen und  dabei bemerkt, dass von einigen dieser CSS-Navigationen mehrere Farb-Variationen existieren. Somit ergibt sich eine tatsächliche Gesamtsumme von 29 CSS-Menüs!

Daraufhin habe ich  alle heruntergeladen. Nach entsprechender Bearbeitung möchte ich Ihnen hier insgesamt 29 CSS-Menüs vorstellen und zum kostenlosen Download anbieten:

Demo und Download aller 29 CSS-Menüs:

1. Gewünschtes Menü anklicken: Live-Demo.

2. Download-Button anklicken: Herunterladen im *zip-Format

Meine Texte, Grafiken und Downloads sind Copyright © Sura 1 Artworks und unterliegen einer Creative-Commons-Lizenz (Österreichische Version).

Ähnliche Artikel:

7 kostenlose CSS-Navigationsmenüs in Reiteroptik
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
Free CSS Menus: gratis CSS Menüs
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS
Flexible CSS-Buttons mit 3 Hintergrund-Grafiken

7 kostenlose CSS-Navigationsmenüs in Reiteroptik

Reiternavigation – 7 kostenlose CSS-Menüs in Reiteroptik

Navigationsmenüs in Reiteroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben werden. Im meinem Tutorial soll ein Registerkartenmenü ohne Grafiken, allein mit HTML und CSS, erstellt werden. Das  Menü wird oben auf der Seite platziert, der Inhalt schließt sich darunter an.

Fertiges Beispiel:

[fertiges Navigationsmenü ansehen: Grafik anklicken!]

Aufbau des Navigationsmenüs:

Punkt 1:

Das HTML-Gerüst des Menüs besteht aus einer ungeordneten Liste, die sich in einem <div>-Element befindet.

<div id="box1">
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>
<div id="box2">
<p>Inhalt>/p>
</div>

Um die einzelnen Listenpunkte waagerecht anzuordnen, werden diese mit display:inline dazu gebracht, sich wie Inline-Elemente zu verhalten; es erfolgt kein Umbruch nach den <li>-Elementen. Die <a>-Elemente werden mit display:block als Blockelemente dargestellt. Damit sie sich auch waagerecht anordnen, wird die Eigenschaft float:left eingesetzt. Das <div>-Element wird ebenfalls mit float:left und der Breitenangabe 100% formatiert. Diese Formate sind nötig, um das <div>-Element aufzuspannen. Würden sie fehlen, lägen die Menüpunkte optisch unterhalb des <div>-Elements. Statt das Format float einzusetzen, könnte auch mit einer Höhenangabe für das <div>-Element gearbeitet werden. Die Grunddarstellung des Menüs ist somit hergestellt, jetzt müssen nur noch Hintergründe, Schriftfarben, Abstände etc. angepasst werden. Der  CSS-Code sieht bisher folgendermaßen aus:

body {
margin:0;
padding:0;
}
#box1 {
float:left;
width:100%;
background:#808080;
}
#box1 ul {
margin:0;
padding:50px 10px 0 50px;
list-style:none;
}
#box1 li {
display:inline;
margin:0;
padding:0;
}
#box1 a {
float:left;
display:block;
background:#bbbbbb;
color:#ffffff;
font-weight:bold;
margin:0 4px 0 0;
padding:10px 10px 5px 10px;
text-decoration:none;
}
#box1 a:hover {
color:#000000;
background:#e6e6e6;
}
#box2{
padding:10px 50px 10px 50px;
margin:0;
clear:left;
}

Zu beachten ist noch, dass das erste Element unterhalb des Menüs, in dem Fall <div id=“box2″>, mit dem Format clear:left versehen wird, um den Umfluss des Menüs zu stoppen.

Navigation Punkt 1:

[Navigationsmenü Punkt 1 ansehen: Grafik anklicken!]

Punkt 2:

Möchte man die aktuell aufgerufene Seite innerhalb des Menüs kennzeichnen, kann dafür eine zusätzliche Klasse angelegt werden. Diese Klasse wird im HTML-Code dem entsprechenden Link zugeordnet.

<div id="box1">
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a class="aktiv" href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>

Im Beispiel heißt die Klasse aktiv. Im CSS-Code wird diese Klasse ebenfalls angelegt und mit den gewünschten Formaten versehen.

#box1 a.aktiv{
color:#000000;
background:#ffffff;
}

Navigation Punkt 2:

[Navigationsmenü Punkt 2 ansehen: Grafik anklicken!]

Punkt 3:

Es ist auch möglich, neben einer farblichen Gestaltung des aktiven Links das räumliche Erscheinungsbild anzupassen. Um diesen Effekt zu erreichen, braucht lediglich die Klasse .aktiv um entsprechende Padding- und Margin-Werte ergänzt zu werden.

#box1 a.aktiv{
color:#000000;
background:#ffffff;
margin-top:-10px;
padding-bottom:15px;
}

Navigation Punkt 3:

[Navigationsmenü Punkt 3 ansehen: Grafik anklicken!]

Der negative Wert in der Eigenschaft margin-top sorgt dafür, dass der Menüpunkt 10 px nach oben versetzt wird. Der Wert für padding-bottom errechnet sich aus dem positiven Wert von margin-top und dem padding-bottom-Wert, den das <a>-Element im Selektor #box1 a zugeordnet bekommen hat (5 px). Das Format padding-bottom sorgt nun dafür, dass sich der Menübutton bis zur Grundlinie des Menüs erstreckt.

Punkt 4 = fertiges Beispiel:

[Navigationsmenü Punkt 4 ansehen: Grafik anklicken!]

Wie der letzte Screenshot zeigt, wurde ein ähnliches Format auch auf das Pseudoformat :hover angewandt. Bei Mausberührung hüpft der Menüpunkt 5 px nach oben.

#box1 a:hover {
color:#000000;
background:#e6e6e6;
margin-top:-5px;
padding-bottom:10px;
}

Punkt 5 :

Das fertige Navigationsmenü im Beispiel ist so angelegt, dass es bei einem zu kleinen Fenster umbricht, das Menü erzwingt keinen Scrollbalken im Browserfenster.

Möchte man das Umbrechen verhindern, muss man das <a>-Element mit einer festen Breite versehen. Der Wert für die Breite sollte in der Einheit em angegeben werden, damit das Element in der Breite mit dem im Browser eingestellten Schriftgrad skaliert werden kann. Da die <a>-Elemente in der Breite nicht formatiert werden, richtet sich die angezeigte Breite nach der Länge des darin enthaltenen Textes. Sollen alle Buttons in der gleichen Breite dargestellt werden, kann diese im Selektor #box1 a festgelegt werden, und auch hier sollte die Einheit em genutzt werden, um Skalierbarkeit sicherzustellen.

Abschließende Bemerkung:

Um Ihnen die Funktionsweise der Pseudo-Klasse .aktiv anschaulich vor Augen zu führen, habe ich das fertige Beispiel als kleine Webseite (7 verschiedene Farben) mit 6 einzelnen Unterseiten ausgeführt und diese miteinander verlinkt.

7 Farbvarianten

Jedes einzelne Navigationsmenü kann einzeln herunter geladen werden und wird in Form einer *zip-Datei ( 6,50 KB) kostenlos zur Verfügung gestellt. Meine Texte und Grafiken sind Copyright © Sura 1 Artworks und unterliegen einer Creative-Commons-Lizenz (Österreichische Version).

1. Grau / Grey

   Beispiel Grau/Grey: Zip_Datei (6,50 KB)
 

2. Blau / Blue

   Beispiel Blau/Blue: Zip_Datei (6,50 KB)
 

3. Grün / Green

   Beispiel Grün/Green: Zip_Datei (6,50 KB)
 

4. Orange / Orange

   Beispiel Orange/Orange: Zip_Datei (6,50 KB)
 

5. Rot / Red

   Beispiel Rot/Red: Zip_Datei (6,50 KB)
 

6. Violett / Pink

   Beispiel Violett/Pink: Zip_Datei (6,50 KB)
 

7. Gelb / Yellow

   Beispiel Gelb/Yellow: Zip_Datei (6,50 KB)
 

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS
CSS-Menüs ohne Einsatz von Listenelementen
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
Free CSS Menüs – www13stylesscss
Free CSS Menus: gratis CSS Menüs

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

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.

Download:

Menü 001 – 003
Menü 004 – 006
Menü 007 – 009

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 004-006 (mit 2x background-image+background-color; 10,1KB – Zipfile)

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

Ä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

Free CSS Menus: 14 gratis CSS-Menüs

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Free CSS Menüs – www13stylesscss
Navigations-Menü mit Button-Effekt [13. November 2008]
Formatierung von horizontalen Navigationsleisten mit CSS

Auf der Webseite www.exploding-boy.com/ habe ich folgende Free CSS Vertical Menu Designs entdeckt. Sie können diese ohne Einschränkung frei verwenden. Christopher Ware aus Birmingham, Alabama (USA) als Inhaber obiger Webseite stellt in einem Zitat fest:

After receiving several email requests from visitors asking for vertical menus I decided to create 14 free vertical menu designs. You may download the entire set and use any way you see fit. They can be used for commercial or private use. Have fun with all the menus.

Ich habe die 14 Free CSS Vertical Menus wie folgt bearbeitet:

1. jedes Menü erhielt im body eine Hintergrundfarbe
2. die vertikalen Abstände zwischen den Listenelemente li a wurden teilweise verändert
3. die CSS-Formatierung wurde zur Gänze im Kopfbereich (head) untergebracht
4. die Download-Datei (zip) besteht aus der html-Datei und der Grafik-Datei
   

Bemerkungen zu Beispiel 7:

CSS-Menüs: Vergleich zwischen Tab Menu 7 und Tab Menu 7_1

Im Beispiel „Tab Menu 7″ gibt es zwischen den einzelnen Menüpunkten einen Abstand von „margin-bottom:2px;„
Das Beispiel „Tab Menu 7_1″ hat diesen Abstand nicht!

Experimentieren Sie mit dem vertikalen Abstand zwischen den Menüpunkten und passen Sie das CSS-Menü an, wie Sie es brauchen

Zu Ansehen klicken Sie bitte auf das betreffende Menü:

Download hier:

Menü 1 , Menü 2 , Menü 3 , Menü 4 , Menü 5 , Menü 6 , Menü 7 , Menü 8 , Menü 9 , Menü 10 , Menü 11 , Menü 12 , Menü 13 , Menü 14

Ich hoffe, Sie finden hier, was Sie suchen. Viel Spaß mit den FREE CSS VERTICAL MENUS

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Free CSS Menüs – www13stylesscss
Navigations-Menü mit Button-Effekt [13. November 2008]
Formatierung von horizontalen Navigationsleisten mit CSS