Results 1 to 2 of 2
  1. #1
    Join Date
    May 2007
    Posts
    33
    Plugin Contributions
    0

    Default Multiple Column Menu

    Hi ,

    I want to create a multi-column drop down menu for my site like this one here http://www.cssplay.co.uk/menus/multi-column.html).

    I am already using CSS Flyout, menu but due to lots of categories its difficult to scroll.

    Thanks,
    Robin

  2. #2
    Join Date
    May 2007
    Posts
    33
    Plugin Contributions
    0

    Default Re: Multiple Column Menu

    Or is it at all possible to change this CSS
    Code:
    /*Version 1.3.9b*/
    /*Cornflowerblue Menu CSS*/
    #categoriescss.leftBoxContainer { 
       background: #fff;   
       width: 150px; 
       padding-bottom: 10px;
    }
    #categoriescssHeading.leftBoxHeading {
      
       border-bottom: 0px 
       margin-bottom: 1px;
       height:20px;
       top:5px;
    }
    #nav-cat {
       width: 150px; 
       margin: 0 0 0 0px;
       background-color: #fff; 
       font-weight:bold;
    }
    #nav-cat ul {
       margin: 0; 
       padding: 0; 
       width: 180px; 
       background-color: #E36F96;
    }
    #nav-cat ul.level2 {background-color: #E36F96;}
    #nav-cat ul.level3 {background-color: #E36F96;}
    #nav-cat ul.level4 {background-color: #E36F96;}
    #nav-cat ul.level5 {background-color: #E36F96;}
    #nav-cat ul.level6 {background-color: #E36F96;}
    #nav-cat li {
       position: relative; 
       list-style: none; 
       margin: 5;
       margin-top: 5px; /* change this to put space between buttons*/
       border-bottom: 1px solid #fff;
       height:22px; /* change this Line Height*/
       font-family:"Comic Sans MS", cursive; font-weight:normal; font-size:14px;
    }
    #nav-cat li li {
       margin: 0; /* overrides the margin-top above */
    } 
    #nav-cat li:hover {
       z-index: 1000;
       background-color: #E36F96;
    }
    #nav-cat li a:hover {
       color: #000;
    }
    #nav-cat li.submenu {
       background: url(../images/arrows/arrow42.png) 99% 50% no-repeat;
       background-color: #E36F96;
       font-family:"Comic Sans MS", cursive; font-weight:normal; font-size:14px;
    }
    #nav-cat li.submenu:hover {
       background: url(../images/arrows/arrow38.png) 99% 50% no-repeat;
    }
    #nav-cat li a {
       display: block; 
       padding: 0.25em 0 0.25em 0.5em;
       text-decoration: none; 
       width: 100%; color: #fff;
    }
    #nav-cat>ul a {
       width: auto;
    }
    
    #nav-cat ul ul {
       position: absolute; 
       top: 0; 
       left: 180px;
       display: none;
    }
    #nav-cat ul.level1 li.submenu:hover ul.level2,
    #nav-cat ul.level2 li.submenu:hover ul.level3,
    #nav-cat ul.level3 li.submenu:hover ul.level4,
    #nav-cat ul.level4 li.submenu:hover ul.level5,
    #nav-cat ul.level5 li.submenu:hover ul.level6 {
       display:block; 
       border-left: 1px solid #d########3;
    }
    So I can set the Maximum number of ul then it starts to create another column.

    Basically All I am trying to do it for the customers to NOT have to scroll so much (some times even out side the bottom of the screen http://angel-intimates.com/ ) and have all categories flyout in the SAME page.

    Thanks

 

 

Similar Threads

  1. How to create Multiple Column Menu for Zencart?
    By thirdangle in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 10 Oct 2009, 02:03 AM
  2. Multiple Column Grid
    By RaySpike in forum Basic Configuration
    Replies: 0
    Last Post: 20 Aug 2009, 09:50 AM
  3. Extra space in menu column
    By brucegust in forum Addon Sideboxes
    Replies: 5
    Last Post: 21 May 2008, 05:32 PM
  4. expandable menu in left column
    By kylelondonuk in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Jun 2007, 09:47 AM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR