Autor |
Nachricht |
-
eni-test
|
19.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!!! |
|
↑
|
|
|
-
eni-test
|
19.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 |
|
↑
|
|
|
-
blutsegelbukaniere
|
19.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. |
|
↑
|
|
|
-
ig444
Wohnort: Rüthen
|
19.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 |
|
↑
|
|
|
-
eni-test
|
20.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
|
|
↑
|
|
|
-
eni-test
|
21.02.2010 um 17:03 (UTC) Titel: |
|
|
kann ich auch eine div irgendwo auf der seit öffnen lassen? |
|
↑
|
|
|
-
eni-test
|
23.02.2010 um 16:26 (UTC) Titel: |
|
|
push |
|
↑
|
|
|
-
eni-test
|
23.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? |
|
↑
|
|
|
|