Kate
Wow, dein Tutorial hat mir echt geholfen <3Ich bin dir sehr dankbar, dass du es so ausführlich erklärt hastˆˆ.
LG Kate
am 07.02.2010 um 15:36 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
5x bewertet
Ich habe hier ein kleines Tutorial, um ein schönes, kleines Menü zu erstellen. Wenn ihr es benutzen wollt, dann wären CSS Kentnisse, sowie HTML und etwas Javascript Erfahrung sehr Hilfreich!
________________________________________________
Ein Beispiel ist >HIER< zu sehen! (Etwas rosa, aber das kann man ja dann ändern xD)
________________________________________________
Nun beginnt das Tutorial! Lest euch bitte alles GENAU durch! Sonst Funktioniert es Später nicht!
Schritt 1
Zunächst braucht ihr einmal eine CSS Datei mit folgenden Befehlen:
Ob ihr diesen Code nun in eure <head> sektion packt oder ob ihr das ganze extern habt, ist eigentlich egal.
Schritt 2
Weiter gehts mit dem Java Script!
Das muss in den <head> Bereich eurer Page!
Damit hätten wir diesen Teil auch abgehakt.
Jetzt müssen wir das ganze nur noch auf unsere links bringen!
Schritt 3
Es gibt nun zwei Möglichkeiten:
1. Das Menü erscheint, wenn man über den Link fährt
2. Das menü erscheint, wenn man auf den link klickt
Wir wollen folgenden Text verlinken:
Home | Webmiss | Other
Zu Möglichkeit 1
Unser HTML Code für den Link "Home" sieht folgendermaßen aus:
Wir haben zwei wichtige Codeteile:
Einmal wäre das "menu1" (in der Klammer nauch "dropdownmenu"), das bedeutet, das beim über den linkfahren der teil menu1 den wir im Javascript festgelegt haben, angezeigt wird.
Das andere ist der text der angezeigt wir in unserem fall ist das Home.
Der Komplette Code für unser Menü ist also
Zu Möglichkeit 2
Das selbe Spiel wie unten, es verändert sich nur eine Funktion:
Wer ganau gelesen und aufgepasst hat, wird sicher festgestellt haben, dass sich die dafault datei und die onclick Funktion geändert haben.
Ansonsten kommt uns das sehr bekannt vor.
das vollständige menü sieht jetzt also so aus:
Schritt 4
Farbliche Anpassungen müssen jetzt noch vorgenommen werden. Dazu fuchtelt einfach etwas an der CSS Datei herum. Das erkläre ich hier nicht, dafür gibt es andere Tutorials, doch eines noch: vergesst nicht, dass die Hintergrund Farbe des menüs im Javascript-Teil Definiert ist und nicht im CSS-teil.
Schritt 5
Nun habt ihrs geschafft! Ich hoffe, das Tutorial war nach vollziehbar. Wer noch Fragen hat, der kann sie mir einfach per PN stellen!
Viel Spaß mit dem Tut!
________________________________________________
Ein Beispiel ist >HIER< zu sehen! (Etwas rosa, aber das kann man ja dann ändern xD)
________________________________________________
Nun beginnt das Tutorial! Lest euch bitte alles GENAU durch! Sonst Funktioniert es Später nicht!
Schritt 1
Zunächst braucht ihr einmal eine CSS Datei mit folgenden Befehlen:
<style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}
</style>
Ob ihr diesen Code nun in eure <head> sektion packt oder ob ihr das ganze extern habt, ist eigentlich egal.
Schritt 2
Weiter gehts mit dem Java Script!
Das muss in den <head> Bereich eurer Page!
<script type="text/javascript">
//Dies sind die Links, die in den Menüs angezeigt werden
//Inhalt Menü1 Bei uns ist das home
var menu1=new Array()
menu1[0]='<a href="http://www.test.com">test1</a>'
menu1[1]='<a href="http://www.test.com">test2</a>'
menu1[2]='<a href="http://www.test.com">test3</a>'
menu1[3]='<a href="http://www.test.com">test4</a>'
//Inhalt Menü2 Bei uns ist das Webmiss
var menu2=new Array()
menu2[0]='<a href="http://www.test.com">test5</a>'
menu2[1]='<a href="http://www.test.com">test6</a>'
menu2[2]='<a href="http://www.test.com">test7</a>'
//Inhalt Menü3 Bei uns ist das Other
var menu3=new Array()
menu3[0]='<a href="http://www.test.com">test8</a>'
menu3[1]='<a href="http://www.test.com">test9</a>'
menu3[2]='<a href="http://www.test.com">test10</a>'
var menuwidth='165px' //Die Breite des Menüs
var menubgcolor='#FFA8C5' //Hintergrundfarbe
var disappeardelay=250 //Wie schnell das Menü verschwindet wenn man wegfährt mit der Maus(in msec)
var hidemenu_onclick="yes" //Ob das Menü verschwindet, wenn man woanderst hin klickt
/////Ab hier bitte stehen lassen!! ausser ihr habt Ahnung xD
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
</script>
Damit hätten wir diesen Teil auch abgehakt.
Jetzt müssen wir das ganze nur noch auf unsere links bringen!
Schritt 3
Es gibt nun zwei Möglichkeiten:
1. Das Menü erscheint, wenn man über den Link fährt
2. Das menü erscheint, wenn man auf den link klickt
Wir wollen folgenden Text verlinken:
Home | Webmiss | Other
Zu Möglichkeit 1
Unser HTML Code für den Link "Home" sieht folgendermaßen aus:
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Home</a>
Wir haben zwei wichtige Codeteile:
Einmal wäre das "menu1" (in der Klammer nauch "dropdownmenu"), das bedeutet, das beim über den linkfahren der teil menu1 den wir im Javascript festgelegt haben, angezeigt wird.
Das andere ist der text der angezeigt wir in unserem fall ist das Home.
Der Komplette Code für unser Menü ist also
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Home</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Webmiss</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Other</a>
Zu Möglichkeit 2
Das selbe Spiel wie unten, es verändert sich nur eine Funktion:
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()">Home</a>
Wer ganau gelesen und aufgepasst hat, wird sicher festgestellt haben, dass sich die dafault datei und die onclick Funktion geändert haben.
Ansonsten kommt uns das sehr bekannt vor.
das vollständige menü sieht jetzt also so aus:
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()">Home</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Webmiss</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()">Other</a>
Schritt 4
Farbliche Anpassungen müssen jetzt noch vorgenommen werden. Dazu fuchtelt einfach etwas an der CSS Datei herum. Das erkläre ich hier nicht, dafür gibt es andere Tutorials, doch eines noch: vergesst nicht, dass die Hintergrund Farbe des menüs im Javascript-Teil Definiert ist und nicht im CSS-teil.
Schritt 5
Nun habt ihrs geschafft! Ich hoffe, das Tutorial war nach vollziehbar. Wer noch Fragen hat, der kann sie mir einfach per PN stellen!
Viel Spaß mit dem Tut!
3 Kommentare
Ich bin dir sehr dankbar, dass du es so ausführlich erklärt hastˆˆ.
LG Kate
Annie
Super Tutorial :) Leider bin ich noch nicht so ganz dahinter gekommen wie man die Schriftfarbe im Drop-Down Menü ändern kann, habe das jetzt per <font color=""> angepasst, besser wäre natürlich mit Css...Naja, ansonsten wirklich großartig, vielen Dank! :)
am 27.09.2010 um 18:21 Uhr
Sadako
schön erklärt auch wenn der eigentliche code von dynamicdrive ist :)