Main Menu
RSS Syndication
RSS 2.0Site Search
Recent Posts
Recent Comments
IDX Resources
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
/*=-=-=-[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]-=-=-=*/
Place the following where you want the menu to render.
<?php displayMenu(1, 2); ?>
Right Click and “Save Image” Menu Images:
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.
#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;
}
Tags: cascading, CSS, Menu Creator, style, Wordpress
33 Comments to Wordpress Menu Creator CSS Examples
Comments
-
-
-
Indecently, the new release uses widgets so you no longer need to insert the code unless your theme is not widget ready.
-
-
-
bimbolera says:
i have solved my problem! woot! great code, i scrutinized the code and it has something to do with the image url, i changed it to the location of the uploaded images (particularly upload folder of the wordpress) and everything was a-OK! more power!
-
my new problem now is how can i remove the bullet of the submenu… i hope i can get a help… thanks again!
-
Thanks for the info- it turns out Microsoft’s bing really is making an impact, it seems to me your blog is getting a lot of search engine traffic from bing- have you found this to be the case?
-
Justin says:
Thanks for such an awesome WordPress plugin and CSS example! I ended up changing the position to relative, but otherwise the CSS code is fantastic!
-
I recently have attempted to utilize the wp-menu-creator plugin which requires menu item entries to specific main category pages. In reviewing the plugin I believe you mentioned that version 1.1.6 has this capability however I don’t find any documentation or instructions on how such elements are included. Currently my hack involves posting the URL as an external link which however has the negative effect of not automatically changing the css to the active state.
Would you kindly outline how this (links to category main pages) are done as well as any other features that might be possible (such as tag pages and so on…)
Thanks for a great plugin BTW. If I might make a suggestion… I believe two key things would be VERY useful changes in the next release.
1) Ajax Drag/Drop Sorting of menu elements
2) The ability of being to directly include php code as an individual menu entry.I am always dealing with creating sites that require menus that not only link to pages but also to main category pages, individual posts, tags,… Generally, we want to keep things as simple as possible for the end user managing things. For these reasons I feel it would be great to be able to include (for example) some individual menu entires for specific pages, categories but with the additional ability to include a simple “wp_list_pages” entry with any applicable options as a menu entry as well…. Under this example, hard coded menu elements would remain static but if a customer adds/modifies standard page, these would automatically show up as well.
Just a thought
Keep up the great work my IDX Guru!
-
The Guru says:
Bad css. The plugins fantastic, but this css is bad. Open tags, misspelled properties, no need for absolute tags. Most people to use this plugin will not catch these errors.
Here’s a few examples….
absolute, top, left, and z-index not needed here. A 100% width would suffice, instead of fixed width. Spelling error, argin? Should be margin.
#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 */
}Lots and lots of open tags. Open tags in:
#topnavigation a, #topnavigation a:visited
#topnavigation a:hover
#mc_menu_1 a, #mc_menu_1 a:visited
#mc_menu_1 a:hoverand on and on. Not going to list them all, as there’s more with open tags than complete.
Here’s my cleaned up version. This has been compressed and validates with one warning, instead of 1 error and 16 warnings. Happy coding.
/*================ Navigation =================*/
#topnavigation {
background:url(images/navbar.jpg) repeat;
width:100%;
height:20px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
font-weight:700;
margin:0 auto;
padding:0;
}#topnavigation a,#topnavigation a:visited {
color:#fff;
font-size:12px;
text-decoration:none;
padding:0 0 0 3px;
}#topnavigation a:hover {
color:#fff;
text-decoration:underline;
padding:0 0 0 3px;
}#topnavigation ul {
list-style-type:none;
margin:0;
padding:0;
}ul#mc_menu_1 {
list-style-type:none !important;
margin:0;
padding:0;
}#mc_menu_1 a,#mc_menu_1 a:visited {
background:url(images/navlink.jpg) repeat;
color:#FFF;
display:block;
font-weight:700;
text-transform:uppercase;
border-right:1px solid #5a0000;
margin:0;
padding:2px 17px 2px 15px;
}#mc_menu_1 a:hover {
background:url(images/navhover.jpg) right;
color:#FFF;
text-decoration:none;
margin:0;
padding:2px 17px 2px 15px;
}#mc_menu_1 li {
float:left;
margin:0;
padding:0;
}#mc_menu_1 li ul {
position:absolute;
width:10em;
left:-999em;
}#mc_menu_1 li li {
float:left;
width:150px;
margin:0 !important;
padding:0 !important;
}#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;
border-bottom:1px solid #8c0000;
border-left:1px solid #5a0000;
border-right:1px solid #5a0000;
margin:0;
padding:2px 10px;
}#mc_menu_1 li li a:hover,#mc_menu_1 li li a:active {
background:#8c0000;
padding: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 ====================*/ -
This may help some people having issues with links.
I’ve configured clean permalinks in wordpress, ie. http://www.yoursite.com/about
I’ve noticed that when configuring a menu and selecting “Type: Page or Post” and inputting “about” with no quotes, all my menu links are equal to the page I’m on. Meaning all links are http://www.yoursite.com/about if I’m on the about page.
But setting “Type: External Link” with the same input results in exactly what I’m looking for. All links resolve to http://www.yoursite.com/about http://www.yoursite.com/contact and so on.Again, great plugin. Thanks.
-
-
I have a dummy version of WordPress installed where I am trying to master your plugin to then install it on a small publisher’s website.
I have created a sample menu (#1), and added the following line to my default theme header:
(tried it with and withour the div, makes no difference.)
I added the long sample code for Navigation to the rtl.css file in the same directory.
The menu appears, but it ignores all the formatting of the css file, and just give small bulleted type with everything visible at once, no drop-down, instead of the effect on your sample website, which is what I want. Does this have anything to do with the designation mc_menu_1 rather than just menu_1? Really stuck here and thanks for any help.
Leslie Evans´s last blog ..Hello world!
-
Never mind. Problem solved. The theme had two CSS files and I was editing the wrong one.
Leslie Evans´s last blog ..Hello world!
-
-
hey can someone help me to make multiple navigation, i am not able to make it out.
My site address: http://www.cineaata.com
You can reach me at dinu0408@gmail.com
Dinesh´s last blog ..Banam Movie New Trailers -
Josh Arcadia says:
I want to make a Menu where every option is a different color on the .jpg image… how can I do that?
-
This is a fine menu plugin, thanks for that!
… but – Huston we have a problem! … at http://www.asian-trade.net/ – The menu refuses to collapse.
I Added I see the second level, but always extended. I can’t find the error; can anybody have a look please? Thank you.
George@CoconutProducts´s last undefined ..If you register your site for free at -
Can’t find out how not to expand the menu… It is actually better to see here: http://www.asian-trade.net/popular-growing-medium on the sub page. The menu also pushes the content box down…. I would love to get this working. Thanks for any ideas.
George@CoconutProducts´s last undefined ..If you register your site for free at -
Hallelujah! Got it! Thanks for the plugin!!
George@CoconutProducts´s last undefined ..If you register your site for free at-
Most welcome, be sure to check the update later tomorrow.
Jared Ritchey
Jared´s last blog ..OpenRealty Duplicate Content and 404 URL Tip
-
-
Joerg says:
Hi.
Thanks for this great plugin, but I have two questions:1. I need a third level and added these CSS:
#mc_menu_1 li ul li ul {
position:absolute;
width:10em;
left:-999em;
margin: -20px 0 0 0 !important;
visibility:hidden;
}
#mc_menu_1 li li li {
float:left;
width:150px;
margin:0 0 0 171px !important;
padding:0 !important;
}
#mc_menu_1 li li li a,#mc_menu_1 li li li a:link,#mc_menu_1 li li li a:visited {
background:#d71c22;
width:150px;
float:none;
text-transform:none;
border-bottom:1px solid #8c0000;
border-left:1px solid #5a0000;
border-right:1px solid #5a0000;
margin:0;
padding:2px 10px;
}
#mc_menu_1 li li li a:hover,#mc_menu_1 li li li a:active {
background:#8c0000;
padding:2px 10px;
visibility:visible;
}
#mc_menu_1 li:hover li:hover ul {
left:auto;
display:block;
visibility:visible;
}
#mc_menu_1 li:hover li:hover ul,#mc_menu_1 li.sfhover li:hover ul {
left:auto;
visibility:visible;
}That works for me, but the mouse-over is not like it should be. A parent in the second level can not be hovered over the linktext? Maybe you try it out to understand what I mean?
2. How can I hide Items for non logged in Users? At best the plugin “User Access Manger” can be considered? It can be found here: http://wordpress.org/extend/plugins/user-access-manager/
Thanks for your help.
-
I’ve created my site using joomla, ( http://www.yajri.or.id/front2 )
and I want to re-create using wordpress, ( http://www.yajri.or.id/frontx ) offcourse I need menu for wordpress and Wordpress menu creator is so helpfull.
Unfortunetely I confused to make sub menu, I still fail, so.. anyone can give me solution to make menu in wordpress like in joomla in my site? -
That was nice of The Guru to point out the code cleanup issues. I have the old code on my San Diego real estate site. Do I need to download your changes Jared?
Geoff@Rancho Santa Fe Homes for Sale´s last blog ..San Diego Luxury Home Foreclosures -
That is why asp.net is much better in web development. I worked in PHP. I have written endless scripts for even simple things. after moved to ASP.Net i feel like i have tons of other things to concentrate than re inventing the wheel. The menu and treeview (there are a lot) should be used with few lines of code.
Ajax AutoComplete´s last blog ..WPF TreeView Binding With Relational Dataset -
Thanks for such an awesome WordPress plugin and CSS example! I ended up changing the position to relative, but otherwise the CSS code is fantastic!
Ray@Vb Net Tutorial´s last blog ..ASP.Net Repeater -
Bigorangemachine says:
Hey.
This page (http://www.ultimateidx.com/menu-manager/) should be linking to this page (CSS Example #1 – http://www.ultimateidx.com/blog/wordpress-menu-creator-css-examples/).Other people may not be as savy as me and would think to use the search.
-
because of this (margin:0px !Important) i couldnt change the margin to the menu item. Can i change it in the stylesheet? or else Can i remove the !Important? what will happen if i remove this!Important?
sorry for too many questions. But i need to fix it for one of my application
thanks for the great tutorial.
Steve@Gridview Freeze Header´s last blog ..JavaScript Ajax Cascading Dropdown -
Important just tells it to consider that as having precedence over other directives. With CSS precedence follows position in style sheet and the rules of specificity.
Jared
-
I’m still trying te get a 3 level menu working.
I tried the css from Joerg (October 6, 2009 at 2:14 am) but have the same problem.
It works correct only, when you ‘mouse over’ the none-text part of the second level button.Is there someone who can help?
Regards, Gerard
(sorry for my bad english) -
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
George from 
Xtof 
Geoff from 
Steve from 
Trackbacks/Pingbacks
-
[...] topnavbar.css file is a variation of the one posted on the UIDX vendor website. I found that it had references to an images folder and files that I preferred not to use, but [...]
Leave a Reply
© 2006 - 2010 - UltimateIDX Inc. - All Intellectual Rights Reserved
RETS and IDX Services by the industry leader. UltimateIDX Real Estate Lead Management. Call (702) 335-6580 Today for the best RETS, IDX and Real Estate Lead management available. UltimateIDX, Inc. - 6088 Villa Lante Av., Las Vegas - Nevada - 89113
this instruction confuses me… help… i tried to insert the displayMenu(1, 2); ?> to my header file and copied the css listed above, and then, when i updated my page, the main menu is blank(plain white) but when i hovered my cursor and it detected a link, the submenu is working, it has color and all.. i hope someone can help me, and also the submenu is bulleted. i wish the bullet to be gone. i hope someone can help me and thank you… more power…