P
polo
Hello everyone
i am trying to get a horizontal menu and sub menu both in css, which
works ok on firefox, and in javascript, which does not work ok with
internet explorer...
i admit my javascript knowledge is very limited.
here is my code for anyone with a suggestion as to how to mimic the css
properties "inline" or "float"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<title</title>
<style type="text/css">
/*-------------------------------------------------------------*/
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
/*position:relative;*/
display:block;
/*margin: 1;*/
/*left: 15;*/
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}
ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
/*background:#5f7eb3;*/
background:#3c5279;
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
}
/*
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
*/
ul#menu li{
float:left;
display:block;
padding:2px 1px;
}
ul#menu li.first{
padding-left:2px;
}
ul#menu li.last{
padding-right:2px;
}
ul#menu li a{
display:block;
padding:2px 6px;
/*border:1px solid #CCCCCC;*/
color:#FFFFFF;
text-decoration:none;
}
ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
}
ul#menu ul{
position:absolute;
/*position:relative;*/
background:#CCCCCC;
/*background:#FFFFFF;*/
list-style:none;
margin:0px 0px;
padding:0px;
/*width:400px;*/
z-index:1;
}
ul#menu ul.un{
margin:2px -2px;
}
ul#menu ul.deux{
margin:2px -84px;
}
ul#menu ul.trois{
margin:2px -166px;
}
ul#menu ul ul{
top:15px;
left:10px;
z-index:2;
}
ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu ul li a{
display:inline;
margin:0px;
padding:0px;
width:400px;
border:none;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}
ul#menu ul li a span{
display:inline;
width:400px;
_width:500px;
margin:0px 2px;
border:none;
cursor:hand;
}
ul#menu ul li a.next span{
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
}
ul#menu ul li a:hover span{
background-color:#000099;
color:#FFFFFF;
border:none;
background-position: -306px 0;}
ul#menu ul li.first{
padding-left:0px;
display: inline;
}
ul#menu ul li.first a{
padding-top:2px;
}
ul#menu ul li.last{
padding-right:0px;
}
ul#menu ul li.last a{
padding-bottom:2px;
}
ul#newmenu li {
display: inline;
}
/*-------------------------------------------------------------*/
</style>
<script type="text/javascript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI.onmouseover = function(){
hover(this);
}
LI.onmouseout = function(){
hover(this);
}
}
}
</script>
</head>
<body onLoad="setHover()">
<a name="top"></a>
<!-- menu customisé ******************************* -->
<ul id="menu">
<li class="first">
<a href="#"><b>Menu 1 |</b></a>
<ul id="newmenu" class="un">
<li><a href="#"><span>Menu 1.1</span> |</a></li>
<li><a href="#"><span>Menu 1.2</span> |</a></li>
<li><a href="#"><span>Menu 1.3</span> |</a></li>
<li><a href="#"><span>Menu 1.4</span> |</a></li>
<li><a href="#" class="disabled"><span>Menu 1.5</span></a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 2 |</b></a>
<ul id="newmenu" class="deux">
<li><a href="#"><span>Menu 2.1</span> |</a></li>
<li><a href="#"><span>Menu 2.2</span> |</a></li>
<li><a href="#"><span>Menu 2.3</span> |</a></li>
<li class="last"><a href="#" class="disabled"><span>Menu
2.4</span> |</a></li>
<li class="first"><a href="#"><span><b>Menu
2.5</b></span></a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 3 |</b></a>
<ul id="newmenu" class="trois">
<li><a href="#"><span>Menu 3.1</span> |</a></li>
<li><a href="#"><span>Menu 3.2</span> |</a></li>
<li><a href="#"><span>Menu 3.3</span> |</a></li>
<li class="last"><a href="#" class="disabled"><span>Menu
3.4</span> |</a></li>
<li class="first"><a href="#"><span><b>Menu
3.5</b></span></a></li>
</ul>
</li>
</ul>
<br />
<br />
</body>
</html>
i am trying to get a horizontal menu and sub menu both in css, which
works ok on firefox, and in javascript, which does not work ok with
internet explorer...
i admit my javascript knowledge is very limited.
here is my code for anyone with a suggestion as to how to mimic the css
properties "inline" or "float"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<title</title>
<style type="text/css">
/*-------------------------------------------------------------*/
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
/*position:relative;*/
display:block;
/*margin: 1;*/
/*left: 15;*/
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}
ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
/*background:#5f7eb3;*/
background:#3c5279;
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
}
/*
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
*/
ul#menu li{
float:left;
display:block;
padding:2px 1px;
}
ul#menu li.first{
padding-left:2px;
}
ul#menu li.last{
padding-right:2px;
}
ul#menu li a{
display:block;
padding:2px 6px;
/*border:1px solid #CCCCCC;*/
color:#FFFFFF;
text-decoration:none;
}
ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
}
ul#menu ul{
position:absolute;
/*position:relative;*/
background:#CCCCCC;
/*background:#FFFFFF;*/
list-style:none;
margin:0px 0px;
padding:0px;
/*width:400px;*/
z-index:1;
}
ul#menu ul.un{
margin:2px -2px;
}
ul#menu ul.deux{
margin:2px -84px;
}
ul#menu ul.trois{
margin:2px -166px;
}
ul#menu ul ul{
top:15px;
left:10px;
z-index:2;
}
ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu ul li a{
display:inline;
margin:0px;
padding:0px;
width:400px;
border:none;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}
ul#menu ul li a span{
display:inline;
width:400px;
_width:500px;
margin:0px 2px;
border:none;
cursor:hand;
}
ul#menu ul li a.next span{
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
}
ul#menu ul li a:hover span{
background-color:#000099;
color:#FFFFFF;
border:none;
background-position: -306px 0;}
ul#menu ul li.first{
padding-left:0px;
display: inline;
}
ul#menu ul li.first a{
padding-top:2px;
}
ul#menu ul li.last{
padding-right:0px;
}
ul#menu ul li.last a{
padding-bottom:2px;
}
ul#newmenu li {
display: inline;
}
/*-------------------------------------------------------------*/
</style>
<script type="text/javascript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI.onmouseover = function(){
hover(this);
}
LI.onmouseout = function(){
hover(this);
}
}
}
</script>
</head>
<body onLoad="setHover()">
<a name="top"></a>
<!-- menu customisé ******************************* -->
<ul id="menu">
<li class="first">
<a href="#"><b>Menu 1 |</b></a>
<ul id="newmenu" class="un">
<li><a href="#"><span>Menu 1.1</span> |</a></li>
<li><a href="#"><span>Menu 1.2</span> |</a></li>
<li><a href="#"><span>Menu 1.3</span> |</a></li>
<li><a href="#"><span>Menu 1.4</span> |</a></li>
<li><a href="#" class="disabled"><span>Menu 1.5</span></a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 2 |</b></a>
<ul id="newmenu" class="deux">
<li><a href="#"><span>Menu 2.1</span> |</a></li>
<li><a href="#"><span>Menu 2.2</span> |</a></li>
<li><a href="#"><span>Menu 2.3</span> |</a></li>
<li class="last"><a href="#" class="disabled"><span>Menu
2.4</span> |</a></li>
<li class="first"><a href="#"><span><b>Menu
2.5</b></span></a></li>
</ul>
</li>
<li>
<a href="#"><b>Menu 3 |</b></a>
<ul id="newmenu" class="trois">
<li><a href="#"><span>Menu 3.1</span> |</a></li>
<li><a href="#"><span>Menu 3.2</span> |</a></li>
<li><a href="#"><span>Menu 3.3</span> |</a></li>
<li class="last"><a href="#" class="disabled"><span>Menu
3.4</span> |</a></li>
<li class="first"><a href="#"><span><b>Menu
3.5</b></span></a></li>
</ul>
</li>
</ul>
<br />
<br />
</body>
</html>