Drop Down Menu

1>Create index.html

<!DOCTYPE html>
<head>
<title>Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="menu.css" />

</head>

<body>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="dropmenu1">Character Cretion</a></li>
<li><a href="#" rel="dropmenu2">Character Animation</a></li>
<li><a href="#" rel="dropmenu3">Character Motion</a></li> 
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<a href="#">Psd Design</a>
<a href="#">Banner Design</a>
<a href="#">Flash</a>
<a href="#">Flash animation</a>
<a href="#">Unity</a>
</div>

<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="#">Web Design</a>
<a href="#">Web Development</a>
<a href="#">Banner Design</a>
</div>

<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#">Address</a>
<a href="#">Location</a>
<a href="#">Contact</a>
</div>

2> create menu.css

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

.chromestyle:after{
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
background:#e085b7;
    border: 4px solid silver;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 5px 2px 3px green;
   
    margin: 0;
 
    text-align: center;
    width: 100%;

padding: 4px 0;
margin: 0;

}

.chromestyle ul li{
display: inline;
}

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

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background:#009966; 
}

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

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB;
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;
border-bottom: 1px solid #BBB;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

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

.dropmenudiv a:hover{ 
background-color: #009966;
}

3> Create menu.js

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)

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 and CSS3 TutorialS

Search This Blog

Drop Down Menu

Comments

Post a Comment