Suche im Forum:
Suchen


Autor Nachricht
Beitrag16.12.2011 um 23:38 (UTC)    
Titel: Coolmenu / Klappmenü (ohne Javascript)

Ausklappbares Menü (ohne Javascript)

Ich habe die Coolmenü-Beschreibung verschlankt
und auf Javascript verzichtet. Hier die Live-Demo



Schritt 1: Ein DIV um das Design legen
Damit verhindern wir, das sich das Feld verschiebt, wenn das Browserfenster verkleinert wird.

- Einfügen im Feld "Text ÜBER Design"
- Beachte bitte: Dieser Code muss als erstes (ganz oben) im Feld "Text über Design" platziert werden
- das Feld muss die Breite (bei width) bekommen, die auch dein Design hat
- alle Größen findest Du hier: http://www.homepage-baukasten.de/forum/viewtopic.php?t=101597

Zitat:

<div style="width:XXXpx; margin: 0px auto; overflow:hidden; position:relative;">


Und einfügen im Feld "Text UNTER Design"
Zitat:

</div>

Wenn Ihr im Feld "Text UNTER Design" bereits Inhalt stehen habt, dieses DIV als letztes einfügen !




Schritt 2 - Der CSS-Code
Baukasten-Design "CSS" : Einfügen Feld "css ohne style tags", OHNE die style-tags
Alle anderen Designs: Einfügen im Feld "Text über Design" .

Zitat:

<style type="text/css">
<!--


/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: hidden;}

#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px; }

/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #FFFFFF;
text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
color: #FFFFFF;
background-color: #008080; }

#liste li ul { display:none; } /* eingeklappt */
#liste li:hover ul { display:block; } /* ausgeklappt */

-->
</style>




Schritt 3 :
Einfügen im Feld "Text über Design", NACH dem --></style>

Zitat:

<div id="klappmenu">
<ul id="liste">
<li><a href="#">Kategorie 1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1</a></li>
<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 2</a>
<ul>
<li><a href="/Seite.htm">Unterseite 2.1</a></li>
<li><a href="/Seite.htm">Unterseite 2.2</a></li>
<li><a href="/Seite.htm">Unterseite 2.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 3</a>
<ul>
<li><a href="/Seite.htm">Unterseite 3.1</a></li>
<li><a href="/Seite.htm">Unterseite 3.2</a></li>
<li><a href="/Seite.htm">Unterseite 3.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 4</a>
<ul>
<li><a href="/Seite.htm">Unterseite 4.1</a></li>
<li><a href="/Seite.htm">Unterseite 4.2</a></li>
<li><a href="/Seite.htm">Unterseite 4.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 5</a>
<ul>
<li><a href="/Seite.htm">Unterseite 5.1</a></li>
<li><a href="/Seite.htm">Unterseite 5.2</a></li>
<li><a href="/Seite.htm">Unterseite 5.3</a></li>
</ul>
</li>
</ul>
</div>


Ersetze im Code /Seite.htm durch deinen Seitentitel.
Beispiel : Du möchtest die URL deiner Seite Kontakt einfügen .

Du brauchst nicht die komplette URL http://deineSeite.de.tl/Kontakt.htm einfügen.
Hier genügt die Endung /Kontakt.htm als Verlinkung

Die Seiten, die du oben in im Menü verlinken möchtest,
müsstest du in deiner anderen Navigation verstecken.
Das geht mit dem Baukasten-Extra "versteckte Seiten"
Beschreibung hier: http://www.homepage-baukasten.de/forum/viewtopic.php?p=90751




Gruß Wolle


Zuletzt bearbeitet von find-templates am 04.10.2012, 21:12, insgesamt 17-mal bearbeitet
Beitrag13.03.2012 um 16:36 (UTC)    
Titel: Coolmenü um eine ausklappebene erweitern

Das Coolmenü um eine ausklappebene erweitern



Schritt 1: Html anpassen

Wollt ihr z.B. der Unterseite 1.1 eine weitere Liste mit Unteseiten hinzufügen, könnt ihr das Html wie folgt erweitern:
Zitat:
<div id="klappmenu">
<ul id="liste">
<li>a href="#">Kategorie 1</a>
<ul>


<li><a href="/Seite.htm">Unterseite 1.1</a>

<ul>
<li><a href="/Seite.htm">Unterseite 1.1.1</a> </li>
<li><a href="/Seite.htm">Unterseite 1.1.2</a> </li>
<li><a href="/Seite.htm">Unterseite 1.1.3</a></li>
</ul>

</li>


<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 2</a>
...
...
...
</ul>
</div>

Mit dem grünen, wird die neue Liste definiert.
Mit dem braunen legt ihr wieder fest, auf welche Seite verlinkt wird (siehe Beschreibung oben).

Wichtig ist, dass die neue grüne liste, zwischen dem alten blauen Listenelement steht.



Schritt 2: CSS anpassen

Die neue Unterliste muss aus dem Elementfluss genommen werden. Deshalb müsst ihr das rot markierte löschen:
Zitat:
/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: hidden;}


Bei folgendem Block muss der Selektor geändert werden:
Zitat:
#liste li:hover ul { display:block; } /* ausgeklappt */

Hier werden alle Nachfahren vom Typ ul angesprochen. Das war bei einer Tiefe von eins auch irrelevant (Alle ul Elemente, die Nachfahre sind, sind auch direkter Nachfahre).
Jetzt ist es aber nicht mehr so, deshalb dürfen nur noch die direkten Nachfahren selektiert werden:
Zitat:
#liste li:hover > ul { display:block; } /* ausgeklappt */

Das rote müsst ihr neu einfügen.

Das neue Untermenü wird wie bereits gesagt aus dem Elementfluss genommen und an dem Element ausgerichtet, bei welchem es ausklappen soll. Dazu muss die position Eigenschaft des entsprechenden Elementes auf relative gesetzt werden:
Zitat:
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px;
position:relative;
}

Das rote muss wieder eingefügt werden.



Schritt 3: Neue Untermenüliste positionieren

Um das neue Untermenü nun richtig auszurichten, wird die Liste selektiert, welche Nachfahre einer Liste, welche Nachfahre des Elementes mit der id liste ist:
Zitat:
#liste ul ul


Die position Eigenschaft dieser Liste wird nun auf absolute gesetzt:
Zitat:
#liste ul ul{
position:absolute;
}


Nach oben soll das Untermenü einen Abstand von 0 haben und nach Links als Abstand die Breite des Menüpunktes:
Zitat:
#liste ul ul{
position:absolute;
top:0;
left:XXpx;
}

Die XX muss mit der Breite der Einträge ersetzt werden.



Fertiges Code Beispiel (Alles, was rot ist, wurde geändert bzw. hinzugefügt)

Html:
Zitat:
<div id="klappmenu">
<ul id="liste">
<li><a href="#">Kategorie 1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1.1</a></li>
<li><a href="/Seite.htm">Unterseite 1.1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.1.3</a></li>
</ul>

</li>
<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 2</a>
<ul>
<li><a href="/Seite.htm">Unterseite 2.1</a></li>
<li><a href="/Seite.htm">Unterseite 2.2</a></li>
<li><a href="/Seite.htm">Unterseite 2.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 3</a>
<ul>
<li><a href="/Seite.htm">Unterseite 3.1</a></li>
<li><a href="/Seite.htm">Unterseite 3.2</a></li>
<li><a href="/Seite.htm">Unterseite 3.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 4</a>
<ul>
<li><a href="/Seite.htm">Unterseite 4.1</a></li>
<li><a href="/Seite.htm">Unterseite 4.2</a></li>
<li><a href="/Seite.htm">Unterseite 4.3</a></li>
</ul>
</li>

<li><a href="#">Kategorie 5</a>
<ul>
<li><a href="/Seite.htm">Unterseite 5.1</a></li>
<li><a href="/Seite.htm">Unterseite 5.2</a></li>
<li><a href="/Seite.htm">Unterseite 5.3</a></li>
</ul>
</li>
</ul>
</div>


CSS:
Zitat:
<style type="text/css">
<!--

/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
}

#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }

/* Button Breite + Rahmen + Abstand */
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px;
position:relative;}

/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #FFFFFF;
text-decoration: none; }

/* Button Hover-Farbe */
#liste a:hover {
color: #FFFFFF;
background-color: #008080; }

#liste li ul { display:none; } /* eingeklappt */
#liste li:hover > ul { display:block; } /* ausgeklappt */

#liste ul ul{
position:absolute;
top:0;
left:136px;
}


-->
</style>

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 04.12.2012, 12:36, insgesamt 13-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de