Design Clean
    >> Tipps zum anpassen

Slide Menü im Header

Ein Slide-Menü im Header

Ohne Javascript. Bei Mauskontakt fahren die Seitenlinks heraus (siehe Header oben)
Tutorial wurde Donnerstag 19:04 Uhr editiert und 2 kleine Tipp-Fehler beseitigt

Ein Tutorial für fortgeschrittene User, da hier einige Anpassungen selbst vorgenommen werden müssen.
Die Position ist abhängig von der Breite des Sliders. Und die ist abhängig von der Anzahl der Links.
Wird 1 Link entfernt, stimmt die Breite nicht. Wird die Breite angepasst, stimmt nun die Position nicht.
Da hier jeder User andere Wünsche hat, kann es keinen fertigen Code für alle Nutzer geben.

Schritt 1: Um das Design legen wir ein DIV

Damit wird verhindert, das Slider seine Position ändert, wenn Broswer-Fenster verkleinert wird !
Einfügen im Feld "Text ÜBER Design"

<div style="width:1050px; overflow:hidden; margin:auto;">

natürlich müssen wir dieses DIV auch wieder schliessen. im Feld "Text UNTER Design":

 </div>

Wenn Du einen Footer im "Text UNTER Design" verwendest: Das </div> VOR dem Footer-Code einfügen.



Schritt 2: HTML-Code für das Slide-Menü

Das Feld, welches die Links als Inhalt hat und Ein-und Ausfahren wird.
Füge diesen HTML-Code ebenfalls im "Text ÜBER Design" ein,
gleich nach dem ersten DIV, das wir zu Beginn bei "Schritt 1" eingefügt haben

<div id="headerslider_1">
<div id="kontakt">
<a href="/Kontakt.htm">Kontakt</a>
<a href="/G.ae.stebuch.htm">Gästebuch</a>
<a href="/Impressum.htm">Impressum</a>
</div>
</div>


Schritt 3: Der CSS Code für Aussehen und Sliden

Hier kommt der Abschnitt, an dem viel probiert werden muss, wenn Ihr die Anzahl der Links ändert.
Einfügen im Feld "Eigener Head -Inhalt", vor dem --> </style>
- Hier eine Beispielgrafik Wie füge ich den CSS-Code ein ?
- Du hast bereits CSS-Codes eingefügt ? Wo platziere ich den neuen CSS-Code ?

#headerslider_1 {
   width: 230px; /* Breite, welche die Links brauchen ausgefahren */
   height: 35px;
   overflow: hidden;
   top: 120px; /* Position des Sliders im Header */
   margin-left: 775px; /* Position des Sliders im Header */
   position: absolute; 
   z-index: 2;}

/* Das Feld für die 3 Links */
#kontakt {
   background-image: url(//img.webme.com/pic/c/clean-test/mail.png);
   background-color: #FFFFFF; /* weißer Hintergrund */
   background-repeat: no-repeat; /* = Icon nicht wiederholen */
   background-position: 5px 2px; /* = Icon Position */
   width: 220px; /* Breite ! anpassen, wenn keine 3 Links */
   padding:5px 5px 5px 40px;
   margin-left: 190px; /* Position eingefahren */
   transition: all 0.5s linear; /* weicher Übergang - Sliden */
   border: 1px solid #fff;
   border-radius: 8px 0px 0px 8px; /* gerundete Ecken */
   overflow: hidden;}

/* Feld mit Links fährt aus bei Hover */
#kontakt:hover{ margin-left:0px; }

/* Linktexte */
#kontakt a{
   float: left; /* Links nebeneinander */
   color: #343434;  /* Linkfarbe */
   margin-right: 12px; /* Abstand zwischen Links */
   font-size: 13px; /* Texgröße */
   display: block; }
ROT habe ich die Stellen markiert, die angepasst werden müssen, wenn sich die
Anzahl der Links ändert. Und die /* grünen Texte */ dienen nur der Info.

Slider verschieben im Header

Siehe im CSS-Code, erste Codezeile #headerslider_1 {
mit "top" kannst du ihn höher oder tiefer setzen
mit "margin-left" kannst Du ihn nach Links oder rechts verschieben.

Die Grafik (Icon) //img.webme.com/pic/c/clean-test/mail.png
kann ausgetauscht werden. Hier hat es die Größe 24 x 24 Pixel.

Tipp beim anpassen

Breite und Position gestalten sich viel einfacher, wenn man die Felder auch sehen kann.
Gebe dem #headerslider_1 { einen sichtbaren Rahmen, mit border: 1px solid red;
Wenn alles passt, kann der Rahmen im Code wieder entfernt werden.



Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :30 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben