Jump to content

list menu...

yoshida

By yoshida
in CSS

 Share

Recommended Posts

yoshida Member

yoshida

Posted
Posted

Hi. I know css-manipulated list based menus are causing headaches. Now I've experienced it. I did the <ul id=nav> thingie and css-ed the nested lists, and I must say it's perhaps the most advanced thing I did with CSS since rounded css corners. I'm pretty satisfied with it.I hereby present to Teh World, a Photoshop and CSS co-operation: *drumroll*the Diagonal Dropdown Menu!*k-tsjinnnng*okay perhaps abit overdone, but if you're looking at this thing with Firefox2.01 or Opera9.10 it should display okay (at least on Windows machines).If you look at it with IE6 (and perhaps IE7) however, well... see for yourself.The rollover images cascade topleft to bottomr... solved - just had to replace <li><div id=home> with <li id=home> etc.The dropdown list appears next to it instead of underneath.The lists look narrower than specified.Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>streetwise</title><style type="text/css"><!--body { margin: 0; height: 100%; background-color: #ffffff; font-family: arial; }#home { position: absolute; float: left; margin-top: 112px; padding: 0;}#blog { position: absolute; float: left; margin-top: 103px; margin-left: 100px; padding: 0;}#cont { position: absolute; float: left; margin-top: 94px; margin-left: 200px; padding: 0; }ul { list-style: none;} li ul { display: none;} li:hover ul, li.over ul{ position: absolute; display: block; margin-top: -14px; text-align: left; font-family: monotype corsiva; font-size: 20px; color: #6699ff; padding: 20px; width: 100px; height: auto; background-image: url(img/base/menu/menubg.gif);} li a:hover { color: #6699ff; text-decoration: underline; font-weight: 600; }li a { color: #6699ff; text-decoration: none; }#head {	position: relative; height: 170px;	width: 760px; margin: 0 0 0 0; background-image: url(img/base/head/head.gif);}.container {	margin: 0 0 20px 15px; width: 780px; background-color: #ffffff;}--></style><script type="text/javascript"><!--startList = function() {   if (document.all&&document.getElementById) {      navRoot = document.getElementById("nav");      for (i=0; i<navRoot.childNodes.length; i++) {         node = navRoot.childNodes[i];         if (node.nodeName=="LI") {            node.onmouseover=function() {               this.className+=" over";            }            node.onmouseout=function() {               this.className=this.className.replace(" over", "");            }         }      }   }}window.onload=startList;--></script> </head><body><div id="head"><ul id="nav">	<li id="home"><img src="img/base/menu/home.gif" border="0" alt="Hi, I'm a list item." />		<ul>			<li><a href="index.html">is1</a></li>			<li><a href="index.html">is2</a></li>			<li><a href="index.html">is3</a></li>		</ul>	</li>		<li id="blog"><img src="img/base/menu/blog.gif" border="0" alt="Hi, I'm a list item." />		<ul>			<li><a href="index.html">is1</a></li>			<li><a href="index.html">is2</a></li>		</ul>	</li>		<li id="cont"><img src="img/base/menu/cont.gif" border="0" alt="Hi, I'm a list item." />		<ul>			<li><a href="index.html">is1</a></li>			<li><a href="index.html">is2</a></li>			<li><a href="index.html">is3</a></li>			<li><a href="index.html">is4</a></li>			<li><a href="index.html">is5</a></li>			<li><a href="index.html">is6</a></li>		</ul>	</li></ul></div><div class="container"><p>Hello world !</p></div></body></html>

Help plz :)

Link to comment
Share on other sites
yoshida Member

yoshida

Posted
  • Author
Posted

I was thinking of using a browser sniffer. But I also found out position: absolute; is part of the cause (now it's only 20px to the right of the intended position). Defining a (any) margin:left does the job.resultCSS

body { margin: 0; height: 100%; background-color: #ffffff; font-family: arial; }#home { position: absolute; float: left; margin-top: 112px; padding: 0;}#blog { position: absolute; float: left; margin-top: 103px; margin-left: 100px; padding: 0;}#cont { position: absolute; float: left; margin-top: 94px; margin-left: 200px; padding: 0; }ul { list-style: none;} li ul { display: none; left: 0;}li:hover ul, li.over ul{ display: block; margin: -14px 0 0 10px; text-align: left; font-family: monotype corsiva; font-size: 20px; color: #6699ff; padding: 20px; width: 100px; height: auto; background-image: url(img/base/menu/menubg.gif);} li a:hover { color: #6699ff; text-decoration: underline; font-weight: 600; }li a { color: #6699ff; text-decoration: none; }#head {	position: relative; height: 170px;	width: 760px; margin: 0 0 0 0; background-image: url(img/base/head/head.gif);}.container {	margin: 0 0 20px 15px; width: 780px; background-color: #ffffff;}

Javascript for IE6:

startList = function() {   if (document.all&&document.getElementById) {	  navRoot = document.getElementById("nav");	  for (i=0; i<navRoot.childNodes.length; i++) {		 node = navRoot.childNodes[i];		 if (node.nodeName=="LI") {			node.onmouseover=function() { this.className+=" over"; }			node.onmouseout=function() { this.className=this.className.replace(" over", ""); }		 }	  }   }}window.onload=startList;

Usage:

<ul id="nav">	<li id="anydiv"><img src="any img" border="0" alt="Hi, I'm a list header." />		<ul>			<li><a href="index.html">List item 1</a></li>			<li><a href="index.html">List item 2</a></li>			<li><a href="index.html">List item 3</a></li>		</ul>	</li></ul>

I added a rollover image (still need to figure that one out for IE however, might become another piece of js) and menu-opacity. This is becomming more like a proof of concept than a troubleshooting topic :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...