Neat Menu with Graphics

[Total: 0    Average: 0/5]

This is a DHTML menu which moves, slides and has graphics in it.

Head Code:

<link href="http://www.js-examples.com/data/ex_1097/menu.css" rel="stylesheet" type="text/css">
<style type="text/css">
BODY
 {
   margin          : 0 0 0 0;
   background-color: #000;
 }
.submenu
 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: bold;
   margin-bottom: 5px;
   background-color:#DDD;
   color:#000;
   width:158px;
   line-height: 20px;
   text-align:left;
   font-weight:bold;
   display:none;
 }
</style>
<style type="text/css">
<!--
@import url("http://www.js-examples.com/data/ex_1097/toolbar.css");
-->
#menubar { position:absolute; z-index: 100; width:100%; left:0px; top:0px; height:22px; background-color:#CCCCCC; }
#menubar a { color:#000000; }
.imgContainer img { background-color:#CCCCCC; }
</style>
<script>
function SwitchMenu(obj)
{
  if(document.getElementById)
  {
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span");
    if(el.style.display != "block")
    {
      for (var i=0; i<ar.length; i++)
      {
        if (ar[i].className=="submenu")
          ar[i].style.display = "none";
      }
      el.style.display = "block";
    }
    else
    {
      el.style.display = "none";
    }
  }
}
</script>

Body Code:

<script>
jsxMenu.Registry = []
jsxMenu.aniLen = 250
jsxMenu.hideDelay = 1000
jsxMenu.minCPUResolution = 10
// constructor
function jsxMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "jsxMenu_"+id
eval(this.gRef+"=this")
jsxMenu.Registry[id] = this
var d = document
var strCSS = '<style type="text/css">';
strCSS += '#' + this.id + 'Container { visibility:hidden; '
if (left >= 0) {
  strCSS += 'left:' + left + 'px; '
} else {
  strCSS += 'right:' + (left*-1) + 'px; '
}
if (top >= 0) {
  strCSS += 'top:' + top + 'px; '
} else {
  strCSS += 'bottom:' + (top*-1) + 'px; '
}
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
//strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
strCSS += '</style>'
d.write(strCSS)
this.load()
}
}
jsxMenu.prototype.load = function() {
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / jsxMenu.aniLen / jsxMenu.aniLen
// set event handlers.
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("jsxMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("jsxMenu.hideMenu('" + this.id + "')")
//set initial state
this.endSlide()
}
}
jsxMenu.showMenu = function(id)
{
var reg = jsxMenu.Registry
var obj = jsxMenu.Registry[id]
if (obj.container) {
obj.over = true
for (menu in reg) if (id != menu) jsxMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) {
//	obj.repositionX(mouseX)
//	obj.repositionY(mouseY)
	reg[id].startSlide(true)
}
}
}
jsxMenu.hideMenu = function(id)
{
var obj = jsxMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = window.setTimeout("jsxMenu.hide('" + id + "')", jsxMenu.hideDelay);
}
}
jsxMenu.hideAll = function()
{
var reg = jsxMenu.Registry
for (menu in reg) {
jsxMenu.hide(menu);
if (menu.hideTimer) window.clearTimeout(menu.hideTimer);
}
}
jsxMenu.hide = function(id)
{
var obj = jsxMenu.Registry[id]
obj.over = false
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
obj.hideTimer = 0
if (obj.open && !obj.aniTimer) obj.startSlide(false)
}
jsxMenu.prototype.startSlide = function(open) {
this[open ? "onactivate" : "ondeactivate"]()
this.open = open
if (open) this.setVisibility(true)
this.startTime = (new Date()).getTime()
this.aniTimer = window.setInterval(this.gRef + ".slide()", jsxMenu.minCPUResolution)
}
jsxMenu.prototype.slide = function() {
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > jsxMenu.aniLen) this.endSlide()
else {
var d = Math.round(Math.pow(jsxMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
jsxMenu.prototype.endSlide = function() {
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over)) {
this.startSlide(this.over)
}
}
jsxMenu.prototype.setVisibility = function(bShow) {
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
jsxMenu.prototype.moveTo = function(p) {
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
jsxMenu.prototype.repositionX = function(p) {
this.container.style["left"] = this.ns4 ? p : p + "px"
}
jsxMenu.prototype.repositionY = function(p) {
this.container.style["top"] = this.ns4 ? p : p + "px"
}
jsxMenu.prototype.getPos = function(c) {
return parseInt(this.style[c])
}
jsxMenu.prototype.onactivate = function() { }
jsxMenu.prototype.ondeactivate = function() { }
function WM_imageSwap(daImage, daSrc)
{
  var objStr,obj;
  if(document.images)
  {
    if (typeof(daImage) == 'string')
    {
      objStr = 'document.' + daImage;
      obj = eval(objStr);
      obj.src = daSrc;
    }
    else if ((typeof(daImage) == 'object') && daImage && daImage.src)
    {
      daImage.src = daSrc;
    }
  }
}
var over = 0;
var currentTimeout;

function delayedCommand(cmd, delay)
{
  over = 1;
  clearTimeout(currentTimeout);
  currentTimeout = setTimeout(cmd, delay);
}
function cancelTimeout()
{
  clearTimeout(currentTimeout);
}
var menus = [
new jsxMenu("Menu1", "down", 5, 20, 210, 400),
new jsxMenu("Menu2", "down", 60, 20, 210, 400),
new jsxMenu("Menu3", "down", 95, 20, 210, 400),
new jsxMenu("Menu4", "left", -122, 0, 120, 20),
new jsxMenu("Menu5", "left", -122, 0, 120, 20),
new jsxMenu("Menu6", "left", -122, 0, 120, 20)
]

for (var i = 0; i<menus.length; i++)
{
  menus[i].onactivate   = new Function("document.getElementById('act" + i + "').className='active';");
  menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
}
</script>
<div id="menubar">
<div id="left">
  <a id="act0"
   onmouseover="delayedCommand('jsxMenu.showMenu('Menu1')', 50)"
   onmouseout="cancelTimeout();jsxMenu.hideMenu('Menu1')"
   title="Personalised Learning" >One</a>
  <a id="act1"
   onmouseover="delayedCommand('jsxMenu.showMenu('Menu2')', 50)"
   onmouseout="cancelTimeout();jsxMenu.hideMenu('Menu2')" >Two</a>
  <a id="act2"
   onmouseover="delayedCommand('jsxMenu.showMenu('Menu3')', 50)"
   onmouseout="cancelTimeout();jsxMenu.hideMenu('Menu3')" >Three</a>
</div>

<div class="middle"></div>

<div class="right">
  <a href="#"><img id="act3"
   onmouseover="jsxMenu.showMenu('Menu4')"
   onmouseout="jsxMenu.hideMenu('Menu4')"
   title="Menu4"
   src="http://www.js-examples.com/data/ex_1097/mydb.gif"></a>
  <a href="#"><img id="act4"
   onmouseover="jsxMenu.showMenu('Menu5')"
   onmouseout="jsxMenu.hideMenu('Menu5')"
   title="Menu5"
   src="http://www.js-examples.com/data/ex_1097/edit.gif"></a>
  <a href="#"><img id="act5"
   onmouseover="jsxMenu.showMenu('Menu6')"
   onmouseout="jsxMenu.hideMenu('Menu6')"
   title="Menu6"
   src="http://www.js-examples.com/data/ex_1097/search.gif"></a>
</div>

<div id="Menu1Container">
  <div id="Menu1Content" class="menu" style ="position:absolute; display:block; z-index:100;">
    <div class="options">
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/course.gif" alt="One-1"></div>
        <div class="disabled">One-1[D]</div>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/community.gif" alt="One-2"></div>
        <div class="disabled">One-2[D]</div>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/profile.gif" alt="One-3"></div>
        <div class="disabled">One-3[D]</div>
      </div>
    </div>
  </div>
</div>

<div id="Menu2Container">
  <div id="Menu2Content" class="menu" style ="position:absolute; display:block; z-index:100;">
    <div class="options">
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/new.gif" alt="Two-1"></div>
        <a class="menuoption" style="color:black" href="#" >Two-1</a>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/new.gif" alt="Two-2"></div>
        <a class="menuoption" style="color:black" href="#" >Two-2</a>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/new.gif" alt="Two-3"></div>
        <a class="menuoption" style="color:black" href="#" >Two-3</a>
      </div>
    </div>
  </div>
</div>

<div id="Menu3Container">
  <div id="Menu3Content" class="menu" style ="position:absolute;display:block;z-index:100;">
    <div class="options">
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/mailfolder.gif" alt="Three-1" /></div>
        <div class="disabled">Three-1[D]</div>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/diary.gif" alt="Three-2" /></div>
        <div class="disabled">Three-2[D]</div>
      </div>
      <div class="option">
        <div class="imgContainer"><img align="middle" src="http://www.js-examples.com/data/ex_1097/note.gif" alt="Three-3" /></div>
        <a class="menuoption" style="color:black" href="#">Three-3</a>
      </div>
    </div>
  </div>
</div>
<!-- end of left side menu -->


<div id="Menu4Container">
  <div id="Menu4Content" class="menu">
    <div class="mouseOver"><span style="color:#000000">MENU4</span></div>
  </div>
</div>
<div id="Menu5Container">
  <div id="Menu5Content" class="menu">
    <div class="mouseOver"><span style="color:#000000">MENU5</span></div>
  </div>
</div>
<div id="Menu6Container">
  <div id="Menu6Content" class="menu">
    <div class="mouseOver"><span style="color:#000000">MENU6</span></div>
  </div>
</div>
</div>
<table width="100%" border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td width="100%" bgcolor="#FFFFFF" colspan=2><img src="http://www.js-examples.com/data/ex_1097/shim.gif" width=1 height=24 alt=""></td>
  </tr>
</table>

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *