WordPress Menu Creator CSS Examples

WordPress Menu Creator CSS Examples

Below are some examples of CSS styles that can be copied to your style.css file to complete the styling of your WordPress menus. Be sure to edit the Menu #s. Colors and images can also be edited to match your website theme.

CSS Example #1

Our first example can be seen at www.RELV.com. Both the Top Menu (within the header.php) and the Main Menu (within the sidebar.php) use our WordPress Menu Creator.

You can change save and change the gradient images below and adjust the colors in the CSS to match. Important: Please note where the CSS refers to menu_8 to change to match YOUR menu number. In order to identify your Menu Number in your WordPress Dashboard go to the “WP Menu Manager” under “Tools”. Mouse over your Menu and read the ID number in your status bar at the bottom of the page.

Top Menu (Horizontal)

This code must be included in your style.css file

[css]
/*=-=-=-[Navigation]-=-=-=*/
#topnavigation {
position:absolute;
top:55px;
left:0px;
z-index:105;
background: url(images/navbar.jpg);
width:900px;
height:20px;
font-size:12px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
argin: 0px auto 0px;
padding: 0px;/* border-bottom: 1px solid #8c0000 */
}
#topnavigation a, #topnavigation a:visited {
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 0px 0px 0px 3px
}
#topnavigation a:hover {
color:#fff;
text-decoration:underline;
padding:0px 0px 0px 3px
}
#topnavigation ul {
list-style-type:none;
margin:0;
padding:0;
}
ul#mc_menu_1 {
margin:0px;
padding:0px;
list-style-type: none !Important;
}
#mc_menu_1 a, #mc_menu_1 a:visited {
background:#FFF url(images/navlink.jpg) right;
color:#FFF;
display:block;
font-weight:bold;
text-transform:uppercase;
margin:0px;
padding:2px 17px 2px 15px;
border-right:1px solid #5a0000
}
#mc_menu_1 a:hover {
background:#fff url(images/navhover.jpg) right;
color:#FFF;
margin:0px;
padding:2px 17px 2px 15px;
text-decoration:none
}
#mc_menu_1 li {
float:left;
margin:0px;
padding:0px
}
#mc_menu_1 li ul {
position:absolute;
width:10em;
left:-999em
}
#mc_menu_1 li li {
float:left;
margin:0px !Important;
padding:0px !Important;
width:150px;
}
#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited {
background:#d71c22;
width:150px;
float:none;
text-transform:none;
margin:0px;
padding:2px 10px 2px 10px;
border-bottom:1px solid #8c0000;
border-left:1px solid #5a0000;
border-right:1px solid #5a0000
}
#mc_menu_1 li li a:hover, #mc_menu_1 li li a:active {
background:#8c0000;
padding:2px 10px 2px 10px
}
#mc_menu_1 li:hover ul {
left:auto;
display:block
}
#mc_menu_1 li:hover ul, #mc_menu_1 li.sfhover ul {
left:auto
}
/*=-=-=-[End Navigation]-=-=-=*/
[/css]

Place the following where you want the menu to render.

[php]<?php displayMenu(1, 2); ?>[/php]

Right Click and “Save Image” Menu Images:

Or Download Image File.

Main Menu (Right Side)

This menu is NOT cascading (no child levels) so the CSS does not need to refer to the menu number and no images are used, only background colors. Additional styling for fonts, sizes, colors and weight can be added.

[css]
#rightmenu li {
}
#rightmenu li a {
display:block;
padding:3px 8px;
background:#d8c7a9;
width:244px;
}
#rightmenu li a:hover {
background:#dfd0b1;
}
#rightmenu ul a {
text-decoration:none;
}
[/css]

47
Avatar for SEOWolf

About the Author:

K.M “Mack” McMillan comes from a family of REALTORS® and was a Broker himself for 14+ years. Mack built one of the 1st real estate websites in 1994 which helped his family run Agency become the most successful Brokerage in south central Missouri. As the original founder of the UltimateIDX in 2000, Mack continues to serve the real estate community and maintains an advisory role in UltimateIDX.

Comments

  1. Avatar for Gerard
    Gerard  February 16, 2010

    I found a solution for the 3th level that worked for me.
    Just added:

    /* ===== 3th level ===== */

    #mc_menu_1 li ul ul{
    left:auto;
    display: block;
    margin: -27px 0 0 171px; /* change px here to get boxes connected */
    }

    #mc_menu_1 li:hover ul ul, #mc_menu_1 li:hover ul ul ul, #mc_menu_1 li.sfhover ul ul, #mc_menu_1 li.sfhover ul ul ul {
    left: -999em; display:block;
    }

    #mc_menu_1 li:hover ul, #mc_menu_1 li li:hover ul, #mc_menu_1 li li li:hover ul, #mc_menu_1 li.sfhover ul, #mc_menu_1 li li.sfhover ul, #mc_menu_1 li li li.sfhover ul {
    left: auto;
    }

    /* ===== End 3th level ===== */

    Thanks for the great plugin,

    Gerard

    reply
  2. Avatar for paolo
    paolo  March 25, 2010

    plugin is fine, but wouldn’t it be better if people could choose categories as well and not only post/pages?
    it’s quite annoying to use external url for categories when you have to move the site on another domain…

    reply
    • Avatar for Jared Ritchey
      Jared Ritchey  March 28, 2010

      Actually thats a great idea, not many people link directly to a category but I’m going to add that to the planned feature list.
      Thank you for your input.

      reply
      • Avatar for paolo
        paolo  March 28, 2010

        we should all thank you for this plugin
        i hope new version will come out soon 🙂

        reply
  3. Avatar for wpj
    wpj  May 12, 2010

    hey…
    i got a problem with ie6… the dropdown menu wont come out… need some help…
    in firefox ie8 ie7 chrome netscape etc. it works perfect… but in ie6 i got that problem … can u help me?

    reply
    • Avatar for Jared Ritchey
      Jared Ritchey  May 18, 2010

      Please send me an email directly jared-at-ultimateidx.com and I’ll look at it for you.

      reply
  4. Avatar for Alex
    Alex  May 26, 2010

    Hi,

    How can I mark a menu as “selected”?
    So if I click on a menu, let’s say, “Services”, when the page is displayed, I want to mark menu item Services as selected, custom color…
    I’m using the plugin and the css listed above, everithing is ok, but I didn’t find any way to do the select option.

    Thank you,
    Alex

    reply
    • Avatar for Jared Ritchey
      Jared Ritchey  June 2, 2010

      Its a feature in the next release

      reply
    • Avatar for Jared Ritchey
      Jared Ritchey  June 4, 2010

      This is a feature in the new release. I’ll get it posted.

      reply
  5. Avatar for Devra@Villa in Bali
    [email protected] in Bali  June 9, 2010

    Hey….
    for a long to serching this plugin, thanks for adding this plugin, this is very helpful ..

    Please keep this up to date.

    reply
  6. Avatar for Indra@Bali Family Villas
    [email protected] Family Villas  June 11, 2010

    This is great CSS menu style you can copy this script and paste to a new Project HTML in Dreamweaver :

    Style 10 (Lawn Green) – Menu by Apycom.com

    <!–

    * { margin:0;
    padding:0;
    }
    body {
    background:#222;
    overflow:hidden;
    margin: 0px;
    }
    #table {
    width: 860px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    div#menu {
    top:40px;
    left:0px;
    width:100%;
    background:transparent url(images/header_bg.gif) repeat-x 0 0;
    }#menu {
    position:relative;
    z-index:100;
    height:43px;
    }
    #menu .menu {
    position:absolute;
    padding-left: 40px;
    background: url(images/header.gif) right top no-repeat;
    }
    #menu * {
    list-style:none;
    border:0;
    padding:0;
    margin:0;
    }
    #menu a {
    display:block;
    padding:15px 14px 14px 14px;
    white-space:nowrap;
    }
    #menu li {
    float:left;
    background:#fff;
    }
    #menu li li {
    float:none;
    }
    #menu div {
    visibility:hidden;
    position:absolute;
    background:url(images/pix.gif);
    }
    #menu div div {
    margin:-35px 0 0 -1px;
    left:100%;
    }
    #menu div div div {
    margin:-35px 0 0 -1px;
    left:100%;
    }
    #menu li:hover>div { visibility:visible; }

    /* menu::special styles */
    /* menu::level 1 */
    #menu a {
    text-decoration:none;
    color:#ffffff;/*1*/
    position:relative;
    z-index:77;
    }
    #menu a:hover {
    background:url(images/header.gif) left -43px repeat-x;
    color:#FFF;
    }
    #menu a:hover span { color:#FFF; }
    #menu li.current a {
    background: transparent url(images/header_active.gif) repeat-x;
    color:#3C4955;
    }
    #menu li.current span {
    color:#3C4955;
    }
    #menu>ul>li:hover>a {
    background:url(images/header.gif) left -43px repeat-x;
    color:#CACFD3;
    }
    #menu>ul>li:hover>a span { color:#FFF; }
    #menu span {
    text-transform:uppercase;
    font:9px ‘Lucida Grande’,’Lucida Sans Unicode’,Arial,Verdana,sans-serif;
    letter-spacing:0.3em;
    text-decoration:none;
    color:#ffffff;
    }
    #menu li { background: url(images/header.gif) left top no-repeat;}
    /* menu::level >= 2 */
    #menu ul ul {width: 150px;}
    #menu li li{
    background:#64A13C;
    border-bottom:1px solid #95E459;}
    #menu li li a {
    position:static;
    background:#64A13C;
    white-space:normal;
    text-align: center;
    color:#FFF;
    padding:0;
    text-transform:none;
    width: 100%;
    }
    #menu li.current li a {
    background: none;
    color:#FFF;
    }
    #menu li.current li span {
    color:#FFF;
    }
    #menu li li a:hover { background:#71DB23; }
    #menu li li a span { color:#fff; line-height: 15px; padding: 10px; }
    #menu li li a:hover span { color:#ffffff; }
    #menu li li a.parent span{background:transparent url(images/arrow.gif) no-repeat scroll right 50%; z-index:10; }

    #menu li li span {
    display:block;
    text-transform:none;
    padding:0px 25px 0px 0px;
    font-size:11px;
    letter-spacing: 0;
    }
    –>

    Home

    Sub Item 1

    Sub Item 1.1

    Sub Item 1.1.1
    Sub Item 1.1.2

    Sub Item 1.2
    Sub Item 1.3
    Sub Item 1.4
    Sub Item 1.5
    Sub Item 1.6

    Sub Item 1.7

    Sub Item 1.7.1
    Sub Item 1.7.2

    Sub Item 2
    Sub Item 3

    Product Info

    Sub Item 1

    Sub Item 1.1

    Sub Item 1.2

    Sub Item 2

    Sub Item 2.1

    Sub Item 2.2

    Sub Item 3
    Sub Item 4
    Sub Item 5

    Sub Item 6
    Sub Item 7

    Help
    Contacts

    reply
  7. Avatar for johan@kids-tableandchairs
    [email protected]  June 29, 2010

    I just signed up to wordpress to have my owen blog. This is a great tips and guidelines for me in building it up. Thanks!

    reply

Leave a Reply