473,320 Members | 2,098 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Horizontal CSS and Javascript menu

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>

Mar 9 '06 #1
2 2388

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

Mar 9 '06 #2
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 ?

Mar 9 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Maria Gonzalez | last post by:
Hello, I would like to know if it is possible to create a Navigational Menu that has all the Major Categories on top row, then when a mouse is over it, the bottom row appears with sublinks but...
13
by: elad | last post by:
Hi The Menu doesn't work properly when I have 2 frame and the Menu popup frame=document target frame, when I choose item in the menu the doc opened and the menu get stuck. Here is the code...
7
by: addled | last post by:
Hi there, after reading posts here for a few months, I've built the courage to see if someone can see where I"m going wrong in the webpage I've been working on. In particular the horizontal nav...
15
by: theo | last post by:
Hi, I'm working on a horizontal row menu, to use like folder tabs. Does anyone know what the CSS style "cursor" is supposed to produce? Any working samples? I put it in the code, but can't see...
2
by: Craig van Nieuwkerk | last post by:
Hi. I am trying to create a horizontal menu like the one here http://www.milonic.com/menusample25.php where the drop down menu for each item it horizontal on a new row instead of vertical. Another...
5
by: Chris Beall | last post by:
Objective: Using an HTML list, create a horizontal nav menu with these characteristics: - All menu items have the same width at all times. - When the window width is reduced, the menu items...
9
by: Verona Busch | last post by:
Hi everybody, I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover. I found a lot of examples for horizontal lists which open...
4
by: sindhu | last post by:
Hello please some one tell me how to make a menu appear horizontal or vertical in javascript and css. I'm bugged up after searching for one factor that makkes a menu8 appear horizontal or vertical...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.