Suche im Forum:
Suchen


Autor Nachricht
Beitrag19.02.2010 um 16:55 (UTC)    
Titel: Erklärung: Coolmenü

Kann mir jemand ganz genau den Coolmenü code erklären?

Ich möchte ein paar abwandlungen von dem normalen coden!!!
Beitrag19.02.2010 um 16:58 (UTC)    
Titel:

Code:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 10px;
overflow: auto;
padding: 10px;
margin: 0px;
}

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

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position:absolute;
top:320px;
left:48%;
margin-left:-420px;
z-index:99;
width:750px;
height:30px;
background:url(URL) repeat-x;
padding-top:3px;
}

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

.menu a
{
border: 0px solid #000000;
background-color:;
background-image: url(http://img.webme.com/pic/t/testmehp/button1.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 24px;
color: #000000;
}

.menu a:hover
{
background-color:;
background-image: url(http://img.webme.com/pic/t/testmehp/buttontr.png);
}

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

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
background-image: url(http://img.webme.com/pic/t/testmehp/buttontr.png);
}

</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 href="http://gbpics4all.de.tl/St.ae.dte.htm">Home</a></li>
</ul>
</li>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Wochentage</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">

<li><a href="http://gbpics4all.de.tl/Montag.htm">Montag</a></li>
<li><a href="http://gbpics4all.de.tl/Dienstag.htm">Dienstag</a></li>
<li><a href="http://gbpics4all.de.tl/Mittwoch.htm">Mittwoch</a></li>
<li><a href="http://gbpics4all.de.tl/Donnerstag.htm"> Donnerstag</a></li>
<li><a href="http://gbpics4all.de.tl/Freitag.htm">Freitag</a></li>
<li><a href="http://gbpics4all.de.tl/Samstag.htm">Samstag</a></li>
<li><a href="http://gbpics4all.de.tl/Sonntag.htm">Sonntag</a></li>
<li><a href="http://gbpics4all.de.tl/Wochenende.htm">Wochenende</a></li>

</ul>
</li>
<li><a href="http://gbpics4all.de.tl/St.ae.dte.htm">Städte</a></li>
<li> </li>
</ul>
</li>
<li><a href="http://gbpics4all.de.tl/Landschaften.htm">Landschaften</a></li>
<li> </li>
</ul>
</li>
<li><a href="http://gbpics4all.de.tl/Animierte-Pics.htm"> Animiert</a></li>

<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);">Sonstiges</a>
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
<li><a href="http://gbpics4all.de.tl/Sonstige.htm">Sonstige</a></li>
<li><a href="http://gbpics4all.de.tl/FUNNY.htm">Fun</a></li>
<li><a href="http://gbpics4all.de.tl/Sexy.htm">Sexy</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" href="javascript:void(0);"> Nettigkeiten</a>
<ul onmouseout="cache('smenu6');" onmouseover="montre('smenu6');" id="smenu6">
<li><a href="http://gbpics4all.de.tl/Gr.ue..ss.e_Nettigkeiten.htm">Nettigkeiten</a></li>

<li><a href="http://gbpics4all.de.tl/Gr.ue..ss.e_Nettigkeiten.htm">Grüße</a></li>
<li><a href="http://gbpics4all.de.tl/Liebe.htm">Liebe</a></li>
</ul>
</li>
</div>


Der code
Beitrag19.02.2010 um 17:30 (UTC)    
Titel:

Was willste denn überhaupt geändert werden? Außerdem solltest du dir mal
genau die Erklärung des Coolmenüs anschauen. Dort ist es bestens erklärt:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=101593
______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile
Beitrag19.02.2010 um 18:06 (UTC)    
Titel:

Hey,

Du willst also wissen, wie der Code funktioniert.
Ich denke ich brauche dir nichts über die Positionierung und die Styles der Navigation zu erklären, dass ist denke ich selbst erklärend. Nun willst du sicher wissen, wie und warum die Unternavigation beim Drüberfahren erscheint. Im CSS-Code steht folgendes zur Definierung der Untermenüs:
Zitat:
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 100px;
float: left;
}

Das Rote macht die Unternavigation unsichtbar. Nun der Clou. Der ausführende JavaScript-Code macht aus dem display: none; ein display: block; - Entfernt man sich dann von dem Menü verschwindet es wieder.

Siehe (erster Codeteil: Ausfahren - zweiter Teil: Wieder verschwinden lassen):
Zitat:

<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>


mfg[/b]
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beitrag20.02.2010 um 10:14 (UTC)    
Titel:

danke!

kann man den code auch umbauen das keine Unterpunkte erscheinen sondern eine Div mit erklärung?

Diesen code muss man dann umändern oder?

Code:
<a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Wochentage</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">

<li><a href="http://gbpics4all.de.tl/Montag.htm">Montag</a></li>
<li><a href="http://gbpics4all.de.tl/Dienstag.htm">Dienstag</a></li>
<li><a href="http://gbpics4all.de.tl/Mittwoch.htm">Mittwoch</a></li>
<li><a href="http://gbpics4all.de.tl/Donnerstag.htm"> Donnerstag</a></li>
<li><a href="http://gbpics4all.de.tl/Freitag.htm">Freitag</a></li>
<li><a href="http://gbpics4all.de.tl/Samstag.htm">Samstag</a></li>
<li><a href="http://gbpics4all.de.tl/Sonntag.htm">Sonntag</a></li>
<li><a href="http://gbpics4all.de.tl/Wochenende.htm">Wochenende</a></li>

</ul>


Also die Links rausnehmen und einer erklärung rein?!

Code:
<a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Wochentage</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">

Meine Erklärung !!!

</ul>


Zuletzt bearbeitet von eni-test am 20.02.2010, 11:16, insgesamt einmal bearbeitet
Beitrag21.02.2010 um 17:03 (UTC)    
Titel:

kann ich auch eine div irgendwo auf der seit öffnen lassen?
Beitrag23.02.2010 um 16:26 (UTC)    
Titel:

push
Beitrag23.02.2010 um 19:07 (UTC)    
Titel:

<a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> Wochentage</a>
<div onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2"></div>

geht das so?
Beiträge der letzten Zeit anzeigen:   


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