Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Horizontal CSS and Javascript menu

Reply
Thread Tools

Horizontal CSS and Javascript menu

 
 
polo
Guest
Posts: n/a
 
      03-09-2006
Hi
i am trying to get a horizontal menu and sub menu in css, which works
great on my Firefox
But, in order to get around the ie hover bug, i included some
javascript which gives me a strange result... I admit i got recent help
by Stephane on the js code (thanks)

here is my code for anyone with a suggestion as to how to mimic the css
properties "inline" or "float" on ie and get the same result as in FF:

<html>
<head>

<title></title>

<style type="text/css">
/*-------------------------------------------------------------*/

#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
background:#3c5279; /*#5f7eb3;*/
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}

#menu li{
float:left;
display:block;
padding:2px 1px;
}
#menu li a{
display:inline;
padding:2px 6px;
color:#FFFFFF;
text-decoration:none;
}
#menu li a:hover{
color: orange;
}

#menu li ul{
display:none;
}
#menu li:hover ul{
display:block;
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}

#menu ul{
position:absolute;
background:#CCCCCC;
list-style:none;
z-index:1;
}

..un{
margin:2px -1px;
}
..deux{
margin:2px -79px;
}
..trois{
margin:2px -157px;
}

#menu ul li{
position:relative;
float:none;
}

#menu ul li a{
display:inline;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}

ul#newmenu {
font-weight:bold;
color:#000000;
}
ul#newmenu li {
display: inline;
}
ul#newmenu li a:hover {
color: orange;
}

/*-------------------------------------------------------------*/
</style>

<script type="text/javascript">
/* javascript pour l'idiot d'Internet Explorer */
// is it IE ?
var ie=false; /*@cc_on ie=true; @*/

function roll(quoi) {
var L = quoi.getElementsByTagName('UL')[0];
L.style.display = L.style.display==''? 'block' : '';
}

onload = function() { if(ie) {
var U = document.getElementById('menu').getElementsByTagNa me('LI');
for(var i=0;i<U.length;i++)
if(U[i].getElementsByTagName('UL') &&
U[i].getElementsByTagName('UL').length>0)
{
U[i].onmouseover = function() {roll(this);};
U[i].onmouseout = function() {roll(this);};
}
}
}
</script>
</head>

<body>

<!-- menu customisť ******************************* -->
<ul id="menu">

<li>
<a href="#"><b>Menu 1</b></a>&nbsp;|
<ul id="newmenu" class="un">
<li><a href="#">Menu 1.1</a></li>&nbsp;|
<li><a href="#">Menu 1.2</a></li>&nbsp;|
<li><a href="#">Menu 1.3</a></li>&nbsp;|
<li><a href="#">Menu 1.4</a></li>&nbsp;|
<li><a href="#">Menu 1.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 2</b></a>&nbsp;|
<ul id="newmenu" class="deux">
<li><a href="#">Menu 2.1</a></li>&nbsp;|
<li><a href="#">Menu 2.2</a></li>&nbsp;|
<li><a href="#">Menu 2.3</a></li>&nbsp;|
<li><a href="#">Menu 2.4</a></li>&nbsp;|
<li><a href="#">Menu 2.5</a></li>
</ul>
</li>

<li>
<a href="#"><b>Menu 3</b></a>&nbsp;|
<ul id="newmenu" class="trois">
<li><a href="#">Menu 3.1</a></li>&nbsp;|
<li><a href="#">Menu 3.2</a></li>&nbsp;|
<li><a href="#">Menu 3.3</a></li>&nbsp;|
<li><a href="#">Menu 3.4</a></li>&nbsp;|
<li><a href="#">Menu 3.5</a></li>
</ul>
</li>

</ul>
<br />
<br />

</body>
</html>

 
Reply With Quote
 
 
 
 
Julian Turner
Guest
Posts: n/a
 
      03-09-2006

polo wrote:

[snip]
> Hi
> i am trying to get a horizontal menu and sub menu in css, which works
> great on my Firefox
> But, in order to get around the ie hover bug,

[/snip]

Apologies. Without going into your JavaScript, have you visited
<URL:http://www.cssplay.co.uk>?

I think the site demonstrates what you are looking for in PURE CSS,
including IE.

Quite astonishing.

Regards

Julian Turner

 
Reply With Quote
 
 
 
 
polo
Guest
Posts: n/a
 
      03-09-2006
Thank you Julian
What a great site !!!
it does not solve my problem directly, but i may find a solution by
including my submenu in a table.... (horrible thought, i know) as
described in the vertical dropdown menu example. now it makes the code
rather heavy, and i dont know yet if i can do that in a horizontal
table...
Thanks again
anybody else with help on the javascript there ?

what about the whatever:hover htc inclusion ?
http://www.xs4all.nl/~peterned/csshover.html
i find that it works to mimic the hover css tag, but the positionning
is totally wrong...
any idea on that ?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Menu items alignment for a horizontal menu Emil ASP .Net 1 12-11-2007 12:01 PM
IE7, zoom and horizontal menu (CSS) Arto Steiner HTML 1 05-25-2007 12:05 AM
Horizontal Menu Navigation Web Control - Spaces Between Menu Items Philip ASP .Net Web Controls 1 03-21-2006 01:55 PM
Horizontal CSS and Javascript menu polo Javascript 0 03-08-2006 06:11 PM
Horizontal Menu and Sub menu in asp.net 2.0 itzikkl ASP .Net 0 03-27-2005 12:50 PM



Advertisments