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 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
  2. 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
  3. 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