PDA

View Full Version : Installing Chrome CSS Drop Down Menu (v2.5)



stephiekins
11-27-2008, 06:00 AM
1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem: First off, I think the main issue is me *not* the script itself, which I adore and must have! :)

I'm not all that good at this sort of thing which is why I go to DD first to see if I can find what I need. Question is how do I install it?

I like the demo (the Grey one) and I am not 100% certain where to install the java script and the CSS in order to get the script to actually appear on my page.

I was originally placing the CSS in the <head> tag and the java script portion where I actually want the menu itself to appear in the <body> tag.

So is the wrong placement for this or am I totally missing something here?

I did install all the JS, CSS and related files into my directory and when I preview it in front page it just shows the script itself.

Please help I'm so confused! There is other scripts I could use but this one is just perfect for the overall look and feel of my site.

Thanks!

Snookerman
11-27-2008, 06:39 AM
Could you please post a link to your page or attach the code here?

stephiekins
11-27-2008, 12:58 PM
Here's the code for the script itself

Java script


var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //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+" "+this.dropdownindicator
}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

}


CSS


.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*gray*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*gray*/
}

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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*gray*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*gray*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*gray*/
background-color: #F0F0F0;
}

stephiekins
11-27-2008, 12:59 PM
And here's the code for the page itself, the entry was too long so I had to post a second reply

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Welcome to Modologly world!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<!--Copyright Modologly world inc. 2008 ALL rights reserved -->
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
-->
</style>

</head>


<BODY>

<TABLE bordercolor=#129260 cellPadding=4 width="100%" background="http://modologyworld.net/modbackground.jpg">
<TR>
<TD>
<CENTER>
<TABLE width="100%" background="http://modologyworld.net/modbackground.jpg">
<TR>
<TD>
<CENTER>
<BR><BR>
<TABLE bordercolor=#129260 cellPadding=3 width="93%" background="http://modologyworld.net/modbackground.jpg">
<TR>
<TD>
<CENTER>
<TABLE width="100%" background="top">
<TR>
<TD>
<CENTER>
<p><table border=0 width=100% cellspacing=5 cellpadding=8 background="http://modologyworld.net/modbackground.jpg">
<tr><td>
<p align="center"><img src="http://www.modologyworld.net/header2.jpg" width="779" height="199">
&nbsp;</p>
</td></tr>
<table border=2 width=100% cellspacing=5 cellpadding=8 bgcolor=#2A1F25 cols=4>
<tr><td colspan=4 align=center><font color="#C0C0C0">Menu here</font><tr><td>

<table border=2 width=100% cellspacing=5 cellpadding=8 bgcolor=#2A1F25 cols=2>
<tr><td rowspan=2>
</td><td><img src="http://www.modologyworld.net/members.jpg">
<p><font color="#99CCFF">COMING SOON!</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="http://www.modologyworld.net/membership.jpg">
<p><font color="#99CCFF">COMING SOON!</font></p>
</td></tr>
<tr><td><img src="http://www.modologyworld.net/featuredmodel.jpg">
<p>&nbsp;</p>
<p><font color="#99CCFF">COMING SOON!</font></p>
<p>&nbsp;</p>
<p><img src="http://www.modologyworld.net/newset.jpg"></p>
<p><font color="#99CCFF">COMING SOON!</font></p>
</td></tr>

<table border=0 width=100% cellspacing=5 cellpadding=8 background="http://modologyworld.net/footer1.jpg">
<tr><td>
<p align="center"><font color="#FFFFFF"> |</font><a href="http://www.modologyworld.net/2257.html"><font color="#99CCFF">2257
compliance</font></a> <font color="#FFFFFF"> | </font> <a href="http://www.modologyworld.net/privacy.html"><font color="#99CCFF">Privacy</font></a>
<font color="#FFFFFF">
| </font> <a href="http://modologyworld.net/helpcenterlive/module.php?module=HelpCenter"><font color="#99CCFF">Live
support center</font></a><font color="#FFFFFF">&nbsp; | </font> <a href="http://www.modologyworld.net/updates.html"><font color="#99CCFF">updates</font></a>
<font color="#FFFFFF">
| </font></p>
</td></tr>
</table>
</CENTER>
</TABLE></CENTER>
</TD></TR></TABLE><BR><BR></center>
</TABLE>
</TD></TR></TABLE>

</center>
</table>

</table>
</table>

</body>