11 replies [Last post]
ytw
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2004-05-10
Posts: 5
Points: 0

Hi folks

Light Weight Multi Level Drop Down Menu: very nice menus !!!

I have no problems with the horizontal menus, but then when I try to use only the vertical menu I only can see parents level. No slide out occurs. I am running, Windows XP/ IE 6.
Mozilla & opera does display the slide out well Sad

Any suggestion ?¿

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<meta name="Author" content="Tony Aslett" />
<meta name="Keywords" content="css, cascading style sheet, color, attribute, class, style, id" />
<meta name="Title" content="CSS Creator" />
<meta name="Description" content="Live CSS Cascading Style Sheet Layout generator for your web site" />
<link rel="stylesheet" type="text/css" href="subSilverCSS_2.css" />
<style type="text/css">

     @import url("multimenuvert.css");
     
     #holdm{position:absolute; top:50px; left:20px; margin-left:-2.5em; z-index:100; width:80%;}
     
     #vertm{width:15em; float:left;}

</style>


<script type="text/javascript" src="multimenu.js" ></script>


<title>CssCreator->Multi Level Menu</title>
</head>
<body></body>

<div id="vertm" class="noprint">
<h3>Vertical Menu</h3> 

  <ul id="vertnav" >
			
    <li> <a href="#" title="Item 1">Item 1</a> 
      <ul>
        <li><a href="#" title="Sub Item 1.1">Sub Item 1.1</a></li>
        <li><a href="#" title="Sub Item 1.2">Sub Item 1.2</a> 
          <ul>
            <li><a href="#" title="Sub Item 1.2.1">Sub Item 1.2.1</a></li>
            <li><a href="#" title="Sub Item 1.2.2">Sub Item 1.2.2</a></li>
            <li><a href="#" title="Sub Item 1.2.3">Sub Item 1.2.3</a></li>
            <li><a href="#" title="Sub Item 1.2.4">Sub Item 1.2.4</a></li>
            <li><a href="#" title="Sub Item 1.2.5">Sub Item 1.2.5</a></li>
          </ul>
        </li>
        <li><a href="#" title="Sub Item 1.3">Sub Item 1.3</a></li>
        <li><a href="#" title="Sub Item 1.4">Sub Item 1.4</a></li>
        <li><a href="#" title="Sub Item 1.5">Sub Item 1.5</a> 
          <ul>
            <li ><a href="#" title="Sub Item 1.5.1">Sub Item 1.5.1</a></li>
            <li><a href="#" title="Sub Item 1.5.2">Sub Item 1.5.2</a></li>
          </ul>
        </li>
      </ul>
    </li>

			
    <li> <a href="#" title="Item 2">Item 2</a> 
      <ul>
        <li><a href="#" title="Sub Item 2.1">Sub Item 2.1</a> 
          <ul>
            <li><a href="#" title="Sub Item 2.2.1">Sub Item 2.1.1</a></li>
            <li><a href="#" title="Sub Item 2.2.2">Sub Item 2.1.2</a></li>
            <li><a href="#" title="Sub Item 2.2.3">Sub Item 2.1.3</a></li>
            <li><a href="#" title="Sub Item 2.2.4">Sub Item 2.1.4</a></li>
            <li><a href="#" title="Sub Item 2.2.5">Sub Item 2.1.5</a></li>
          </ul>
        </li>
        <li><a href="#" title="Sub Item 2.2">Sub Item 2.2</a> 
          <ul>
            <li><a href="#" title="Sub Item 2.2.1">Sub Item 2.2.1</a></li>
            <li><a href="#" title="Sub Item 2.2.2">Sub Item 2.2.2</a></li>
            <li><a href="#" title="Sub Item 2.2.3">Sub Item 2.2.3</a></li>
            <li><a href="#" title="Sub Item 2.2.4">Sub Item 2.2.4</a></li>
            <li><a href="#" title="Sub Item 2.2.5">Sub Item 2.2.5</a></li>
          </ul>
        </li>
        <li><a href="#" title="Sub Item 2.3">Sub Item 2.3</a> 
          <ul>
            <li><a href="#" title="Sub Item 2.3.1">Sub Item 2.3.1</a></li>
            <li><a href="#" title="Sub Item 2.3.2">Sub Item 2.3.2</a></li>
            <li><a href="#" title="Sub Item 2.3.3">Sub Item 2.3.3</a></li>
          </ul>
        </li>
        <li><a href="#" title="Sub Item 2.4">Sub Item 2.4</a></li>
        <li><a href="#" title="Sub Item 2.5">Sub Item 2.5</a> 
          <ul>
            <li ><a href="#" title="Sub Item 2.5.1">Sub Item 2.5.1</a> 
              <ul>
                <li ><a href="#" title="Sub Item 2.5.1.1">Sub Item 2.5.1.1</a></li>
                <li><a href="#" title="Sub Item 2.5.1.2">Sub Item 2.5.1.2</a></li>
              </ul>
            </li>
            <li><a href="#" title="Sub Item 2.5.2">Sub Item 2.5.2</a></li>
          </ul>
        </li>
      </ul>
    </li>

  </ul> 
  </ul> 
  <div style="clear:both;"></div>   
  </div>  
  <div style="clear:both;"></div>
</body>
</html>

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 36 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Problems with vertical menu IE 6

Have you got the CSS? Smile I'm guessing you may be using a :hover CSS pseudo-class for the drop-downs? IE doesn't except :hover on anything except the anchor (<a href="#"...>) element.

Let's see the CSS. Wink

The next sentence is true. The previous sentence is false. Discuss...

ytw
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2004-05-10
Posts: 5
Points: 0

here's the css

Sorry for not inlcuding the css in the previous post:

#vertnav{list-style: none;
}

#vertnav ul { 
	padding:0;
	margin:0;
	list-style: none;
    width:12em;
   z-index:99;
   overflow:visible;
   position:absolute; 
   background-color:#DFDFDF;
      
}

#vertnav li { 
	position: relative; 
	width: 12em;
    background-color:#DFDFDF;
    border:solid 1px #CECECE;
    border-bottom:none;
   display:block;
   height:1.5em; /*auto */
   margin:0;
}


#vertnav a {
    text-decoration:none; 
    display:block;
    padding: 0.1em;  
    margin:0.2em 0 0.2em 0.1em; /*helps Opera with hover */
    background-color:#DFDFDF;
    width:11.5em; /*helps IE with hover */
    height:1em;
}
#vertnav a:hover{
    background-color:#0099CC; 
    color:#FFFFFF;
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
    display:none; 
    position:absolute; 
    top:0; 
    left:12em;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul{
    display:none; 
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}

/* Win IE only \*/
* html #vertnav li{float:left;} 
/* end holly hack */

BTW, it is the default css provided in the sample page. Quirk thing is that if horizonatl example is included, it does show in IE 6, but at removing the horizontal drop down sample, then the vertical menu does not slides out in IE 6

Strange thing. thanks for your help

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Problems with vertical menu IE 6

Hi ytw,
I just tried the verical menu without the other menu and it worked fine for me.
There must be something else wrong.
Could you provide a link it makes it much easier to see whats happening.

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 36 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Problems with vertical menu IE 6

Do you have the original page where this code is from? Wouldn't mind seeing it working in IE6. However, there is a li:hover, which IE won't see, as IE will allow the :hover on anchors. Since the rule #vertnav li:hover ul seems to be controlling the display property of the horizontal rollout menus, then I'm presuming it's this.

Like I said, can you post a link of the original source? (I am presuming this was from elsewhere, going by your last post?)

The next sentence is true. The previous sentence is false. Discuss...

ytw
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2004-05-10
Posts: 5
Points: 0

Problems with vertical menu IE 6

Find enclosed a zip file with all files

Multi Level Menus is the html with the 2 menus. Works well

horizontal drop down is the html with the horizontal menu ONLY. Works well

vertical slide out is the html with the vertical menu ONLY. Only show primary links in IE6, display well in Opera & firefox/mozilla

Thanks again for helping

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Problems with vertical menu IE 6

Hi ytw,
When you are only using one menu you need to remove or comment out the one of these that is not being used.

window.onload= function(){ 
    activateMenu('nav'); /* pass in the id of the top level UL */ 
    activateMenu('vertnav');  
}
for example remove or comment out the one containing nav if you are using the vertnav.
Otherwise it causes a javascript error and stops functioning in IE.


co2 it's my menu Smile and can be found http://www.csscreator.com/menu/multimenu.php

co2
co2's picture
Offline
Leader
UK
Last seen: 6 years 36 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Problems with vertical menu IE 6

I just noticed! Very nice indeed. Smile

Suppose I should get out and about more around this site!

The next sentence is true. The previous sentence is false. Discuss...

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Problems with vertical menu IE 6

Hi co2,
Maybe I just need to make thing more visible.
Have you seen the what I still call the csscreator
Give it a go and make sure you generate some css and try it on another site.
Its pretty old now but was cool when I first created it..
http://www.csscreator.com/version1/index.php

ytw
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2004-05-10
Posts: 5
Points: 0

Problems with vertical menu IE 6

Arrow Thanks a lot guys for your help

Tony, uncomment/comment the .js file did the trick. It had to be stupid, sorry for this question :oops:

I have another question for you gurus. Any idea if it is possible to do such a css design with the vertical menu (slide out to the right) ?¿

See enclosed image

This one might not be that easy Wink

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 hours 37 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

Problems with vertical menu IE 6

Hi ytw,
It should be possible but may take a bit of thought and I'm about ready to crash.

I have updated the JavaScript file to make it clearer for people to comment out or remove one of the activate calls.

ytw
Offline
newbie
Last seen: 10 years 32 weeks ago
Joined: 2004-05-10
Posts: 5
Points: 0

Problems with vertical menu IE 6

thanks for solving my problem Tony