Verfasst von Alice am 09.03.2007 - wurde schon 17384 mal gelesen
keine ...
Klick MenuTutorials » JavaScript Tutorials » Klick Menu
Klick Menu - Tutorial
Was ist ein Klick Menu?Hier gibt es ein anschauliches Beispiel
Das Menu besteht aus einem <div>, welches den Javascript-Befehl onClick="klick(this)" zugewiesen bekommen hat und
einem <span> Tag welcher die Navigationspunkte beinhaltet...
Um solch ein Menu auf der eigenen Seite zu verwenden,
wird folgender Code verwendet:
Dieser Code muss in den <head> Bereich der Seite,
also irgendwo zwischen <head> und </head> ...
Code:
<style type="text/css">
.menu {
background-color: #FCFAF8;
border: solid 1px #CCBBBB;
line-height: 20px;
text-align: right;
height: 20px;
width:200px;
margin: 0px;
padding: 0px;
color:#956F6F;
}
.points a, .points a:visited , .points a:active {
font: normal 0.9em verdana, sans-serif;
background-color: #FCFAF8;
border: solid 1px #CCBBBB;
text-decoration:none;
text-align: left;
line-height: 20px;
display: block;
height: 20px;
width:200px;
color:#956F6F;
}
.points a:hover {
background-color:#fff;
color:#C8A762;
}
</style>
<script language="JavaScript1.2" type="text/javascript">
var ns6=document.getElementById&&!document.all?1:0
var head="show:''"
var folder=''
function klick(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
</script>
.menu {
background-color: #FCFAF8;
border: solid 1px #CCBBBB;
line-height: 20px;
text-align: right;
height: 20px;
width:200px;
margin: 0px;
padding: 0px;
color:#956F6F;
}
.points a, .points a:visited , .points a:active {
font: normal 0.9em verdana, sans-serif;
background-color: #FCFAF8;
border: solid 1px #CCBBBB;
text-decoration:none;
text-align: left;
line-height: 20px;
display: block;
height: 20px;
width:200px;
color:#956F6F;
}
.points a:hover {
background-color:#fff;
color:#C8A762;
}
</style>
<script language="JavaScript1.2" type="text/javascript">
var ns6=document.getElementById&&!document.all?1:0
var head="show:''"
var folder=''
function klick(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
</script>
Und diesen Code muss, an die Stelle an der das Menu zu sehen sein soll,
in den <body> Bereich der Seite
Code:
<div class="menu" onClick="klick(this)" id="Menu1"> Navigation 1 </div>
<span class="points" style="display:none">
<a href="http://www.alice-grafixx.de">Home </a>
<a href="http://www.alice.de.md">About </a>
<a href="http://www.alice-grafixx.de">Tutorials </a>
<a href="http://www.alice.de.md">Gaestebuch </a>
<a href="http://www.alice-grafixx.de">Impressum </a>
<a href="http://www.alice-grafixx.de">Sontige Links </a>
</span>
<span class="points" style="display:none">
<a href="http://www.alice-grafixx.de">Home </a>
<a href="http://www.alice.de.md">About </a>
<a href="http://www.alice-grafixx.de">Tutorials </a>
<a href="http://www.alice.de.md">Gaestebuch </a>
<a href="http://www.alice-grafixx.de">Impressum </a>
<a href="http://www.alice-grafixx.de">Sontige Links </a>
</span>
Angepasst werden muss / kann:
- Das Aussehen ( CSS )
Hier gibts meine komplette Beispielseite als Zip verpackt zum runterladen
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...
