Loading...   Upload Image

Klick MenuTutorials » JavaScript Tutorials » Klick Menu

Verfasst von Alice am 09.03.2007 - wurde schon 17187 mal gelesen

Kategorie: JavaScript
Bewertung:
19x bewertet
Schwierigkeit: einfach
Kommentare: [ 21 ]

keine ...

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>

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"> &nbsp;Navigation 1&nbsp; </div>
<span class="points" style="display:none">
<a href="http://www.alice-grafixx.de">Home &nbsp;</a>
<a href="http://www.alice.de.md">About &nbsp;</a>
<a href="http://www.alice-grafixx.de">Tutorials &nbsp;</a>
<a href="http://www.alice.de.md">Gaestebuch &nbsp;</a>
<a href="http://www.alice-grafixx.de">Impressum &nbsp;</a>
<a href="http://www.alice-grafixx.de">Sontige Links &nbsp;</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 ...


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider