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

Help creating a CSS drop down menu

  • SOLVED

Hi everybody!
I'm trying to have a CSS drop down menu that has parents and first child always visible and then a drop down sub-menu like in this scheme.

http://www.lucadifilippo.com/share/menuscheme.png

I've included this into the header thinking that is needed a div:

<?php
//Get page nav
wp_nav_menu(
array(
'menu_class' => 'themenu',
'theme_location' => 'primary-menu',
)
);
?>

<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('.themenu').wrap('<div class="container"/></div>');
jQuery('.sub-menu').wrap('<div class="container2"/></div>');
} );
</script>


now I'm lost with the CSS, but I suppose there must be a better way to achieve this layout.
the CSS is here:http://www.lucadifilippo.com/wp-content/themes/dk/css/screen.css (from line 2514)

the work in progress is here: http://www.lucadifilippo.com/design/logotypes/

using WP 3.3.1 + DK theme

Many thanks

Answers (5)

2012-01-24

Fahad Murtaza answers:

Ok

This is easy. I can help.


LdF 777 comments:

first come, first serve ;)


Fahad Murtaza comments:

I am on it.


Fahad Murtaza comments:

Sent you a PM


Fahad Murtaza comments:

I was going to do the same thing. I downloaded the html file and checked it. I think Hai Bui has suggested a correct solution.


LdF 777 comments:

Sorry Fahd, where?


Fahad Murtaza comments:

I just checked the site and it was working much like you asked for. Isn't it what you need. Also I asked for access permissions in an private message.

2012-01-24

Hai Bui answers:

Hi,
I assume that "Photography","About","Contacts" are parents, "Fine Art","Commercial","Events"... are children and "Tate People","H20+HUmAnS","Tate Shadows" are the sub items that should drop down?
Please correct me if I'm wrong. I'm trying to understand the requirements before giving an answer.


LdF 777 comments:

Actually the parents are "Design" "Photography" "About" "Contacts".
"About" and "Contacts" are forced to a right alignment and do not have children

Design has "Branding" Environments" and "Products" as children, each of them should have a drop down menu with the other submenus.
Photography follows the same logic

All follows the WP Menu hierarchy set in wp-admin/nav-menus.php


Hai Bui comments:

Please try adding this to the css:

.sub-menu .container2 {
display:none;
}
.sub-menu > li {
position:relative;
}
.sub-menu .container2 ul {
position:absolute;
top:16px;
left:0px;
}
.sub-menu .container2 ul li {
float:none;
display:block;
}
.sub-menu li:hover .container2 {
display:block;
}


It will need more tweaks but let's try this first and see what else need to be done.


LdF 777 comments:

a step forward. it works. just waiting for Fhad to se if he got a different approach but your solution seems to work fine


Hai Bui comments:

It can work without the div (container and container2), so you can remove the javascript to add the div and use this css:
.sub-menu ul {
display:none;
}
.sub-menu > li {
position:relative;
}
.sub-menu ul {
position:absolute;
top:16px;
left:0px;
}
.sub-menu ul li {
float:none;
display:block;
}
.sub-menu li:hover ul {
display:block;
}


LdF 777 comments:

Thanks Hai Bui, so far your answer is the right one.
is it possible to have only "Design" and "Photography" without any rollover effects?


LdF 777 comments:

shall I add the div in to the wp_nav_menu?


Hai Bui comments:

I mean you can remove these javascript lines:
<script type="text/javascript">
jQuery(document).ready( function() {

jQuery('.themenu').wrap('<div class="container"/></div>');

jQuery('.sub-menu').wrap('<div class="container2"/></div>');

} );
</script>

You don't need to add the div in to wp_nav_menu

To have only "Design" and "Photography" without any rollover effects, add this to the css:

.themenu > li > a:hover {
color:#000000;
}


LdF 777 comments:

Great... I think I'm ok with your solution!


Silly question... how I close the question and pay? :)


Hai Bui comments:

Great! I'm glad I could help. Regarding closing the question, check this http://codewi.se/2011/04/22/voting-assign-prize-money/


LdF 777 comments:

Sorry Hai Bui, just a last detail, with this CSS where I should add a border to have a line between the parent (design & photography) and the visible children?
many thanks again!


LdF 777 comments:

got it!...
thanks again!

2012-01-24

designchemical answers:

Is this roughly what you are looking for?

[[LINK href="http://www.designchemical.com/lab/projects/index.html"]]http://www.designchemical.com/lab/projects/index.html[[/LINK]]

You dont require the jQuery containers. Can be handled just with CSS


LdF 777 comments:

yap, this is roughly what I'm looking for. not sure how to manage it without divs to control the final layout.
thanks


designchemical comments:

You can use the li tags to control specific widths.

How do you want the final layout to look?


LdF 777 comments:

The answer suggested by Hai Bui is how it should look like (layout) I will fine tune the graphics later.
have a look here please. http://www.lucadifilippo.com/design/early-works/

If you can suggest a way to avoid jQuery could be nice.


LdF 777 comments:

Thanks for your help Designchemical.
I'm ok with Hai Bui CSS.

2012-01-24

Kannan C answers:

Try this in your css

.themenu ul ul ul { display: none }
.themenu ul ul ul li { display: block }
.themenu ul ul li:hover > ul {
display: block;
}

2012-01-24

Jatin Soni answers:

This is what I have done for you just check it. I have created with html so you can use that id and class for your nav menu

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
html, body{margin:0;padding:0}
a{text-decoration:none;color:#444}
a:hover{color:#000}
ul{list-style:none;margin:0;padding:0}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

ul#navmenu{
maring:0;
padding:0;
list-style:none;
}
ul#navmenu li{
float:left;
}
ul#navmenu li a{
padding:10px;
background:#eee;
display:block;
border:1px solid #aaa;
}
ul#navmenu li a:hover{
background:#444;
color:#ccc
}

ul#navmenu ul{
position:relative;
}

ul#navmenu li li ul{
position:absolute;
display:none;
width:70px;
background:#444;
}
ul#navmenu li li:hover ul{
display:block;
}
ul#navmenu li li ul a{
width:48px;
}

</style>

</head>

<body>

<ul id="navmenu" class="clearfix">
<li><a href="#">parent01</a>
<ul>
<li><a href="#">child01</a>
<ul>
<li><a href="#">sub01</a></li>
<li><a href="#">sub02</a></li>
<li><a href="#">sub03</a></li>
</ul>
</li>
<li><a href="#">child02</a></li>
<li><a href="#">child03</a></li>
</ul>
</li>
<li><a href="#">parent02</a>
<ul>
<li><a href="#">child04</a></li>
<li><a href="#">child05</a></li>
<li><a href="#">child06</a></li>
</ul>
</li>
</ul>


</body>
</html>


LdF 777 comments:

thanks Jatin. I'm ok with the Hai Bui answer