WordPress Menu Creator CSS Examples

View Comments

• 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...

  • Can you show us the domain so I can help you with this.

    • Indecently, the new release uses widgets so you no longer need to insert the code unless your theme is not widget ready.

• 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?

• 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!

• This may help some people having issues with links.

  I've configured clean permalinks in wordpress, ie.
  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 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/contact and so on.

  Again, great plugin. Thanks. :-)

• 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:hover

  and 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 ;
  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 ;
  padding:0 ;
  }

  #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 ====================*/

• Hey thanks for the CSS updates, I'll correct the above code.

  Jared Ritchey

  • 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! =-.

    • Thanks for the "heads up" Leslie!

      ~SEOWolf

• 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 =-.

  • Can you send me details and I'll help you out.