Suche im Forum:
Suchen


Autor Nachricht
Beitrag07.08.2010 um 00:46 (UTC)    
Titel: Tutorial: Coolmenü ohne Javascript!

Hey Community,

habe mal ein Tutorial gemacht, wie man ein Coolmenu ganz ohne Javascript realisieren kann.
Das bringt euch logischerweise den Vorteil, dass Besucher eurer Seite, die Javascript deaktiviert haben, das Coolmenu trotzdem benutzen können.

So könnte das Coolmenu aussehen, bzw falls man nichts verändert, sieht es so aus.


Der Code muss hier in den entsprechenden Feldern eingefügt werden:


Arrow Login
Arrow Design einstellen
Arrow Erweiterte Einstellungen

Folgendes im Feld "CSS Code ohne Style Tags" einfügen

Zitat:


/* Coolmenü positionieren */

.coolmenu {
position:absolute;
left:10px;
top:20px;

}

/* Allgemeine Einstellungen */

.menu {
color:#000000;
cursor:pointer;
float:left;
height:40px;
width:180px;
overflow-x:hidden;
overflow-y:hidden;
}

.menu:hover {
height:auto;
width:auto;
overflow-x:visible;
overflow-y:visible;
}

/* Hauptmenü anpassen*/

.menu_head {
font-size:17px;
padding-bottom:20px;
text-align:left;
height: 28px;
font-family: Arial;
background-color: #CCCCCC;
background: url();
padding: 10px;
}

/* Anpassungen des Hovers von den Hauptmenüs */

.menu_head:hover {
background-color: #D3D3D3;
background: url();
}

/* Anpassungen des Menüs */

.menu_box {
background-attachment:scroll;
background:#EBEBEB repeat;
background-position:0 0;
border-bottom: 1px solid #cccccc;
border-right: 1px;
overflow-x:visible;
overflow-y:visible;
padding: 5px;
width:170px;
margin-top: -9px;
}

/* Untermenüs anpassen */

.menu_box .menu_link {
color:#333333;
display:block;
font-size:14px !important;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding: 3px;
padding-left:10px;
text-decoration:none;
}

/* Anpassungen des Hovers von den Untermenüs */

.menu_box .menu_link:hover {
color:#000000;
background-color: #DDDDDD;
background: url();
}

/* Falls ihr keine runden Ecken links und rechts - oben haben wollt, müsst ihr den nachfolgenden Code entfernen. */

/* Die Ecke vom Coolmenü links rund machen*/

#first {
-moz-border-radius-topleft: 7px;
border-radius: 7px 0px 0px 0px;
}

/* Die Ecke vom Coolmenü rechts rund machen*/

#last {
-moz-border-radius-topright: 7px;
border-radius: 0px 7px 0px 0px;
}


Legende:

*rot: Positition, des Coolmenüs. "left" => von links, "top" => von oben.
*blau: Hintergrundfarbe festlegen
*oliv: Hintergrundbild festlegen

Falls euer Design zentriert ist, folgendes im CSS Code anpassen:

Zitat:

.coolmenu {
position:absolute;
left: 50%;
margin-left: -360px;
top:20px;

}


nach Links verschieben = Minuswert bei margin-left: erhöhen
nach Rechts verschieben = Minuswert bei margin-left: verkleinern

Folgendes im Feld "Text über Design" einfügen

Zitat:

<div class="coolmenu">

<div class="menu">

<div id="first" class="menu_head">Hauptmenü 1</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 1.1">Untermenü 1.1</a>
<a class="menu_link" href="Unterlink 1.2">Untermenü 1.2</a>
<a class="menu_link" href="Unterlink 1.3">Untermenü 1.3</a>
<a class="menu_link" href="Unterlink 1.4">Untermenü 1.4</a>
</div>

</div>


<div class="menu">

<div class="menu_head">Hauptmenü 2</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 2.1">Untermenü 2.1</a>
<a class="menu_link" href="Unterlink 2.2">Untermenü 2.2</a>
<a class="menu_link" href="Unterlink 2.3">Untermenü 2.3</a>
</div>

</div>


<div class="menu">

<div class="menu_head">Hauptmenü 3</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 3.1">Untermenü 3.1</a>
<a class="menu_link" href="Unterlink 3.2">Untermenü 3.2</a>
</div>

</div>


<div class="menu">

<div id="last" class="menu_head">Hauptmenü 4</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 4.1">Untermenü 4.1</a>
<a class="menu_link" href="Unterlink 4.2">Untermenü 4.2</a>
<a class="menu_link" href="Unterlink 4.3">Untermenü 4.3</a>
<a class="menu_link" href="Unterlink 4.4">Untermenü 4.4</a>
<a class="menu_link" href="Unterlink 4.5">Untermenü 4.5</a>
</div>

</div>

</div>


Zusätzlichen Menüpunkt hinzufügen:

Zitat:
<a class="menu_link" href="Unterlink">Untermenü</a>


Zuletzt bearbeitet von southpark-comedyclub am 07.08.2010, 01:49, insgesamt einmal bearbeitet
Beitrag07.08.2010 um 08:57 (UTC)    
Titel:

Cool, danke für das Tutorial Wink

darf ich es als Tuto für meine Seite verwenden, schreib auch dazu das es von dir ist.

mfg omba
Beitrag07.08.2010 um 10:15 (UTC)    
Titel:

Klar kannst es frei verwenden, und da es ein Tutorial ist, auch ohne jegliche Hinweise die zu mir führen.

mfg
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!
Beitrag07.08.2010 um 10:20 (UTC)    
Titel:

ok, danke Wink

mfg omba
Beitrag07.08.2010 um 10:53 (UTC)    
Titel:

Ein Scrrenshot wäre nett Wink
Beitrag07.08.2010 um 11:04 (UTC)    
Titel:

er hat doch extra oben nen link, schau dir doch den an Wink

mfg omba
Beitrag07.08.2010 um 13:05 (UTC)    
Titel:

gutes Tutorial.

Zur sache mit den runden Ecken:

du könntest noch -webkit-border-radius hinzufügen, damit es danna uch in safari und Chrome so angezeigt wird.
______________

Beitrag07.08.2010 um 13:08 (UTC)    
Titel:

the-fun-factory hat Folgendes geschrieben:
gutes Tutorial.

Zur sache mit den runden Ecken:

du könntest noch -webkit-border-radius hinzufügen, damit es danna uch in safari und Chrome so angezeigt wird.


"-webkit" sorgt mittlerweile nurnoch für Safari. Durch "border-radius" klappt es auch im Opera + Chrome.

mfg
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!
Beiträge der letzten Zeit anzeigen:   


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