Vertical Menu

[electriduct]

Hi,

I'm working since few days to design a vertical menu for my website. To make it search engine friendly, I use CSS.
However, I'm having some trouble to do some tasks.

Firstly, you can view the menu on this page : http://www.electriduct.com/test/template/left.html

1)I would like for only some of the items, add an arrow on the right in the background.
2)make the second level overlap the first one when it's display by the mouse over a category.
3)I would like to keep the light background on the category when I"m moving the mouse over the second level
4)I would like when someone is in the category 2, the category 2 in the menu is lighter, like the mouse over. I read that it should be able to do it with Javascript but i would like a simple way to do it.
5)I test my menu in IE 7.0 and Mozilla, but I'm sure about IE 6.0 (55% client use IE 6 on my website). And though not a lot use IE 5 or older version, I would still want to fix the bugs for these versions.

So now the code can be seen in the source html page.
But to resume the structure is like:

<div id="menu">
<ul >				  
  <li ><a href="" > Home </a></li>
  <li> Cord Covers </li>
  <li ><a href="" class="sub" > Rubber Ducts </a> 
       <ul> 
	 <li><a href="" >Rubber Duct: HOME </a></li>
	</ul>
  </li>
   <li > <a href="" id="currentPow"> Power Extensions </a> </li>
</div>

And the CSS:

#menu {z-index:1000;width: 150px;border:1px solid #CCCCCC;}
#menu ul {padding:0;margin:0;list-style-type:none;width: 150px;}
#menu ul li {position:relative;text-align:center; }
#menu ul li a, #menu ul li a:visited {display:block; text-decoration:none;line-height:15px; text-indent:5px;color: #FFFFFF;font-family:}
#menu  ul li a:hover {color:#FF0000;	background-color:#edede5;	padding: 3px 0 0 6px;}
#menu u1 li.sub a{background: url(menuA.gif);height:50px;}

[boogyman]

[QUOTE=electriduct;114113]Hi,

I'm working since few days to design a vertical menu for my website. To make it search engine friendly, I use CSS.
However, I'm having some trouble to do some tasks.

1)I would like for only some of the items, add an arrow on the right in the background.

div#menu ul li.arrow {
     padding-right: 20px;
     background: transparent url('/path/to/arrow') no-repeat right;
}

where case items are <li class="arrow">

2)make the second level overlap the first one when it's display by the mouse over a category.

div#menu ul li:hover ul {
     display: block;
     position: relative; 
     top: -10px;  /* in reference to where you want the dropout to be */
     left: -10px; 
}

<div id="menu">
     <ul>
         <li>Link
              <ul>
                   <li>Sub Link</li>
                   <li>Sub Link</li>
                   <li>Sub Link</li>
              </ul>
         </li>
     </ul>

note this will not work with IE6 you must use a Javascript Hack

3)I would like to keep the light background on the category when I"m moving the mouse over the second level

div#menu ul li {
     background-color: #hexcolor;
}

or

div#menu ul li {
     background: transparent url('/path/to/background/image') repeat;
}

4)I would like when someone is in the category 2, the category 2 in the menu is lighter, like the mouse over. I read that it should be able to do it with Javascript but i would like a simple way to do it.

ul li a:hover {
     display: block; /* makes the link the entire width of the list item */
     background-color: #hexcolor;
}

this will work for hovering over all list items with links if you want to make it for just this specific menu, add the div#menu or whatever menu at the beginning of the line

5)I test my menu in IE 7.0 and Mozilla, but I'm sure about IE 6.0 (55% client use IE 6 on my website). And though not a lot use IE 5 or older version, I would still want to fix the bugs for these versions.

IE6 is going to cause alot of problems as the web continues to develop. Until IE6 becomes obsolete there will be a number of problems with CSS support due to Microsoft not being able to abide by industry standards.

[electriduct]

hey boogyman,

Thank you so much for your help.
So

1) Fixed.
I modified your code though as :

div#menu ul li.arrow {padding-right: 20px; background:#3d5f82 url(arrow.gif) no-repeat center right;}
div#menu ul li.arrow:hover {padding-right: 20px; background-color:#edede5;}

However, now we can really see the arrow is another right part of the background :s

2)I see what you mean but however, I would like the second level on the right, and not below, I tried to move it to the left by modifying
left: -10px; by left:149px ;
but it displays me a big empty block below the category...

3)I already have the code like you wrote.

div#menu ul li {position:relative;background-color:#000000; ....

But it doesnt work better.

4)I'm not sure I was clear in my question. So let me explain it better.
I would like something like:
If you click on Home, you go to the home page and the home link in the menu is different from the others.
If you click on About Us or whatever, it informs you where you are in the left menu.
In addition, my left navigation bar would be in a php file which I include in my webpage, to update something quicker. So the code would be the same for every pages.

5)I agree with you. So do you think the only solution is to design a table for IE 6. Or any others ideas??

Again Thanks for your time.

[boogyman]

2)I see what you mean but however, I would like the second level on the right, and not below, I tried to move it to the left by modifying
left: -10px; by left:149px ;
but it displays me a big empty block below the category...

below? that isnt going to be below. -10px will be 10pixel up.
left:149px; will push the element 149px left of the viewport window.

3)I already have the code like you wrote.
Code:

div#menu ul li {position:relative;background-color:#000000; ....

But it doesnt work better.

the code I wrote was for the first level.
the only way it would switch colors is if there was another style that told it to change color

4)I'm not sure I was clear in my question. So let me explain it better.
I would like something like:
If you click on Home, you go to the home page and the home link in the menu is different from the others.
If you click on About Us or whatever, it informs you where you are in the left menu.
In addition, my left navigation bar would be in a php file which I include in my webpage, to update something quicker. So the code would be the same for every pages.

if you are dynamically creating the pages you add a class the page that you are currently on

<li class="selected">List Item</li>

div#menu ul li.selected {background: #hexcolor}

[electriduct]

I work for a while on my issue.
I moved the page to http://www.electriduct.com/Templates...te10/test.html

However, I still have some bugs I would def like to fix it before to update it on my whole website.
1) I have a problem with the top of my page: the header.
Though it works ok in IE 7 and Firefox. In IE 6.0 the top of the page is higher, and in Safari, thats the worst since I must scroll a full page-width to the right.... The page info does not display directly under the homepage header. It is urgent for me to fix it since some clients cannot navigate like that.
Anyone can help me to fix it, because i tried changing some stuffs like : clear:both ... but nothing better.
2)The bottom of the content page. The content is styled like a frame, with a border around, however for the bottom, I want to make it more nice and with 2 pictures as you can see. I dont understand why when the page is long, I have a space between between the border left or border right ANd the bottom border ?? This is CSS too.
3) Pb about the min height and the categories on 2 lines for the second left menu. In IE 6, it works great, though sometimes the min height sounds shorter than others. But in IE 7 and Firefox, sometimes it works, 2 lines appear right and sometimes the second line is hidden by the category under. Really weird ...

It sounds like little details, but I would really fix the 1) problem since it's urgent for me to permit to see the website right.

Thanks