...

View Full Version : Problem with Submenu position in Javascript



thientanchuong
07-18-2010, 03:49 AM
A menu is not hovered will be like this:

http://img824.imageshack.us/img824/8841/cat1.jpg

some errors are found

1. Sub-menus are displayed under the menu

http://img709.imageshack.us/img709/6209/cat2r.jpg

I want to display All sub-menus on the right and next to menu border

Eg: The result I want it to be looked like this:

http://img340.imageshack.us/img340/7264/cat4q.jpg

How can I fix the code like that ?

2. Sub menu does have the same size of length.

When sub-menu of Pyjamas and Sub-menu of Silk Ties are called, The submenu of Pyjama are longer than the submenu of Silk Ties.

http://img709.imageshack.us/img709/6209/cat2r.jpg
http://img444.imageshack.us/img444/8462/cat3v.jpg

How can fix the problem so that All submenu will be the same size of length when they are called ?

My code is for leftMenu.php


<div id="leftmenu">
<ul>
<li><a href="index.php?page=dress">Fashion Dress</a></li>
<li><a href="index.php?page=handbag">Hand Bags</a></li>
<li><a href="index.php?page=scraves">Scraves</a></li>
<li><a href="index.php?page=watch">Bracelet Watches</a></li>
<li><a href="#" rel="dropmenu1">Silk Ties</a></li>
<li><a href="#" rel="dropmenu2">Pyjamas</a>
</li>
</ul>
</div>
<!-- SILK TIES drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="index.php?page=plain">Plain Style</a>
<a href="index.php?page=woven">Woven Style</a>
</div>
<!-- PYJAMAS drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?page=wonen">For Women</a>
<a href="index.php?page=men">For Men</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("leftmenu")
</script>

My code is for leftmenu.css


#leftmenu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
margin-top: .1em;
}
ul#leftmenu li {
display: block;
position: relative;
float:left;
}
#leftmenu li a {
display: block;
text-decoration: none;
background-image:url(images/leftNormal.gif);
width: 218px;
height: 30px;
margin-top: .1em;
}
#leftmenu li a:hover {
display: block;
text-decoration: none;
background-image:url(images/leftHover.gif);
width: 218px;
height: 30px;
white-space: 1em;
color:#FFF;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
background-image:url(images/leftmenu.gif);
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only @hắc*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-image:url(images/lefthover.gif);
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color:#FFF;
}

Javascript code in the page of leftmenu.js


var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
//dropdownindicator: '<img src="" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(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;
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH<maxH){
var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},

hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startchrome

}

I am very appreciated if you help me figure out where I am wrong and let me know how I can fix them clearly.

Thanks

abduraooft
07-18-2010, 01:29 PM
My code is for leftMenu.php I'd recommend you to build the markup of menu using a nested unordered list (<ul>) (http://htmldog.com/reference/htmltags/ul), which would be more semantic (http://boagworld.com/technology/semantic-code-what-why-how) and will show the users a neat structure even in the naked CSS (http://naked.dustindiaz.com).

And you could achieve the drop down effect in all moders browsers, without using any javascript. In that way, your menu will become accessible to users who do not have javascript support. Tale a look at the article www.htmldog.com/articles/suckerfish/dropdowns/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum