Results 1 to 5 of 5

Thread: Vertical Menu

  1. #1
    Join Date
    Oct 2007
    Location
    Florida, USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Vertical Menu

    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:

    Code:
    <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:
    Code:
    #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;}

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    [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.
    Code:
    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.
    Code:
    div#menu ul li:hover ul {
         display: block;
         position: relative; 
         top: -10px;  /* in reference to where you want the dropout to be */
         left: -10px; 
    }
    Code:
    <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
    Code:
    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.
    Code:
    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.

  3. #3
    Join Date
    Oct 2007
    Location
    Florida, USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    hey boogyman,

    Thank you so much for your help.
    So

    1) Fixed.
    I modified your code though as :
    Code:
    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.
    Code:
    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.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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
    Code:
    <li class="selected">List Item</li>
    Code:
    div#menu ul li.selected {background: #hexcolor}

  5. #5
    Join Date
    Oct 2007
    Location
    Florida, USA
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Vertical Menu better but still CSS pbs

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •