Navigation menu with Drupal Zen Sub-theme

How to create Try2Stop.us style navigation menu in Drupal using the Zen theming system and a custom sub-theme

These steps assume you have the following installed and configured already - Drupal CMS, Zen Theme, STARTERKIT subtheme configured to the name and settings you desire, you have a working knowledge of css.

1. Open pages.css file in the css folder subtheme directory

2. There are already styles for various regions and tags, we will need to add a few to target a specific area. The method I used for creating the menu was styling the list items, so...

a. add the class "region-sidebar-first li". This will style all lists in your first sidebar, not just navigation

b. add the class "region-sidebar-first .region-count-1 li", which will style the first region in the first sidebar of your page, this method was used to maintain the look of the site if I decided to put a different menu in that area, for example primary links.

c. add the class "region-sidebar-first .region-count-1 li:hover", this changes the rollover image

d. add "region-sidebar-first .region-count-1 h2.title" to give the menu title a nice backround and style.

3. Play with the font size, color, positioning to find what works best with your site, I'd recommend using no text decoration to remove the underline from links, which I accomplished by adding a "li a" style to navigation.css.  You can accomplish the same by adding "region-sidebar-first .region-count-1 li a" to pages.css.

4. My button images are attached to this page, feel free to use them and alter them as needed, code is below

.region-sidebar-first li {
    font-family:"Arial Black", Gadget, sans-serif;
    list-style-image:none;
    width:100%;
    list-style-type: none;
    margin-left:0px;
    padding-bottom:6px;
    text-transform: capitalize;
    border:hidden;
}

.region-sidebar-first .region-count-1 li {
    background-image:url(../images/buttonNOlabel.png);
    background-repeat:no-repeat;
    text-align:center;
}

.region-sidebar-first .region-count-1 li:hover {
    background-image:url(../images/buttonACTIVE.png);
    background-repeat:no-repeat;
    text-align:center;
}

.region-sidebar-first .region-count-1 h2.title {
    background-image:url(../images/roundedCornersTOP.png);
    background-repeat: no-repeat;
    background-position: left top;
    border:hidden;
    padding-bottom:4px;
}


Try2Stop.Us | Contact Us | Log In | Try2Stop.Us © 2011