Spruz Owners' Community For owners of websites powered by the Spruz Platform

View All

Create more than one column for sub tabs

Posted by Robert McDougal Jan 31st 2013 Category: General

So I have a lot of sub-tabs under the "Videos" tab on my website. So much so that if you go to it, it fills up your entire screen, or at least on some computers. Anyhow, you can see what it looks like now at themcdougalbugle.com. But the image bellow was made completely in Photoshop and is what I'm trying to achieve. Basically, I just need two different columns, each column with 10 rows, this makes it a lot easier when trying to find a video category, rather than they all just be squashed into one column like it is now. Screwattack.com is an example of a site that has what I'm looking for. If you go to Screwattack.com, some of their sub-tab menu's have two columns like this:

I also want to have that little #333333 line in between the columns and under each tab. And speaking of little grey lines. This is a the current CSS I'm using for my sub-tabs.

 

/*Drop Down Menus||Drop down menu specifics*/
#section10 .side-nav-box td.content ul.sub-menu {
background-color:##9a0101 !important;
border-bottom:1px solid #fff;
padding-top:2px;
}
 
 
 
#section10 .side-nav-box td.content ul.sub-menu li a {
font-size:12px;
height:19px;
background-color:#9a0101;
background-image:none !important;
padding:0px 3px -2px;
text-align:left !important;
border-bottom:1px solid #333;
width:160px;
}
 
#section10 .side-nav-box td.content ul.sub-menu li a:hover {
font-size:12px;
color:#ffffff;
height:19px;
background-color:#000;
background-image:none !important;
padding:0px 3px -2px;
text-align:left !important;
border-bottom:1px solid #ffffff;
width:160px;
}
 
You'd think that by simply using border-bottom:1px solid #333; you could create those lines, but whenever I try, it makes other lines bigger and messes things up. The picture above is the perfect example of the sub-tab menu I'm trying to achieve, pixel for pixel. I'm close and Iv'e played around with the above CSS for weeks, but there's something I'm doing wrong. Oh and lastly, as it almost is, when you hover over a tab, all I want to change is the red background to black and the little grey line bellow to change to white. That's it, like I said, it's almost like that, but for some reason, when you hover, the bottom-border changes from like 1px to 3px, either that or the padding changes.

 

Rate0

Replies

  • Posted by Robert McDougal Jan 31st 2013

    As always, you can see how close I am by going to themcdougalbugle.com.

    Reply
  • Posted by Randy Jan 31st 2013

    The menu system only supports one layer of sub-tabs. In order to achieve what you are trying to do, you would need to do one of two things, depending on how particular about your current set up.

    (1.) In the event you don't need to hang on to the active class that shows what page your are on currently

    • Create a custom html and css menu from scratch that supports multi leveled drop downs
    • Place it in the top global area instead
    • Replace all of your links accordingly into the html.

    (2.) Create a menu incorporating html, css, and javascript. The javascript will allow you to create active classes for all page links by created a RegExp or "Regular Expression". If that sounds kind of complicated, it's because it certainly is lol.

    • Create a multi level dropdown menu out of html and css.
    • Use javascript to create a Regular Expression (RegExp) that will test the window location against the links that occur in the navigation, and if matched, add an active class.
    • include the newly created class that was added by your javascript into your css, and style it accordingly.

    Then there is option 3 I suppose, and that just consists of finding a script somewhere off the internet for a menu with an active class, and seeing if you can figure out how to alter it to match what you currently have. 

    ___________________________________________________________________________________________________________________________________________

    When adding the borders to your sub-tabs, try removing where you added the border in the code above, and instead just adding it to the <li>. In other words, remove just the border-bottom from the code you have above, and instead add that border to this:

    #section10 .side-nav-box td.content ul.sub-menu li{
    border-bottom: solid 1px #333
    }

    All I did was remove the <a> from off the end of it. 

    See if that possibly makes a difference, and let me know.

    Reply
Please Sign In to Add a Comment
or

This website is powered by Spruz