|

Horizontal Sub-Menu for WP Themes

Bymkoenen

socialchange.isI was recently asked to create a horizontal sub-menu for socialchange.is as part of their new website. The menu consists of parent and child categories.  Child categories to the currently selected category are always visible, except when a different menu item is hovered over. This makes the site structure more obvious and navigation easier. Here are some views of what I created:

The drop-line menu consists of parent and child categories. Here the parent category ‘Passion’ has been selected.
Navigation: tab selected

A child category of ‘Passion’, ‘Self-Awareness’ has been selected.
Navigation:submenu slected

Here the viewer is hovering over a child category of ‘Lifestyle Design’ while Passion remains selected.
Navigation: selected plus sub-nav hover

The main changes that needed to be implemented were the red color for selected tabs and for the hover effect, as well as creating borders to tie the top menu parent category to the child categories. To make sure the text did not shift around on hover, I added invisible white borders to all the tabs that would change color on hover.

To avoid messy transitions where one submenu shows through while another is loading, the submenus had to be moved off screen when not selected or not hovered over. On hover or selection they are moved into place.

Code for Horizontal Sub-Menu

Below is the CSS I ended up with. I used this code in a child theme to Woo-Canvas and had to remove some of the styles Canvas threw in. The CSS can easily be used with other WordPress themes, however, you might have to make some changes to undo your theme’s native CSS.

To start with I added some simple styling to the top navigation div, the top level ul and the sub-menu.

#navigation {
	padding: 10px 0 0 0;
	margin-bottom: 40px;
	border-bottom: 1px solid #999 !important;
}
#main-nav {
	position: relative;
	margin-left: 0px;
}
 
/* style sub-menu, note that woo-canvas has positioned the submenu off screen (left:-999em) to avoid it popping up when loading. we need to move it into position on hover and when selected later on. */
#main-nav li .sub-menu {
	position: absolute;
	left: 0;
	width: 980px;
	border: 0px solid #DBDBDB;
	border-width: 0;
	height: 30px;
}
 
/* remove borders from sub-menu */
#main-nav li .sub-menu li {
	border-top: 0px solid white;
	border-bottom: 0px solid #DBDBDB;
}
 
/* basic styling of submenu */
#main-nav li .sub-menu li a {
	width: auto;
	color: #999;
	font-size: 12px;
	line-height: 18px;
	padding: 5px 20px 13px 10px;
}
 
/* position and put white borders around every tab */
#main-nav a {
	position: static;
	text-transform:uppercase;
	padding-right: 18px;
	background:#fff;
	border: 1px solid #fff;
}
 
/* don't show arrows*/
#main-nav .sf-sub-indicator {
	display: none;
}
 
/*no rounded corners*/
#main-nav a, #main-nav li.current_page_item, #main-nav li.current_page_parent, #main-nav li.current-menu-ancestor, #main-nav li.current-menu-item, #main-nav li.sfHover, #main-nav li.selected {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}
 
/*never have any borders on a submenu*/
#main-nav li .sub-menu li a {
	border: 1px solid #fff !important;
}

Next I added styles for the ‘selected’ view for both the top menu and the sub-menu

/*SELECTED*/
 
/* style: current item tab red when toplevel or sublevel are current items */
#main-nav li.current-menu-item a, #main-nav li.current-menu-parent a {
	color: #b22434;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 2px solid #fff;
	margin-bottom: -1px;
}
 
/* next:
sublevel a's are gray when not directly selected*/
#main-nav li.current-menu-parent .sub-menu a {
	color:#999;
}
 
/* next:
submenu items are gray except when current items */
#main-nav li.current-menu-parent .sub-menu li.current-menu-item a, #main-nav li.current-menu-parent .sub-menu li.current-menu-parent a {
	color: #b22434;
}
 
/* when selected move the sub-menu it into position on the screen*/
#main-nav li.current-menu-item .sub-menu, #main-nav li.current-menu-parent .sub-menu {
	top: 27px;
	left: 0;
}

Then do the same for the hover effect.

/* HOVER */
 
/*The submenu is off-screen, on hover move it into position on the screen*/
#main-nav li.sfHover .sub-menu {
	top: 27px;
	left: 0;
}
 
/* submenu's parent red when hovering over submenu */
#main-nav li.sfHover a {
	color: #b22434;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 2px solid #fff;
	margin-bottom: -1px;
}
 
/* submenu's parent red, submenu: gray */
#main-nav li.sfHover .sub-menu a {
	color: #999;
}
 
/* submenu's parent red, submenu: gray except hovered item */
#main-nav li.sfHover .sub-menu a:hover {
	color: #b22434;
}

Lastly, we have to turn on and of the visibility of the submenu depending on what we are hovering over.

/* VISIBILITY OF SUBMENU */
 
/* make the submenu visible */
#main-nav li.current-menu-item .sub-menu, #main-nav li.current-menu-parent .sub-menu {
	visibility: visible !important;
	display: block !important;
}
/*hide the active menu on hover over other items to make for better transitions*/
#main-nav:hover li.current-menu-item .sub-menu, #main-nav:hover li.current-menu-parent .sub-menu {
	visibility: hidden !important;
	display: none !important;
}
 
/*now the current menu does not show on hover, so tell it to show when hover is on it*/
#main-nav li.current-menu-item:hover .sub-menu, #main-nav li.current-menu-parent:hover .sub-menu {
	visibility: visible !important;
	display: block !important;
}

That’s it. I hope this helps you get creative.

Additional Note: Since several of you have asked for this, here are the most essential steps:

1. Make sure that your menu has relative positioning. This will help position the sub-menu absolutely later on.

#main-nav {
       position: relative;
}

2. Make the sub-menu as wide as the top-menu. Make it invisible by giving it absolute positioning and moving it off screen.

#main-nav li .sub-menu {
width: 100%;
       position: absolute;
       left: -999em;
}

3.Then float the sub-menu list items so they line up horizontally.

#main-nav .sub-menu li {
       float: left;
}

4. When hovering over a top-menu item, move the submenu into position – thus making it visible.

#main-nav li:hover .sub-menu {
       top: 27px;
}

5. You also want the submenu to remain visible when it is active.

#main-nav li.current-menu-item .sub-menu, #main-nav li.current-menu-parent .sub-menu {
       top: 27px;
}

Similar Posts

|

Learn to Podcast

Bydrron

The short story is: “Add a media file to a WordPress post in a category and make that available through iTunes.” Here’s what you’ll see in the iTunes application to submit your podcast when you’re ready. The screen shot above is not from a web page. You have to navigate…

36 Comments

  1. Hi Margarete,
    Thanks very much indeed for putting this code up – its very similar to what i was looking for, and have searched all over for it! I’m trying to at least get the basis functionality from yours and then work it up from there, but i cant even replicate yours – could you possibly take a look and let me know if you see anything obvious wrong – any help would be hugely appreciated! http://tara.colouredcow.com/
    Thanks so much,
    Hugo

    Reply

    1. I followed your link and it seems to me that you succeeded in implementing the horizontal menu. Now if you get rid of the remains of the original menu above it and move your horizontal menu into the #navigation div, everything should work. Better yet, create a new div with a different id to make sure no unforeseen style rules get applied.
      Good luck, Margarete

      Reply

      1. Thanks so much – i was just coming back to reply and say i’d fixed it (after another couple of hours!) but then i saw your reply which hadnt been emailed to me for some reason. Anyway, thanks very much. Am very happy now!!

        Reply

  3. Thanks for the css, but i can’t implement it in my wordpress theme (i’m a beginner….). What is the code in my php template to call a menu styled with your css. (things after “<?php wp_nav_menu(…….).
    Sorry for my english, i'm french !

    Thank you.

    Reply

    1. Yes, you are right, wp_nav_menu places the menu in your header. Now, if you look at your website in your browser and right click on the menu, then select ‘inspect element’, a window will open at the bottom. You will be able to see the HTML for the nav menu. The HTML tags will depend on your theme and setup. So I can’t give you the exact CSS that will work with your particular website. J’en suis desolee. Bonne chance! So vous avez one question plus precise je vais essayer d’y repondre.

      Reply

  4. Hi Margarete,
    your code is very much useful as i’m beginner for CSS.. but i was struck in between… it is difficult to proceed. pls help to wer to place css class and id like li.sfHover , li.current-menu-item .sub-menu, main-nav , li.current-menu-parent… for below example…

    <div id="Navigation" class=""
    <ul id="main-nav" class=""

    <li id ="" class = ""<a href="#"<b Animal</b </a
    <ul class="sub-menu"
    <li id ="" class=""<a href="/abc"tiger</a</li
    <li id ="" class=""<a href="/xyz"lion</a</li

    </ul
    </li

    <li id ="" class = ""<a href="#"<b Birds </b </a
    <ul class="sub-menu"
    <li id ="" class=""<a href="/abc" Peacock</a</li
    <li id ="" class=""<a href="/xyz" sparrow</a</li
    <li id ="" class=""<a href="/www" eagle</a</li
    </ul
    </li

    <li id ="" class = ""<a href="#"<b Country </b </a

    <li id ="" class="" <a href="/abc" India </a</li
    <li id ="" class="" <a href="/xyz" USA </a</li
    <li id ="" class="" <a href="/www" France </a</li
    </ul
    </li

    </ul
    </div

    Reply

    1. As I said in the post, I am giving you an example of how it can be done using a WordPress theme. I suggest that you start by studying the theme you are using and examine the classes and tags it provides. They should be very similar to what I am using in the example. The enclosing div might have an id of ‘menu’ instead of ‘navigation’ or ‘sub-menu’ might be spelled without the hyphen, but generally the structure should be pretty much the same. Then replace the tags and IDs in my code with those used in your theme.

      If you are not using a WordPress theme my example would be much harder to use. To learn more about CSS, go to http://www.w3schools.com/css or look for tutorials online that are more generally focused on how to build menus and how to create hover/active and selected states.

      Reply

  5. Hi Margarete !
    Thank you very much for this code up. I’m making my first website and this is exactly what i want for my menu. I tried to adapt it to my css, but it is still not functioning (sorry for the english, i’m french^^) the sub-menu desperately stays vertical… If you have some time could you help me please ?
    The adress is : mariechristinegerard.com/wordpress
    Thanks so much,
    Lucile

    Reply

    1. Salut Lucille,

      I have added a summary of the most important steps at the bottom of the post.

      I looked at your website and noticed that you have made a lot of progress on your horizontal navigation. I noticed though, that the sub-navigation disappears when you hover just below it. To fix this, remove the padding from the top level navigation.
      Look for line 405 of your stylesheet and change it to this:

      .sf-navbar {
padding-bottom: 0;
}

      Hope this helps. Bonne chance.

      Reply

      1. Yes I managed to make an horizontal navigation, there was a javascript that blocked me since the beginning.
        But I also managed thanks to you, so thank you again !! I’ll add the code you told me, merci beaucoup 😉

        Reply

      2. Actually, I just notices that I still have a little problem on my homepage. As my menu is placed somewhere else, the submenu is going on the left.
        Do you know where it could come from ?
        The adress is now : mariechristinegerard.com

        Reply

        1. I noticed you also have a problem when you go to the Galeries and Actualite pages. To fix the positioning here add “left: 0px” to “.sf-navbar .sub-menu” on line 409.
          The navigation div, according to which the submenu is placed, is wider on the homepage. If you use your developer tools (firebug?) and hover over the div you will see that it actually starts to the right of where you see the text. So, for the home page add the following below the style on line 409:

          .home .sf-navbar .sub-menu {
    right: -60px;
}

          You might also have to create a special hover style for the home page.

          Reply

          1. Thank you ! I was trying to fix the problem when you saw the one on line 409.
            Adding the code you gave wasn’t enough, I guess I’ll have to create a special hover style for the home page as you told me.
            Anyway, thanks again for your help, you’re very helpful !

          2. i just found another solution, by changing the navigation of my homepage into an absolute position. 😀
            My first website is nearly over !!

  6. Hi Margarete,

    This has been enormously helpful, thank you! One quick question: any ideas for getting the submenu to align left against the main nav? Unfortunately my project’s not online yet for your to see, but I have my nav bar to the right of the site logo, and would like the subnav to adjust, but preferably not at a fixed width (ie, prefer to have it align left rather than add a margin…)

    cheers!
    -jennyb

    Reply

  7. hi! do you have any idea how to implement the horizontal submenu to twentytwelve theme? 🙁 i’ve totally lost in its css :(((

    Reply

    1. Look at the bottom of the post where I summarized the most essential lines of code. Start with that and see what you get. Then refine the code until you have what you want.

      I can help you with more specific questions.

      Reply

  8. Hi Margarete,

    Awesome post,, man that’s a lot of codes you got there. A little noob here so I am amazed 🙂

    I had been looking for possible solution on how I can make my sub menu wider and if possible add another column just so visitors will not need to keep scrolling down to see other sub menus. I am using AgentPress and this site is for real estate but I also plan to do the same with my own website.

    Reply

      1. see here: doylespillane dot com dot au /Rental-Appraisal.php
        If you hover to the LANDLORD SERVICES or TENANT SERVICES on this website you will see that the Sub Menu are showing in two columns.. this is what I am trying to accomplish. I will be using that here raywehberealestate dot com dot au

        Thanks in advance

        Reply

        1. So, you are not actually doing a horizontal menu but you want the submenu to appear in two columns. For that you only need to make the submenu wider. The items will automatically float into two columns. To make it look nice you need to adjust the height and width of the submenu items.

          Reply

          3. I am familiar with CSS and HTML but not that great yet. I have been designing wordpress websites for 3 years now however most of my designs are just themes and if I need to tweak the codes I go to forum sites, wordpress help sites and blogs just like yours here.

  9. Hi I can’t implement it in my wordpress theme.
    Can you write the code to call a menu styled with your css?
    Sorry for my english, i’m italian !
    Thank you.

    Reply

    1. Look towards the end of the post. Use the essential code summarized there and then change it. You need to replace the class names and ids to the ones used by your theme. For example, your sub-menu is probably something like ‘.sub-menu’ or ‘.submenu’. The top level menu could be ‘.main-menu’ or ‘.menu-main’or whatever name you used when you created it in Menus. Hope this helps.

      Reply

  10. Hello Margarete,
    thank you so much for publishing this! It’s quite hard to find anything about that in the web and I was already wondering if I’m the only one who wants a menu like this…

    Reply

  11. Hi Margarete,

    I’m trying to implement this, not working so far, I need to spend more time digging canvas.

    Shouldn’t copying the four bits of code and paste it on a child theme stylesheet work out of the box?

    I actually need the submenu to work with pages rather than categories, could you give me any indication of how that would work?

    Thanks in advance.

    Reply

      1. Yes you are right, you just create whatever menu you want under Appearance > Menus. It doesn’t matter whether your menu items are categories, posts, pages or whatever.

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *