Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
I want to make multiple columns in my CSS menu
 
Brent W Peterson
Moderator
 
Avatar
Total Posts:  3217
Joined:  2009-02-26
Minneapolis MN
 

I would like to make multiple columns for my drop down menus like the http://mydeco.com/ site. My menus are running off the bottom of the page. Also, I can’t get my separator to use the .last in the #NAV so I will not have a separator at the end of my menu. Can anyone help me on how I do this?

Cheers,

Brent

 
Magento Community Magento Community
Magento Community
Magento Community
 
stewdawg35
Member
 
Total Posts:  41
Joined:  2007-12-10
 

I would love to find the same solution. I have searched for hours trying to find a css or jquery based example to build upon. Can anyone offer ANY insight?

 
Magento Community Magento Community
Magento Community
Magento Community
 
VortexCommerce
Sr. Member
 
Avatar
Total Posts:  104
Joined:  2008-08-06
Harrogate, UK
 

Hi, I have fixed this with CSS. Please check http://www.inspiredoffice.co.uk and hover the “Ink, Print, Toner” link for example.

If thats what your after then I will explain further.

Regards,
Bruce

 
Magento Community Magento Community
Magento Community
Magento Community
 
stewdawg35
Member
 
Total Posts:  41
Joined:  2007-12-10
 

That is a great example. How did you do it?

 
Magento Community Magento Community
Magento Community
Magento Community
 
VortexCommerce
Sr. Member
 
Avatar
Total Posts:  104
Joined:  2008-08-06
Harrogate, UK
 

Below is my complete menu.css contents. (btw not actually in menu.css in my site for compression reason)

Here is the important part:
UL.level0{
width:202px !important;
background:#e51b24;
padding:1px;
}
li.nav-printer-ink-toner ul.level0 {
width:606px !important;
}

606px makes it 3time wider therefore giving 3 columns. The only problem with this method is that it goes A-Z across instead of down. But a get quick fix.

Oh and li.nav-printer-ink-toner refers to jut the printer column as i thought it was best not to make them all wider. This way you can control which columns go to which width.

Hope that helps!

PM me if you need further help!

#nav { float:left; margin-top:10px; font-size:12px; background:#0093d1; width:100%; }
#nav li.level0 a { border-right:1px solid #20aae4; }
#nav li.nav-more a { border:0; padding:7px 18px 7px 11px; }
#nav li.nav-more li.level1 a { padding:0; }
/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
UL.level0{
    width
:202px !important;
    
background:#e51b24;
    
padding:1px;
}
li
.nav-printer-ink-toner ul.level0 {
    width
:606px !important;
    
}

#nav UL.level1, #nav UL.level2,  #nav UL.level3, #nav UL.level4,  #nav UL.level5 {
}

#nav UL LI.level1{
    
float:left !important;
    
width:200px;
    
margin:0 1px;
}

#nav UL LI, #nav UL LI.last{
    
background:none !important;
    
}

#nav UL LI.level1 UL{
    
float:left !important;
    
padding:1px;
}



#nav li { position:relative; text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav li { float:left; background:url(../images/toplevel-arrow.gif) no-repeat 100% 50%; }
#nav a { float:left; padding:7px 16px 7px 9px; color:#fff; font-weight:bold; }
#nav li:hover { background-image:none; }

#nav li.over a,
#nav a:hover { color:#fff; }
#nav li.level0 a:hover, #nav li.level0:hover { background:#e51b24; }

/************ 1ST LEVEL ************/
#nav ul li,
#nav ul li.active { float:none; margin:0; background:#e51b24; }
#nav ul li.last { background:#e51b24; padding-bottom:0; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;  }
#nav ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav ul { position:absolute; width:200px; top:29px; left:-10000px; }

/* Show menu */

#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:140px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:#e51b24; }

#nav li.level0:hover li.level1 a:hover { background:#ec2d36; }
#nav li.level0 li a { background:#db0f19; font-weight:bold; color:#fff; }
#nav li.level0 li.parent a { background:#db0f19 url(../images/parent_arrow.gif) right center no-repeat; }
#nav li.parent li.level2 a { background-image:none; }
#nav li.level0 li { margin-bottom:1px; }
#nav li.level0 li.last { margin-bottom:0; }

#nav li.level0 li li { border:0; }

#nav li.level0 li.level1 a { border-right:0; }
#nav li.nav-clearance a { border-right:0; } /*-- Top level nav last link --*/
#nav ul li a,
#nav ul li a:hover { color:#fff !important; }
#nav ul span, #nav ul li.last li span { padding:5px 10px;}

/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; background:#f34850; }
#nav ul ul ul li a { background:#f34850; }
li.level2 a { padding-left:5px !important}
li
.level3 a { padding-left:10px !important}
li
.level4 a { padding-left:15px !important}
li
.level5 a { padding-left:20px !important}
 
Magento Community Magento Community
Magento Community
Magento Community
 
VortexCommerce
Sr. Member
 
Avatar
Total Posts:  104
Joined:  2008-08-06
Harrogate, UK
 

Have much luck with this?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Antonimo
Member
 
Avatar
Total Posts:  51
Joined:  2009-03-26
Sweden
 

Hi brucyboy,

I tried it and it worked really well!

Would you by any chance know how one could also add images to the sub-menu items? Sort of like they do at http://www.selfridges.com. I expect it would be in the admin section somewhere but I am completely new to this.

 
Magento Community Magento Community
Magento Community
Magento Community
 
VortexCommerce
Sr. Member
 
Avatar
Total Posts:  104
Joined:  2008-08-06
Harrogate, UK
 

Antonimo,

Just posted on your thread about this. It can be done also via css.  For my site images of that size would destroy the load time as I will be having 100-200 categories. So I am working on making some really small images for important categories.

-
Bruce

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brent W Peterson
Moderator
 
Avatar
Total Posts:  3217
Joined:  2009-02-26
Minneapolis MN
 

Ok, that worked great!

Now how do I get my right side menus to float to the left so they are not off the page?

Thanks,

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brent W Peterson
Moderator
 
Avatar
Total Posts:  3217
Joined:  2009-02-26
Minneapolis MN
 

Do people just stop looking at these after a while?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brent W Peterson
Moderator
 
Avatar
Total Posts:  3217
Joined:  2009-02-26
Minneapolis MN
 

Thanks Bruce, I was able to make it work!

 
Magento Community Magento Community
Magento Community
Magento Community
 
santibm
Jr. Member
 
Total Posts:  19
Joined:  2008-01-14
Granada, Spain
 
Brent W Peterson - 15 May 2009 06:03 AM

Thanks Bruce, I was able to make it work!

Hi Brent!

Just saw your site and looks great, did you achieve your menu using the explanations on this thread?!

Regards,
Santi

 
Magento Community Magento Community
Magento Community
Magento Community
 
brunomarshall
Guru
 
Avatar
Total Posts:  367
Joined:  2009-08-04
 

Hi,
just make class for last below i have given sample code to remove separator from last menu

<?php $i=1; foreach ($this->getStoreCategories() as $_category): ?>
      <?php 
if($i == $lastcount): ?>
        
<li class="last">
      
<?php else: ?>
       
<li>
i hope this would give you a idea
 
Magento Community Magento Community
Magento Community
Magento Community
 
Brent W Peterson
Moderator
 
Avatar
Total Posts:  3217
Joined:  2009-02-26
Minneapolis MN
 

I wish it was as easy as that,

I actually count how many items there will be in my columns in order to not split my categories.
I also have 4 different sized background that loads via custom attributes on the categories along with a shift left or right and the amount of pixels to shift, this allows the menu to be set anywhere on the menu bar.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Parkside
Jr. Member
 
Total Posts:  2
Joined:  2009-11-19
Auckland, New Zealand
 

You could always hard-code your menu, then the database doesn’t have to do any work generating it and you have a huge amount of control over what appears/doesn’t appear.
The downside is that it won’t auto-update if you add a new category.

Darren

________________________________

Vehicle History Reports

 
Magento Community Magento Community
Magento Community
Magento Community
 
Derek007
Jr. Member
 
Total Posts:  1
Joined:  2009-03-15
 

I figured out a way to do this in the new magento. It hinges on removing the float:none element in #nav ul li and assigning new classes with widths for the following:

ul.level0 {width800px !importantheight:200px !important;}
li
.level1 {width:160px !important;}
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2