Photo Shopper JokerPlayerSpezial

Coolmenü Tutorial


Coolmenü Tutorial



Was ist ein Coolmenü ?

Ein Coolmenü ist eine Navigation die Waagerecht verläuft.
Ich z.B.benutze auch einen Coolmenü, der ist bei mir oben im Header.
Hier ein Bild dazu, >>>
klicke hier<<<.

Bitte liest euch alles von oben bis unten durch, damitt ihr den Code ´genau nach eurem Wunsch gestallten könt !

Hier der Coolmenü Code,




<style type="text/css" media="screen">

 
<!--
body
{
font-family: Arial, sans-serif;
font-size: 11px;
overflow: auto;
padding: 13px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 10;
top: 323px;
left: 50%;
margin-left:-450px;
width: 100%;
}

.menu li
{
width: 150px;
float: left;
}

.menu a
{
border: 0px solid #F2F2F2;
background-color:#000C32;
background-image: url(Hier Button URL); 
padding-top: 11px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 0px;
display: block;
height: 27px;
color: #185100;
}

.menu a:hover
{
background-color: #000000;
background-image: url(Hier Hover Button URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6   
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
border-top: 0px;
cursor: pointer;
}
//--> </style><script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseout="cache('smenu2');" onmouseover="montre('smenu2');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseout="cache('smenu3');" onmouseover="montre('smenu3');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="javascript:void(0);">TITEL NAVI-BUTTON 4</a>
<ul id="smenu4" onmouseout="cache('smenu4');" onmouseover="montre('smenu4');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);">TITEL NAVI-Button 5</a>
<ul id="smenu5" onmouseout="cache('smenu5');" onmouseover="montre('smenu5');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" href="javascript:void(0);">TITEL NAVI-BUTTON 6</a>
<ul id="smenu6" onmouseout="cache('smenu6');" onmouseover="montre('smenu6');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
</div>




Beschreibung,

XXXX (margin: 0px 0px;)= Abstand zwischen den Buttons
XXXX (Deine Seiten URL)=  Url der Ziel Seite
XXXX (Seiten-Titel) =  Titel der Seite in der Navi

XXXX (Hier Button URL)= Bild URL des Buttons in der Navi 
XXXX (Hier Hover Button URL)= Bild URL des Buttons beim drüberfahren mit der Maus
XXXX (top: 323px;)= Navi Abstand von oben
XXXX (margin-left:-450px;)= Abstand von rechts 
XXXX (width: 150px; )=  Breite der Buttons
XXXX (height: 27px; )= höhe der Buttons von unten
XXXX (padding-top: 11px; )= höhe der Buttons von oben


Mehr unterseiten...

Falls ihr mehr als 3 Unterseiten haben möchtet, verändert folgendes im Code,


<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>

</ul>
</li>


fügt einfach den folgenden Code

<li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  4</a></li>

für 4 unterseiten, oder

<li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  5</a></li>

für 5 unterseiten ein.

Es geht belibig auf unendlich viel Unterseiten, ihr müsst nur vor dem einsetzen der Titel die XXXX stelle verändern!


<li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  5</a></li>


und so sieht es hinterher aus:

<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  4</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  5</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  6</a></li>

</ul>
</li>


Ihr könnt auch dementsprechend weniger Unterseiten machen, beachtet aber immer von unten nach oben löschen!
Jetzt könnt ihr die URl´s einfügen und die Navi Titel´s verändern !


Falls ihr in der Navi mehr oder weniger als 6 Buttons haben möchtet verändert im Coolmenücode folgendes:

Mehr Buttons,
Fügt diesen Code in den Gesammtcode ein,
ihr müsst nur jeweils die XXXX stellen verändern, falls ihr 6 Buttons habt, dan verändert ihr die XXXX stellen auf 7 und falls ihr mehr Buttons möchtet auf 8, 9, ...

<li><a onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" href="javascript:void(0);">TITEL NAVI-BUTTON 6</a>
<ul id="smenu6" onmouseout="cache('smenu6');" onmouseover="montre('smenu6');">
    <li><a target="_self" href="
Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="
Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="
Deine Seiten URL"> Seiten-Titel  3
</a></li>
</ul>
</li>
</div>

So würde dann der Coolmenücode bei 9 Buttons aussehen...

<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseout="cache('smenu2');" onmouseover="montre('smenu2');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseout="cache('smenu3');" onmouseover="montre('smenu3');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="javascript:void(0);">TITEL NAVI-BUTTON 4</a>
<ul id="smenu4" onmouseout="cache('smenu4');" onmouseover="montre('smenu4');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);">TITEL NAVI-Button 5</a>
<ul id="smenu5" onmouseout="cache('smenu5');" onmouseover="montre('smenu5');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" href="javascript:void(0);">TITEL NAVI-BUTTON 6</a>
<ul id="smenu6" onmouseout="cache('smenu6');" onmouseover="montre('smenu6');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu7');" onmouseover="montre('smenu7');" href="javascript:void(0);">TITEL NAVI-BUTTON 7</a>
<ul id="smenu7" onmouseout="cache('smenu7');" onmouseover="montre('smenu7');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu8');" onmouseover="montre('smenu8');" href="javascript:void(0);">TITEL NAVI-Button 8</a>
<ul id="smenu8" onmouseout="cache('smenu8');" onmouseover="montre('smenu8');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu9');" onmouseover="montre('smenu9');" href="javascript:void(0);">TITEL NAVI-BUTTON 9</a>
<ul id="smenu9" onmouseout="cache('smenu9');" onmouseover="montre('smenu9');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>



Ihr müsst auf jeden fall beachten, dass auch die folgenden stellen im Coolmenücode veränder werden müssen,
Falls ihr 7 oder mehr Buttons haben möchtet, fügt folgende XXXX, XXXX, XXXX werte ein,

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9     
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a, #smenu7 a, #smenu8 a, #smenu9 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
border-top: 0px;
cursor: pointer;



Weniger buttons,
Falls ihr weniger Buttons haben möchtet veränder im Coolmenücode folgendes,
Entfernt aber immervon unten nach oben!


<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseout="cache('smenu2');" onmouseover="montre('smenu2');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseout="cache('smenu3');" onmouseover="montre('smenu3');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="javascript:void(0);">TITEL NAVI-BUTTON 4</a>
<ul id="smenu4" onmouseout="cache('smenu4');" onmouseover="montre('smenu4');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>

<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);">TITEL NAVI-Button 5</a>
<ul id="smenu5" onmouseout="cache('smenu5');" onmouseover="montre('smenu5');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>

<li><a onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" href="javascript:void(0);">TITEL NAVI-BUTTON 6</a>
<ul id="smenu6" onmouseout="cache('smenu6');" onmouseover="montre('smenu6');">
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  1</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  2</a></li>
    <li><a target="_self" href="Deine Seiten URL"> Seiten-Titel  3</a></li>
</ul>
</li>

</div>

Entfernt die XXXX Codes für nur 5 Buttons,
Entfernt die XXXX Codes für nur 4 Buttons,
Entfernt die XXXX Codes für nur 3 Buttons,
und immer so weiter
...


Ihr müsst dann auch folgendes im Coolmenücode verändern,
die jeweiligen XXXX Stellen einfach entfernen...

Entfernt die XXXX Codes für nur 5 Buttons,
Entfernt die
XXXX Codes für nur 4 Buttons,
Entfernt die
XXXX Codes für nur 3 Buttons,
und immer so weiter
...


#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6,      
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a,
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
border-top: 0px;
cursor: pointer;

Heute waren schon 3 Besucher (64 Hits) hier!
Kostenloser Counter! IPCOUNTING.DE - Kostenloser Counter! => Willst du auch eine kostenlose Homepage? Dann klicke hier! <=