Verfasst von Alice am 09.03.2007 - wurde schon 12112 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
Druckbare Version anzeigen
Permalink
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 ...
