PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
?

Navigatie maken..

Door Onbekende gebruiker op 30-08-2005 12:01 gewijzigd op 02-09-2005 17:27
553 views
Hey,

Ik wil een navigrator maken met een soort rollover, dat je erover gaat en dan een schermpje naar beneden gaat en daar kan selecteren wat je wil..
Iemand enig idee hoe ik dat kan maken?? Met PS volgens mij maar hoe?

Wie kan mij helpen??

BVD Wouter
o
onbekend onbekend
30-08-2005 12:51
Waarom haal je het daar dan niet van af?

En op dynamic drive staat dat soort navigaties ook gewoon hoor..
?
Onbekende gebruiker
30-08-2005 12:52
hoe kan je dat daar afhalen dan 8-)?
Alfred -
30-08-2005 13:13
Klik hier

Jelmer gaf een voorzet, maak deze dan ook af he..
o
onbekend onbekend
30-08-2005 13:18
Wouter schreef op 30.08.2005 12:52
hoe kan je dat daar afhalen dan 8-)?

Lees de broncode uit, en dan ga je opzoek naar al het javascript & css enzo dat bij de navigatie hoort. En tata! Je hebt em!
A
Arjan Kapteijn
30-08-2005 14:00
Persoonlijk zou ik kijken naar een combo van css/html. Puur omdat dat practisch overal lekker op werkt, hoe dat met dhtml zit weet ik niet.

Voordeel van css is dat het lekker makkelijk aan te passen is naar je eigen wensen, de source er lekker mooi uitziet en dat zoekmachines als google optimaal gebruik kunnen maken van je 'directory structuur' achtige opbouw.

Zie test.i-cey.net. Of zoek eens op google naar suckerfish css menu o.i.d.
?
Onbekende gebruiker
02-09-2005 15:17
Tussen <head></head>

<style type="text/css">

/* Zelf aanpassen */

#dropmenudiv{
position:absolute;
border:1px solid;
border-color: white;
font:normal 12px Arial;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
background-color: #B0643A;
}

#dropmenudiv a:hover{
background-color: #8EA578;
}

</style>


<script type="text/javascript">


//Content Menu 1
var menu1=new Array()
menu1[0]='<a href="URL" target="mainFrame">Tekst</a>'
menu1[1]='<a href="URL" target="mainFrame">Tekst</a>'
menu1[2]='<a href="URL" target="mainFrame">Tekst</a>'
menu1[3]='<a href="URL" target="mainFrame">Tekst</a>'
menu1[4]='<a href="URL" target="mainFrame">Tekst</a>'

var menuwidth='165px' //Breedte menu
var menubgcolor='lightyellow' //Niet aanpassen
var disappeardelay=250 //Niet aanpassen
var hidemenu_onclick="yes" //Niet aanpassen

/////No further editting needed

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=-500
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 windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
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>

Op de plaats van de link:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" target="mainFrame">Tekst</a>
Jelmer -
02-09-2005 17:24
wauw, die is ingewikkeld! Nee, geef mij dan maar een CSS dropdown, die de code netjes houd, goed is voor zoekmachines, en zelfs prima overweg kan met text2speech en braille browsers.

Reageren

Inloggen om te reageren