Jump to content

Horizontal Menu With Drop Down Lines

jcc5018

By jcc5018
in CSS

Recommended Posts

jcc5018 Newbie

jcc5018

Posted
Posted

Hey guys, I am working on my navigational links for my website again ( I still havent found the best method to do it yet that i can make work) but this time I am trying to make a CSS based list with the SpryMenubuilder in Dreamweaver. Well I\'ve been playing around with it for hours and I\'m almost there, but still having some issues with some things.The link to the navigation so far is at http://www.personal.psu.edu/jcc5018/test2.htmlCheck http://www.personal.psu.edu/jcc5018/start.htm for references to locations that I will be refering to. My Problem areas are:1. I can\'t get the second and third levels to position properly. When this is finished I want the 1st level to be indented to be located next to the site logo. (check reference site) - The second layer needs to be placed over the colored stripes below the logo and aligned left to the page. - The Third layer which is only in the About Me tab, will be placed directly below the 2nd layer, but I need it to be a horizontal bar as well. It will only have a basic colored block formatting, no background image.- Why is the third layer placed in random y- axis positions opposed to being a set distance from the 2nd layer with my current coding?2. Going off the first issue, I have the second layer almost right but it keeps positioning below the parent opposed to being aligned right like I was trying to have it set.3 If I have a gap between the layers, the menus disappear when I try scrolling to the lower tiered menus. How to I set it so that the parent layers can be clicked opposed to just hovering, and have it display the clicked block on each layer. 4. I have it set to display the yellow image on hover, but if the parent has any children links, then the yellow rollover image doesnt display. Which tag should this be in to make it work. Also, I want the 2 layer links to have its own rollover and active images, but currently they are using the same as the first layer. 5. Currently I made my images simple rectangles that stretch for the link background. But I really would like to use the buttons with the curved sides, but when I try that, the curves just get cut off. How to I make it so that It will display both curved edges. I saw before, though i cant remember where, that people use two pictures to accomplish this. One with the left curve only, then the other with the text area (that would expand to fit the text) and the left curved edge. If I separated my images like this, how would I load both images with CSS 6. I am assuming this will have to be done through javascript or PHP, but I want an active link state set depending on the file loaded. I know I will have to set it so that it loads an \"Active\" class, but Im not entirely sure the JavaScript coding needed to do that. 7. This may be beyond the scope of the CSS knowledge, but I plan on having my nav bar when completed as a header on a template page of my site. Each link will be directed with PHP to load the corresponding page. I think this should maintain the active link state of the nav bar, but I dont think it would display the proper URL. Anyone know the code to make that work with PHP preferably since I dont really know JS. 8. I realize I probably have a lot more than I really need to make this work in my CSS file, So if you know what can safely be taken out, please feel free to do that too.9. And as of now, the file does not work properly in IE, any idea what I have to do to fix this?Here\'s the HTML, CSS and JavaScript files that Ive played with.

<body><ul id=\"MenuBar1\" class=\"MenuBarHorizontal\">  <li class=\"Main\"><a class=\"MenuBarItemSubmenu\" href=\"#\">Home</a>      <ul class=\"newbar\">        <li class=\"Sub\"><a href=\"#\" >Main</a></li>        <li class=\"Sub\"><a href=\"#\">News</a></li>        <li class=\"Sub\"><a href=\"#\">History</a></li>      </ul>  </li>  <li class=\"Main\"><a href=\"#\" class=\"MenuBarItemSubmenu\" >About Me</a>    <ul class=\"newbar\">      <li class=\"Sub\"><a href=\"#\" class=\"MenuBarItemSubmenu\">Skills</a>        <ul>          <li class=\"Sub\"><a href=\"#\">Business</a></li>          <li class=\"Sub\"><a href=\"#\">Communication</a></li>          <li class=\"Sub\"><a href=\"#\">Computer</a></li>          <li class=\"Sub\"><a href=\"#\">Tools/ Machinery</a></li>          <li class=\"Sub\"><a href=\"#\">Miscellaneous</a></li>        </ul>      </li>      <li class=\"Sub\"><a href=\"#\" class=\"MenuBarItemSubmenu\">Experience</a>        <ul>          <li class=\"Sub\"><a href=\"#\">Leadership</a></li>          <li class=\"Sub\"><a href=\"#\">Organization</a></li>          <li class=\"Sub\"><a href=\"#\">Resourcefulness</a></li>          <li class=\"Sub\"><a href=\"#\">Customer Service</a></li>          <li class=\"Sub\"><a href=\"#\">Work Ethic</a></li>          <li class=\"Sub\"><a href=\"#\">Technical</a></li>        </ul>      </li>      <li class=\"Sub\"><a href=\"#\">Strengths</a></li>      <li class=\"Sub\"><a href=\"#\">Goals</a></li>      <li class=\"Sub\"><a href=\"#\" class=\"MenuBarItemSubmenu\">Work</a>        <ul>          <li class=\"Sub\"><a href=\"#\">Job History</a></li>          <li class=\"Sub\"><a href=\"#\">What I am looking for</a></li>          <li class=\"Sub\"><a href=\"#\">How I like to be managed</a></li>        </ul>      </li>      <li class=\"Sub\"><a href=\"#\" class=\"MenuBarItemSubmenu\">Education</a>        <ul>          <li class=\"Sub\"><a href=\"#\">Schools</a></li>          <li class=\"Sub\"><a href=\"#\">Grades</a></li>          <li class=\"Sub\"><a href=\"#\">What I got from school</a></li>          <li class=\"Sub\"><a href=\"#\">Courses Taken</a></li>        </ul>      </li>      <li class=\"Sub\"><a href=\"#\">Personal</a> </li>    </ul>  </li>  <li class=\"Main\"><a href=\"#\" class=\"MenuBarItemSubmenu\" >Projects</a>    <ul class=\"newbar\">      <li class=\"Sub\"><a href=\"#\">Residential</a></li>      <li class=\"Sub\"><a href=\"#\">Commercial</a></li>      <li class=\"Sub\"><a href=\"#\">Hospitality</a></li>      <li class=\"Sub\"><a href=\"#\">3D Design</a></li>      <li class=\"Sub\"><a href=\"#\">Art</a></li>      <li class=\"Sub\"><a href=\"#\">Papers</a></li>      <li class=\"Sub\"><a href=\"#\">Miscellaneous</a></li>    </ul>  </li>  <li class=\"Main\"><a href=\"#\" class=\"MenuBarItemSubmenu\" >Resume</a>      <ul class=\"newbar\">        <li class=\"Sub\"><a href=\"#\">Comprehensive</a></li>        <li class=\"Sub\"><a href=\"#\">Standard</a></li>        <li class=\"Sub\"><a href=\"#\">Skill Based</a></li>        <li class=\"Sub\"><a href=\"#\">Basic Format</a></li>    </ul>  </li>  <li class=\"Main\"><a href=\"#\" >Referrals</a></li>  <li class=\"Main\"><a href=\"#\" class=\"MenuBarItemSubmenu\" >Contact</a>    <ul class=\"newbar\">      <li class=\"Sub\"><a href=\"#\">General Feedback</a></li>      <li class=\"Sub\"><a href=\"#\">Business Feedback</a></li>    </ul>  </li></ul><script type=\"text/javascript\"><!--var MenuBar1 = new Spry.Widget.MenuBar(\"MenuBar1\", {imgDown:\"SpryAssets/SpryMenuBarDownHover.gif\", imgRight:\"SpryAssets/SpryMenuBarRightHover.gif\"});//--></script></body>

@charset \"UTF-8\";/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 *//* Copyright © 2006. Adobe Systems Incorporated. All rights reserved. *//******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************//* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{	margin: 10;	padding: 0;	list-style-type: none;	font-size: 100%;	cursor: default;	width: auto;	position: absolute;	}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url="http://\"http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html\""]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ul.MenuBarActive{	z-index: 1000	;	}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{	margin: 10;	padding: 0;	list-style-type: none;	font-size: 100%;	position: relative;	text-align: left;	cursor: pointer;	float: left;	border-right-width: thin;	border-bottom-width: thin;	border-right-style: groove;	border-bottom-style: groove;	border-right-color: #999999;	border-bottom-color: #999999;	background-image: url(../Navigation/test2/test3_r2_c2.gif);	color: #000000;	}	ul.MenuBarHorizontal li.Main{	margin: 10;	padding: 0;	list-style-type: none;	font-size: 100%;	position: relative;	text-align: left;	cursor: pointer;	width: auto;	float: left;	border-right-width: thin;	border-bottom-width: thin;	border-right-style: groove;	border-bottom-style: groove;	border-right-color: #999999;	border-bottom-color: #999999;	top: 0px;	right: 0px;	background-image: url(../Navigation/test2/test2.gif);}	ul.MenuBarHorizontal li.Main a{	color: #66CC00;	font-weight: bolder;}ul.MenuBarHorizontal li.Sub{position:relative;}/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ul.MenuBarHorizontal ul.newbar{	position:fixed;	background-color: #999999;	width: auto;	top: 60px;	left: 10px;	}ul.MenuBarHorizontal ul{	padding: 0;	list-style-type: none;	font-size: 100%;	z-index: 1020;	cursor: default;	width: 100%;	position: relative;	left: -1000em;	white-space: nowrap;	display: block;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{	left: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{		width: auto;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{	position: absolute;	margin-top: 100%;	margin-left: 95%;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{	left: auto;	top: 0;}/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************//* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{	display: block;	cursor: pointer;		padding: 0.5em 0.75em;	color: #FFFFFF;	text-decoration: none;	text-transform: uppercase;	font-weight: bold;}ul.MenuBarHorizontal li ul{	display:none;	}ul.MenuBarHorizontal li:hover ul, ul.MenuBarHorizontal li:focus ul{	    display:block;}/* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{	color: #FFF;	background-image: url(../Navigation/test2/test2_f3.gif);}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{	color: #FFF;	background-image: url(../Navigation/test2/test2_f2.gif);}/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************//* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenu{	background-image: url(SpryMenuBarDown.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{	background-image: url(SpryMenuBarRight.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a \"hover\" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarDownHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a \"hover\" background image positioned on the far left (95%) and centered vertically (50%) */ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarRightHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************//* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{	position: absolute;	z-index: 1010;}/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{	ul.MenuBarHorizontal li.MenuBarItemIE	{		display: inline;		f\\loat: left;		background: #FFF;	}}

JavaScript (which I do not understand the coding for) (if you know how i can set this box to wrap its text so you all arent having to scroll horizontally, please let me know so i can fix it.)

var Spry;if(!Spry){	Spry = {};}if(!Spry.Widget){	Spry.Widget = {};}// Constructor for Menu Bar// element should be an ID of an unordered list (<ul> tag)// preloadImage1 and preloadImage2 are images for the rollover state of a menuSpry.Widget.MenuBar = function(element, opts){	this.init(element, opts);};Spry.Widget.MenuBar.prototype.init = function(element, opts){	this.element = this.getElement(element);	// represents the current (sub)menu we are operating on	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\'))	{		// bail on older unsupported browsers		return;	}	// load hover images now	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\"), \"\");};// addEventListener for Menu Bar// attach an event to a tag without creating obtrusive HTML codeSpry.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) {}};// createIframeLayer for Menu Bar// creates an IFRAME underneath a menu so that it will show above form controls and ActiveXSpry.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\';};// removeIframeLayer for Menu Bar// removes an IFRAME underneath a menu to reveal any form controls and ActiveXSpry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu){	var layers = menu.parentNode.getElementsByTagName(\'iframe\');	while(layers.length > 0)	{		layers[0].parentNode.removeChild(layers[0]);	}};// clearMenus for Menu Bar// root is the top level unordered list (<ul> tag)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\");};// bubbledTextEvent for Menu Bar// identify bubbled up text events in Safari so we can ignore themSpry.Widget.MenuBar.prototype.bubbledTextEvent = function(){	return (navigator.vendor == \'Apple Computer, Inc.\' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));};// showSubmenu for Menu Bar// set the proper CSS class on this menu to show itSpry.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\");};// hideSubmenu for Menu Bar// remove the proper CSS class on this menu to hide itSpry.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);	}};// initialize for Menu Bar// create event listeners for the Menu Bar widget so we can properly// show and hide submenusSpry.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)	{		// define a simple function that comes standard in IE to determine		// if a node is within another node		listitem.contains = function(testNode)		{			// this refers to the list item			if(testNode == null)			{				return false;			}			if(testNode == this)			{				return true;			}			else			{				return this.contains(testNode.parentNode);			}		};	}		// need to save this for scope further down	var self = this;	this.addEventListener(listitem, \'mouseover\', function(e)	{		if(self.bubbledTextEvent())		{			// ignore bubbled text events			return;		}		clearTimeout(closetime);		if(self.currMenu == listitem)		{			self.currMenu = null;		}		// show menu highlighting		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())		{			// ignore bubbled text events			return;		}		var related = (typeof e.relatedTarget != \'undefined\' ? e.relatedTarget : e.toElement);		if(!listitem.contains(related))		{			clearTimeout(opentime);			self.currMenu = listitem;			// remove menu highlighting			self.removeClassName(link, hasSubMenu ? \"MenuBarItemSubmenuHover\" : \"MenuBarItemHover\");			if(menu)			{				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);			}		}	}, false);};

I know its a lot but if you can help, it would be appreciated as always. I just want to get this project done, but I keep running into problems because I dont understand the code, and then end up trying something else, only to run into more problems. So If I can get this working so I dont have to deal with it anymore Id be extremely greatful.

Link to comment
Share on other sites
jcc5018 Newbie

jcc5018

Posted
  • Author
Posted
Have a look at the drop-line menus found here.(third column on the right)or this demo : http://www.jlhaslip.trap17.com/tests/index.html (not yet working in IE) for non ie browsers.
Actually I have already been to the cssplay site, (thats how i figured out to call it a drop line menu actually. This example here is very similar to what i want to accomplish http://www.cssplay.co.uk/menus/pro_dropline6.html with a few things that Id have to change though. For example his menu has two different colors for the 2nd layer and im not sure why that is, and I feel its missing a JS code that changes the current class to the proper page. I attempted to copy his settings into my own file along with a few other tutuirals i have found but I have been unable to achieve the same results. The closest Ive got to what I am looking for is the code I pasted before. But I am having trouble with the third layer and the placement. I know one thing that has been making a difference is changing the positions to absolute versus relative. There are probably elements in which i shouldnt have the position set at all but im not sure which those are. I would also probably have to make the list have a fixed position as well to get them in the proper locations on my site, but then i still have the issue of keeping the selected menu displayed while my mouse moves past the gap caused and to the appropriate link.
Link to comment
Share on other sites
jcc5018 Newbie

jcc5018

Posted
  • Author
Posted

So i think I have solved the mystery of placing the bars at different levels, but I am still having a problem with a few things. http://php.scripts.psu.edu/jcc5018/testindex.phpFirst, How would I position the 1st level bar so it is always aligned right next to the logo on the site. Currently I tried putting in a fixed position, but that will change depending on the browser size.second, I am still having trouble making this work in IE and I'm not sure how to fix it. IE doesnt display the appropriate background, and the submenus include another text box with the word false in it. Third, I had to comment out the submenu classes that displayed the arrows if it had a submenu. I would really like to keep these, but when I do, the proper color of the button while hovering doesnt display. How can I fix this?fourth, I got the button backgrounds to change for rollovers and the seperate levels, But for some reason I can't get the text color to change with it. Im not sure why this is. Also, Is there a way to have the 2nd and 3rd levels centered horizontally to the page?Here is the current CSS code, again if you can help me figure out which parts of the code I really don't need or are repetitive, please let me know:I'd like to do this with minimum javascript if possible.

@charset "UTF-8";/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 *//* Copyright © 2006. Adobe Systems Incorporated. All rights reserved. *//******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************//* The outermost container of the Menu Bar, an auto width box with no margin or padding */ul.MenuBarHorizontal{	padding: 0;	list-style-type: none;	font-size: 100%;	cursor: default;	width: auto;	position: relative;	margin-top: 10px;	margin-right: 10px;	left: auto;	top: 100px;	z-index: auto;	float:right;}/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html"]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ul.MenuBarActive{	z-index: 1000	;	}/* Menu item containers, position children relative to this container and are a fixed width */ul.MenuBarHorizontal li{	margin: 0;	padding: 0;	list-style-type: none;	font-size: 100%;	text-align: left;	cursor: pointer;	width:auto;	float: left;	border-right-width: thin;	border-bottom-width: thin;	border-right-style: groove;	border-bottom-style: groove;	border-right-color: #999999;	border-bottom-color: #999999;	background-image: url(../navigation/test2/test2/test3_r2_c2.gif);		}	ul.MenuBarHorizontal li.Main{	top: 0px;	right: 0px;	background-image: url(../navigation/test2/test2/test2.gif);}	ul.MenuBarHorizontal li.Main a{	color: #66CC00;	font-weight: bolder;}/*ul.MenuBarHorizontal li.Main a:hover{	color: #0033CC;	font-weight: bolder;	background-image: url(../navigation/test2/test2/test2_f2.gif);			}ul.MenuBarHorizontal li.Sub{position:relative;}*//* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) ul.MenuBarHorizontal ul.newbar{	position:fixed;	background-color: #999999;	width: auto;	top: 60px;	}*/ul.MenuBarHorizontal ul{	padding: 0;	list-style-type: none;	font-size: 100%;	z-index: 1020;	cursor: default;	width: 100%;	position: fixed;	float:left;	left: -1000em;	white-space: nowrap;	display: block;	width: auto;	top: 60px;	}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{	position:fixed;	left: 0px;	margin-left: 10%;	margin-top: 100px;	width: auto;}/* Menu item containers are same fixed width as parent */ul.MenuBarHorizontal ul li{		width: auto;	float: left;}/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ul.MenuBarHorizontal ul ul{	padding: 0;	list-style-type: none;	font-size: 100%;	z-index: 1020;	cursor: default;	width: 100%;	position: fixed;	float:left;	left: -1000em;	white-space: nowrap;	display: block;	width: auto;	top: 60px;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{	position:fixed;	left: 10px;	margin-top:140px;}/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************//* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{	display: block;	cursor: pointer;		padding: 0.5em 0.75em;		text-decoration: none;	text-transform: uppercase;	font-weight: bold;}ul.MenuBarHorizontal li:hover ul, ul.MenuBarHorizontal li:focus ul{	    display:block;}/* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{	color: #FFF;	background-image: url(../navigation/test2/test2/test3_r2_c2_f2.gif);}/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{	color: #FFF;	background-image: url(../navigation/test2/test2/test2_f2.gif);}/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************//* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) ul.MenuBarHorizontal a.MenuBarItemSubmenu{	background-image: url(SpryMenuBarDown.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}*//* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{	background-image: url(SpryMenuBarRight.gif);	background-repeat: no-repeat;	background-position: 95% 50%;} *//* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarDownHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}*//* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{	background-image: url(SpryMenuBarRightHover.gif);	background-repeat: no-repeat;	background-position: 95% 50%;}*//******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************//* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ul.MenuBarHorizontal iframe{	position: absolute;	z-index: 1010;}/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */@media screen, projection{	ul.MenuBarHorizontal li.MenuBarItemIE	{		display: inline;		f\loat: left;		background: #FFF;	}}

Link to comment
Share on other sites
  • 4 weeks later...
jcc5018 Newbie

jcc5018

Posted
  • Author
Posted

So I re worked my navigational menu and I almost have it figured out. Two issues I am having though are getting the second layer of links to stay put while my mouse moves to its location. Currently since there is a gap in between the 1st set of links and the second, the mouse can't get to the second layer of links without them disappearing. I would really like it even more if I can have the active link set stay put if a page from that link set is loaded. The second issue I am having, though also closer to being solved, is dealing with Internet explorer. The second layer of links do not show up, and they are also not displayed in the proper place. Layer one needs to be aligned with the bottom of the logo and to the right of the logo, while layer two needs to be placed between the colored bars. Here's the CSS

@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}#nav {	font-family: "Times New Roman", Times, serif;	width:auto;	height:38px;	position:relative;	margin:10px;	font-size:12px;	z-index:100;	text-transform: uppercase;	font-weight: bolder;	white-space: nowrap;	top:90px;}#nav ul {	list-style-type: none;	}#nav ul li {	float:left;	border-left:1px solid #eee;	width:auto;	background-image: url(navigation/images2/span2.jpg);	background-repeat: no-repeat;	background-position: left;}#nav ul li a, #nav ul li a:visited {	display:block;	text-decoration:none;	padding-left:10px;	height:38px;	line-height:38px;	color:#FFFFFF;	background-image: url(navigation/images2/end.jpg);	background-repeat: no-repeat;	background-position: right;	padding-right:10px;}#nav table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}#nav ul li ul {	position:absolute;	top:54px;	left:0px;	visibility: hidden;	}#nav ul li:hover a,#nav ul li a:hover {	color: #FFF;	background-image: url(navigation/images2/span2_over.jpg);	background-repeat: no-repeat;	background-position: left;}#nav ul li:hover ul,#nav ul li a:hover ul {	left:0;	width:auto;	color:#fff;	background-color: #003399;	visibility: visible;}#nav ul li:hover ul li,#nav ul li a:hover ul li {	float:left;	border:0;	border-left:1px solid #eee;	background-image: url(navigation/images2/span2_down.jpg);	background-repeat: no-repeat;	background-position: left;	}	#nav ul li:hover ul li ul,#nav ul li a:hover ul li a ul {color: #FFF;	visibility:hidden;	position:absolute;	left:0;	top:38px;	display:block;}#nav ul li:hover ul li a,#nav ul li a:hover ul li a {		background-image: url(navigation/images2/end_down.jpg);	background-repeat: no-repeat;	background-position: right;	}

The HTML

<link href="testcss.css" rel="stylesheet" type="text/css" /><a  href="?page=main"><img src="navigation/header_images/logo.jpg" alt="Home Logo" width="229" height="126" border="0" align="left"  /></a><div id="nav"><ul >  <li ><a href="?page=main">Home<!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->      <ul >        <li ><a href="?page=main">Main</a></li>        <li ><a href="?page=news">News</a></li>        <li ><a href="?page=history">History</a></li>      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li>  <li><a href="?page=skills">About Me<!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->    <ul>      <li ><a href="?page=skills">Skills</a> </li>      <li ><a href="?page=exp">Experience</a> </li>      <li ><a href="?page=strength">Strengths</a></li>      <li ><a href="?page=goals">Goals</a></li>      <li ><a href="?page=work">Work</a> </li>      <li ><a href="?page=edu">Education</a> </li>      <li ><a href="?page=personal">Personal</a> </li>    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li>  <li ><a href="?page=projects" >Projects<!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->    <ul >      <li ><a href="#">Projects</a></li>      <li ><a href="#">Papers</a></li>       </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li>  <li ><a href="?page=complete"  >Resume<!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->      <ul >        <li ><a href="?page=complete">Comprehensive</a></li>        <li ><a href="?page=standard">Standard</a></li>        <li ><a href="?page=skill">Skill Based</a></li>        <li ><a href="?page=basic">Basic Format</a></li>    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li>  <li ><a href="?page=referral" >Referrals<!--[if IE 7]><!--></a><!--<![endif]-->	</li>  <li ><a href="#"  >Contact<!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->    <ul >      <li ><a href="#">General Feedback</a></li>      <li ><a href="#">Business Feedback</a></li>    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->  </li></ul></div><p><img src="navigation/header_images/colorbar.gif" width="100%" height="58" /></p>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...