Qualcuno mi può indicare un menù a discesa, validato xhtml...
Qualcuno mi può indicare un menù a discesa, validato xhtml...
Se vuoi un menu già fatto bisogna che fai una ricerca sul web.
Se lo vuoi personalizzato lo puoi fare in XHTML più CSS con le liste
o in Javascript, non ti posso postare il codice perchè ci vuole
abbastanza tempo per fartelo
Questo funziona (non far caso aglii \) però non riesco a validarlo :
var menu1=new Array()
menu1[0]='<a href=\"societa.php\">Profilo</a>'
menu1[1]='<a href=\"mission.php\">Mission</a>'
menu1[2]='<a href=\"trasparenza.php\">Trasparenza</a>'
menu1[3]='<a href=\"pdf/privacy.pdf\" target=\"_blank\">Privacy</a>'
var menuwidth='165px' //default menu width
var menubgcolor='#233142' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick=\"yes\" //hide menu when user clicks within menu?
/////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+';back ground-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().clientWid th-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().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
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
ho visto ma non riesco ad integrarlo visto che i bottoni principali sono img... c'è possibilità di validare quello che ho postato
finalmente sono riuscito ad integrare il menu presente nel sito riportato nel post precedente, però è sorto un problema con mozilla funziona perfettamente mentre con ie7 il menu viene visualizzato dietro gli altri div del sito
Vi posto il codice:
css
.menu {font-family: verdana, arial, sans-serif; width:467px; position:relative; font-size:11px; margin:0px auto;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:auto; height:52; text-align:left; color:#000; background:#c9c9a7; line-height:25px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {visibility:hidden; position:absolute;}
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;}
.menu ul li:hover a, .menu ul li a:hover {color:#FFFFFF; background:#e9e9c7;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; top:51px; left:0; z-index:1000;}
.menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#FFFFFF; z-index:1000;}
.menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#FFFFFF;width:199px; clear:both;}
.menu ul li:hover ul li:hover a.sub, .menu ul li a:hover ul li a:hover.sub {background:#7DB1ED; color:#FFFFFF;}
.menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#233142; color:#FFFFFF; width:100%; padding-left:10px; border-bottom: 2px solid white; font-weight: bold; FONT-SIZE: 13px; FONT-FAMILY: tahoma;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#7DB1ED; color:#FFFFFF;}
.menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; left:210px; top:0;}
.menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#FFFFFF;}
.menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#FFFFFF;}
.menu ul li:hover ul.left, .menu ul li a:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left, .menu ul li a:hover ul li a:hover ul.left {left:-210px; width:209px;}
html
<div class=\"menu\">
<ul>[*]<a href=\"index.php\"><img src=\"img/home.jpg\" border=\"0\" alt=\"Home\" /></a>
<!--[if lte IE 6]>
<a href=\"index.php\"><img src=\"img/home.jpg\" border=\"0\" alt=\"Home\" />
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]<a href=\"#\"><img src=\"img/company.jpg\" border=\"0\" alt=\"Società\" /></a>
<!--[if lte IE 6]>
<a href=\"#\"><img src=\"img/company.jpg\" border=\"0\" alt=\"Società\" />
<table><tr><td>
<![endif]-->
<ul>
[*]<a href=\"societa.php\">Profilo</a>
[*]<a href=\"mission.php\">Mission</a>
[*]<a href=\"trasparenza.php\">Trasparenza</a>
[*]<a href=\"pdf/privacy.pdf\" target=\"_blank\">Privacy</a>
[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]<a href=\"#\"><img src=\"img/services.jpg\" border=\"0\" alt=\"Servizi\" /></a>
<!--[if lte IE 6]>
<a href=\"#\"><img src=\"img/services.jpg\" border=\"0\" alt=\"Servizi\" />
<table><tr><td>
<![endif]-->
<ul>
[*]<a href=\"../layouts/bodyfix.html\" title=\"Cross browser fixed layout\">Fixed 1</a>
[*]<a href=\"../layouts/body2.html\" title=\"Cross browser fixed layout\">Fixed 2</a>
[*]<a href=\"../layouts/body4.html\" title=\"Cross browser fixed layout\">Fixed 3</a>
[*]<a href=\"../layouts/body5.html\" title=\"Cross browser fixed layout\">Fixed 4</a>
[*]<a href=\"../layouts/minimum.html\" title=\"A simple minimum width layout\">minimum width</a>
[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]<a href=\"#\"><img src=\"img/spread.jpg\" border=\"0\" alt=\"Mutui\" /></a>
<!--[if lte IE 6]>
<a href=\"#\"><img src=\"img/spread.jpg\" border=\"0\" alt=\"Mutui\" />
<table><tr><td>
<![endif]-->
<ul>
[*]<a href=\"spies.html\" title=\"a coded list of spies\">spies menu</a>
[*]<a href=\"vertical.html\" title=\"a horizontal vertical menu\">vertical menu</a>
[*]<a href=\"expand.html\" title=\"an enlarging unordered list\">enlarging list</a>
[*]<a href=\"enlarge.html\" title=\"an unordered list with link images\">link images</a>
[*]<a href=\"cross.html\" title=\"non-rectangular links\">non-rectangular</a>
[*]<a href=\"jigsaw.html\" title=\"jigsaw links\">jigsaw links</a>
[*]<a href=\"circles.html\" title=\"circular links\">circular links</a>
[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]<a href=\"prodotti.php\"><img src=\"img/products.jpg\" border=\"0\" alt=\"Prodotti\" /></a>
<!--[if lte IE 6]>
<a href=\"prodotti.php\"><img src=\"img/products.jpg\" border=\"0\" alt=\"Prodotti\" />
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]<a href=\"contatti.php\"><img src=\"img/contact.jpg\" border=\"0\" alt=\"Contatti\" /></a>
<!--[if lte IE 6]>
<a href=\"contatti.php\"><img src=\"img/contact.jpg\" border=\"0\" alt=\"Contatti\" />
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[/list]
</div>
forse ci sono quasi giocando con z-index
però il problema di incompatibilità resta tra ie e mozilla, il problema è il seguente se con ie7 do z-index:-1 al div sottostante il menu esso si visualizza correttamente però con mozilla il div sottostante scompare
mentre se evito di inserire z-index:-1 su mozilla tutto ok mentre con ie il menu appare dietro il div sottostante
qualcuno può aiutarmi a uscirne fuori da questo problema...
Permessi di invio
Rispondi quotando