Help creating a CSS drop down menu WordPress
- 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)
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.
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!
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.
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;
}
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