2 Replies - 11986 Views - Last Post: 05 April 2009 - 08:12 PM

#1 alimdar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 25-February 09

image based drop down menu

Post icon  Posted 05 April 2009 - 05:10 PM

Hello,

I need to make a drop down menu but my client is very specific about the font - so I would have to use images - is there a way to make a drop down menu using images?

thanks
A

I actually was looking for a tutorial or a sample of the menu or even a place where such menu could be purchased

tnx
Is This A Good Question/Topic? 0
  • +

Replies To: image based drop down menu

#2 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: image based drop down menu

Posted 05 April 2009 - 07:56 PM

ok im going to do my best to try and help you out

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<script src="yourcsslocation or file.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
	  <ul>
		<li><a href="#">Item 1.1</a></li>
		<li><a href="#">Item 1.2</a></li>
		<li><a href="#">Item 1.3</a></li>
	  </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
	  <ul>
		<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
			<ul>
			  <li><a href="#">Item 3.1.1</a></li>
			  <li><a href="#">Item 3.1.2</a></li>
			</ul>
		</li>
		<li><a href="#">item title</a></li>
		<li><a href="#">Item title</a></li>
	  </ul>
  </li>
  <li><a href="#">Item title</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>



that is the basic html...

this is the SpryMenuBar.js file

var Spry;
if(!Spry)
{
	Spry = {};
}
if(!Spry.Widget)
{
	Spry.Widget = {};
}
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};
Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);
	this.currMenu = null;
	var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
	{
		return;
	}
	if(opts)
	{
		for(var k in opts)
		{
			var rollover = new Image;
			rollover.src = opts[k];
		}
	}
	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			this.initialize(items[i], element, isie);
			if(isie)
			{
				this.addClassName(items[i], "MenuBarItemIE");
				items[i].style.position = "static";
			}
		}
		if(isie)
		{
			if(this.hasClassName(this.element, "MenuBarVertical"))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
	{
		return false;
	}
	return true;
};
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'java script:false;';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = menu.parentNode.getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
	{
		this.hideSubmenu(menus[i]);
	}
	this.removeClassName(this.element, "MenuBarActive");
};
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	if(menu)
	{
		this.addClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(typeof document.uniqueID != "undefined")
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, "MenuBarActive");
};
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		this.removeIframeLayer(menu);
	}
};
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);

	var hasSubMenu = false;
	if(menu)
	{
		this.addClassName(link, "MenuBarItemSubmenu");
		hasSubMenu = true;
	}
	if(!isie)
	{
		listitem.contains = function(testNode)
		{
			if(testNode == null)
			{
				return false;
			}
			if(testNode == this)
			{
				return true;
			}
			else
			{
				return this.contains(testNode.parentNode);
			}
		};
	}
	var self = this;

	this.addEventListener(listitem, 'mouseover', function(e)
	{
		if(self.bubbledTextEvent())
		{
			return;
		}
		clearTimeout(closetime);
		if(self.currMenu == listitem)
		{
			self.currMenu = null;
		}
		self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
		if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
		{
			opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
		}
	}, false);

	this.addEventListener(listitem, 'mouseout', function(e)
	{
		if(self.bubbledTextEvent())
		{
			return;
		}
		var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
		if(!listitem.contains(related))
		{
			clearTimeout(opentime);
			self.currMenu = listitem;
			self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
			if(menu)
			{
				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
			}
		}
	}, false);
};


now for your SpryMenuBarHorizontal.css

@charset "UTF-8";
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
ul.MenuBarActive
{
	z-index: 1000;
}
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
	background-image: url(bg.gif);
}
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
ul.MenuBarHorizontal ul li
{
	width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}


make sure that your background image is titled bg.gif or you change it in the .css file.
you will also have to change the menu box size to conform to the size of your image.
i hope this helps you and if you have any issues reply, i will subscribe.


also you will have to remove the type ie: title in the code and your images can roll over just replace the bg.gif on the hover section in the css file with something like bg2.gif, or whatever your file type/name is.
Was This Post Helpful? 0
  • +
  • -

#3 alimdar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 25-February 09

Re: image based drop down menu

Posted 05 April 2009 - 08:12 PM

wow, this is great!
I will try it right a way - thanks you so much :)))))

A
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1