PDA

View Full Version : better solution for menu

Rachy06
04-15-2006, 05:20 PM
I have created a javascript menu, but unfortunatley it has a few bugs, and takes alot of code. I was just wondering if there was a way of creating a simlar sort of idea, in a more effective way??

take a look at the menu on this page (http://www.cfab.co.uk)
Dan Williamson
04-15-2006, 07:34 PM
That looks horrible in Firefox. Why not use CSS?

<style type="text/css">
body {
font-size:1%;
color:#fff;
}
.menu {
display:none;
}
.container {
color:#000;
width:90px;
height:18px;
display:block;
background:#000000;
border:1px solid #fff;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family:tahoma, verdana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.container:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#63a401;
}
a.inside, a.inner:visited {
display:block;
width:89px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
background:#3798cb;
}
a.inside:hover {
background:#add;
}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
.container {
display:none;
}
.menu {
display:block;
}
a.outside, a.outer:visited {
color:#000;
width:90px;
height:18px;
display:block;
background:#63a401;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family:tahoma, vardana, arial, sans-serif;
font-size:10px;
line-height:18px;
overflow:hidden;
}
a.outside:hover {
color:#fff;
background:##63a401;
overflow:visible;
}
a.outside:hover table {
display:block;
background:#3798cb;
border-collapse:collapse;
}
a.inside, a.inner:visited {
display:block;
width:88px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none; color:#000;
font-family:tahoma, vardana, arial, sans-serif;
font-size:10px;
text-align:center;
}
a.inside:hover {
background:#add;
}
/*]]>*/
</style>
<![endif]-->
</head>
<body>

<div class="menu">
<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>

<a class="outside" href="#">Menu Name
<table><tr><td>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</td></tr></table>
</a>
</div>

<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>
<div class="container">
Menu Name<br />
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
<a class="inside" href="#">Link</a>
</div>
Rachy06
04-15-2006, 08:49 PM
because im crap at css
Dan Williamson
04-15-2006, 08:53 PM
Lol. CSS is something work looking into as most Javascript menus I have seen in the past two months are not cross-browser compatability if you wish I will style a CSS menu to your specifications just PM me if you want me to.
kewlceo
04-15-2006, 08:54 PM
Nice cross-browser CSS menu solution, Dan.
felgall
04-16-2006, 12:04 AM
because im crap at css

A lot of Javascript coding (eg menus) involves manipulating CSS from Javascript.

The order to learn for web pages is HTML first, CSS second, then Javascript third. You can't hope to do anything significant with Javascript until you know the first two reasonably well.

Any menu script will use lots of CSS and perhaps some Javascript that manipulates that CSS.
Kravvitz
04-16-2006, 12:06 AM
Dan, there's a problem with that. <tables> and other block-level elements are not allowed in <a> elements.

Use the Suckerfish menu system. It's very similar, but it doesn't resort to invalid X/HTML. The two variants at positioniseverything.net have some extra benefits not found in the other variants.
http://www.alistapart.com/articles/dropdowns/
http://www.alistapart.com/articles/horizdropdowns/
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/hybrid/
http://www.csscreator.com/menu/multimenu.php
http://www.positioniseverything.net/css-flyout.html
http://www.positioniseverything.net/css-dropdowns.html
http://www.tjkdesign.com/articles/dropdown/
Dan Williamson
04-16-2006, 12:54 AM
Nice post there Kravvitz I don't usually resort to tables but then again I don't usually resort to Drop-Down menus so I had to try and do one quickly.
bpaulsen2000
04-16-2006, 02:27 AM
http://popup.jscentral.com/index.html
nepala
04-16-2006, 01:50 PM
hey Rachy06

I am also getting same problem thanks for yr nice question ?

Softwebs Nepal
Rachy06
04-16-2006, 03:34 PM
the problem is that a javascript menu works fine in iE, but not so well in other browsers, but sometimes this isn't a major issue, especially for smaller sites (ie. not for big companies) because most people use iE anyway, especially in the UK
Dan Williamson
04-16-2006, 07:59 PM
It is true that most people do actually use IE but Firefox is now claimed to be the best browser with Opera at it's heels especially if Google buy Opera =]

I suggest you look into cross-browser compatability as it will come back to haunt you and get you disrespect when IE is a low browser or even when it is upto web standards.
Kravvitz
04-17-2006, 03:27 AM
Don't forget about Safari.

Check the following links out. Keep in mind that different websites have different audiences, so the browser statistics for one sight may be very different from those of another site.
http://www.thecounter.com/stats/2006/March/browser.php
http://www.upsdell.com/BrowserNews/stat.htm
http://www.w3schools.com/browsers/browsers_stats.asp
http://johnhaller.com/jh/useful_stuff/browser_statistics/
Rachy06
04-17-2006, 04:52 AM
good job the site works slightly in firefox lol
Dan Williamson
04-17-2006, 05:34 PM
Tableless drop-down menu

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>
<style type="text/css">
body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
position: relative;
float: left;
width:149px;
}

li ul {
position: absolute;
left: 0;
top: auto;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
}

* html ul li a {height:1%}


li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: blue;
}

li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */

</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>

<li><a href="#">Hmm</a></li>
<li><a href="#">Hmmm</a></li>
<li><a href="#">Hmmm</a></li>
</ul>
</li>
<li><a href="#">Something..</a>
<ul>
<li><a href="#">Web Design</a></li>

<li><a href="#">SEO</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">Whatever You Want</a>
<ul>

<li><a href="#">Dan Williamso</a></li>
<li><a href="#">Dan Williamson</a></li>
<li><a href="#">Dan Williamson</a></li>
<li><a href="#">Dan Williamson</a></li>
</ul>
</li>
</ul>
ttttt
04-17-2006, 07:51 PM
Try http://www.opencube.com/:thumbsup: