Ask your WordPress questions! Pay money and get answers fast! (more info)

How can I achieve a sub-navigation like this? WordPress

  • SOLVED

I need to know how (ie. what CSS to use) to achieve a second-level drop down navigation as pictured....I am going to be using a 'custom menu widget' with WP native functionality.

Answers (6)

2012-06-28

Arnav Joy answers:

can you show us url of the site?

please have a look in following links

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

http://webdesignerwall.com/tutorials/css3-dropdown-menu

http://cssmenumaker.com/drop-down-css-menus


Lisa comments:

Thanks Arnav for creating this menu for me, it looks great!

2012-06-28

Gabriel Reguly answers:

Hi,

Do you have an URL where such menu is in action?

Regards,
Gabriel


Lisa comments:

no, not yet. I'm in the process of programming it.... Just trying to be proactive. Do you need the actual menu set up in order to provide assistance?


Gabriel Reguly comments:


Not needed at all, I was just curious if you saw it working somewhere.

Would a menu like this one [[LINK href="http://dev.omniwp.com.br/eventos/"]]http://dev.omniwp.com.br/eventos/[[/LINK]] be good enough?

Regards,
Gabriel


Lisa comments:

Hmmm, I do like that option- however the one I attached to this question is exactly what my client wants. If it isn't possible at all, i can show them that and ask.... Any way to do it the way I showed?


Gabriel Reguly comments:

designchemical, who answered below, has a nice page too.

[[LINK href="http://www.designchemical.com/lab/demo-wp-menu-css/parent-a/"]]http://www.designchemical.com/lab/demo-wp-menu-css/parent-a/[[/LINK]]

Regarding doing it exactly as you ask, sorry I can't do it. At least for $10. ;-)


Lisa comments:

Ok, understandable ;) How about telling me what CSS to use to achieve that one you recommended then?


Gabriel Reguly comments:

Surely, there it goes:


.menu {
font: normal 13px Arial, sans-serif;
background: url(../images/bg_blue_demo.png) repeat-x 0 -80px;
width: 100%;
height: 40px;
border-left: 1px solid #304B73;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none; /* Required to hide menu when inactive */
position: absolute; /* Position the menu below and to the far left */
top: 40px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url(../images/bg_blue_demo.png) repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background-position: 100% -40px;
color: #000;
}
/* Styling for sub-menus */
.menu li ul {
width: 904px;
background: url(../images/bg_blue_demo.png) repeat-x 0 -120px;
border: 1px solid #999;
border-top: none;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url(../images/bg_bdr.png) repeat-y right center;
color: #666666;
padding: 6px 35px;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
color: #990000;
}


That is code [[LINK href="http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/"]]http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/[[/LINK]]

If you can afford a bigger prize, like $20, it would be nice to split it between him and me.


Lisa comments:

Thanks so much. I'll give it a shot in the next few days and keep you posted. ;)

2012-06-28

Romel Apuya answers:

yes a live url or dev url would be of great help..

2012-06-28

designchemical answers:

Hi,

The following tutorial should provide the main CSS:

http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-current-parent-menu-items-in-custom-menus/

2012-06-28

Duncan O'Neill answers:

Hi,

the out-of-the-box TwentyTen, and TwentyEleven themes will do that by default. All you have to do is set up the hierarchy correctly, and ( possibly ) tick a box saying include new pages. Or you can create your own menu in the wp backend under Appearance->Menus in those themes, and use which custom menu you want without a line of code. Creating a [[LINK href="http://codex.wordpress.org/Child_Themes"]]child theme[[/LINK]] of one of these themes is fairly easy, and lets you use the functionality of these themes without having to use the skins.

There are other themes which also do this, such as the [[LINK href="http://fthrwght.com/autofocus/prodemo/"]]autofocus range[[/LINK]] , for example. [[LINK href="http://sprikk.com"]]Sprikk.com[[/LINK]] uses another variant on this. Get [[LINK href="http://getfirebug.com"]]firebug[[/LINK]] to get the css for these pages.

You really don't need a custom menu widget, and the more you can work with WP's native functionality, the better.

best,


Lisa comments:

I'll be using iThemes 'Builder' as the parent with a child theme for Builder activated as my main theme ;) I'm not really great at CSS :(


Duncan O'Neill comments:

Hi Lisa,

it's almost impossible to give you the css you need without knowing either
a) which iThemes Builder child you're going to be using OR
b) seeing a 'demo' or working version of your site.

But looking at the iThemes child theme [[LINK href="http://demos.ithemesbuilder.com/americana-libertas/"]]'liberatas'[[/LINK]], for example, getting rid of the following lines in the css will make the second-level menu lists display horizontally;


.builder-module-navigation li ul {
/* comment out by using slash asterisk , or get rid of, this line */ width:20em;
}

.builder-module-navigation li li {
/* comment out by using slash asterisk as I have, or get rid of, this line */ width:20em;
}


This may not help. If you want to let us know which child theme you're planning on using, I or someone here *may* be able to tell you what css changes you need to make. Some child themes look as if a horizontal 2nd-level menu would require too much hacking. OR you could message me with a url or FTP details, and I can try to edit the theme to achieve your desired menu.

best,


Lisa comments:

Hi Duncan,
I'm using the child them 'Default' from iThemes for builder.


Duncan O'Neill comments:

Can you point to the url of the demo please?


Duncan O'Neill comments:

For example, if you're using the same theme as this page;

[[LINK href="http://ithemes.com/builder-store/"]]http://ithemes.com/builder-store/[[/LINK]]

Just get rid of the line which begins "width".


.menu li ul {
left:-999em;
position:absolute;
width:150px;
}


And as long as your sub-menus are short enough to fit within the content area, you'll have horizontal rather than vertical 2nd-level menus.


Lisa comments:

Thanks Duncan. I don't have a demo URL as I haven't built the site yet. I will be very shortly. I just wanted to see if it was doable. Also, with your example, do you know if it is possible to get that little drop down bracket on the left side like my sample? Or is it too complicated?


Duncan O'Neill comments:

Lisa,

as others have said, yes, definitely doable, but again echoing Hai, and Gabriel, replicating your sample exactly is likely to cost more than $10. My code above is a starting point, and others have also offered code.

2012-06-29

Hai Bui answers:

It is definitely doable, but the current prize is a little too low for such task, especially when you don't have a demo site yet.