Need a bit of menu help? WordPress
- SOLVED
So I have been a part of a project on http://olddogstudios.com.au/dev/ and the top menu is suppose to have tabbed hovers. Some of them do (the larger ones)
However, the smaller ones are just being a pain to get to show the full tab. The
This menu, if you click on Client list is also a two-tiered navigation and not with WordPress 3.0
If someone can figure out through CSS in fixing this issue, I will award it.
The tab image is -
http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select.png
If it takes telling me to cut the tab and add certain CSS, that is fine. This just has to work out correctly so the menu is spaced out well and still uses the two-tiered navigation.
---
EDIT:
Jean Baptist Jung has a great solution that he posted on WPHacks and WPRecipes:
http://www.wprecipes.com/how-to-use-the-css-sliding-doors-technique-within-wordpress
I am using the wp_list_pages in tie with Darren Hoyt's two-tiered navigation:
http://www.darrenhoyt.com/2008/02/12/creating-two-tiered-conditional-navigation-in-wordpress/
I understand I will have to use the sliding door CSS and have already spliced the image. I do not need you to do that. Here are the necessary images I have already done.
http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select.png
http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select-right.png
http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select-left.png
What I need is a short CSS. Not answers. Less than 5 minutes of your time is worth $7. I am a developer too. I am knee deep in a music player widget, so your help is appreciated, but the most I will pay for your time in this project is $10.
Answers (6)
Baki Goxhaj answers:
Agreed with Andrzej quick workaround, but it should be 95px, not 65px.
#nav li a {
min-width:95px;
}
This would still be a problem with longer menu items which will float outside the background. Sliding-doors technique is the real solution for this and there is how you implement it. [[LINK href="http://www.alistapart.com/articles/slidingdoors/"]]http://www.alistapart.com/articles/slidingdoors/[[/LINK]]
Here is a project where I have implemented it: [[LINK href="http://www.jdmnagoyaautoparts.com/"]]http://www.jdmnagoyaautoparts.com/[[/LINK]]
Nile Flores comments:
The other has been tried before I even asked this question. Sliding doors will have to work. I put the tutorials above and the spliced image. I just wanted the CSS workaround before I apply it, rather than be sent to tutorials I already had googled before.
Baki Goxhaj comments:
@Andrzej Zglobica:
<blockquote>@Baki Goxhaj - you're wrong, needs to be 65px coz of padding on the element.</blockquote>
Yes, you're right.
idt answers:
The tabs are not rounded corners, right? Looking at http://olddogstudios.com.au/dev/wp-content/themes/olddogstudios/images/menu-select.png it seems it's not.
If so, add this to your css:
#mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a {
background:url("images/menu-select.png") repeat-x left top transparent;
}
#nav li a, #nav li a:visited {
background-repeat:repeat-x;
}
Nile Flores comments:
The original tab is rounded, but the graphic has a shadow, and had to be spliced.
So, I believe the sliding doors css may need to be applied. I may end up just coding it myself since I am almost done with my music player widget.
idt comments:
I see.
Ok, so withouth modifying your existing CSS, just adding what's needed and the existing images(though you need to resize menu-select-right.png) you have, this should do it:
#mainmenu ul li a:hover, #mainmenu .current_page_item a {
background: url("images/menu-select-left.png") no-repeat left top !important;
line-height:49px;
padding:0 0 0 8px;
display: block;
float: left;
}
#mainmenu ul li a:hover span, #mainmenu .current_page_item a span{
background: url("images/menu-select-right.png") repeat-x right top !important;
display:block;
padding:0 15px 0 7px;
float: left;
}
As I've mentioned above, you need to re-size menu-select-right.png to be at least as wide as the tab that could contain "Getting Started" menu.
idt comments:
Forgot to mention that the structure of your menu should be something like this:
<div id="mainmenu">
<ul id="nav">
<li class="page_item page-item-4 current_page_item"><a href="http://olddogstudios.com.au/dev/" title="Home"><span>Home</span></a></li>
</ul>
</div>
<span> tag added inside <a> tag.
Nile Flores comments:
Yes, I will be adding Jean-Baptiste Jung's code snippet to put in the span tag.
As soon as I apply this and it works, I will award this. I appreciate you taking the time to come back to provide a solution. :)
Andrzej answers:
Quick workaround would be addying these to your CSS:
#nav li a {
min-width:65px;
}
Give it a go, that might be all you need.
If you want to vary tab width on indivudal tabs, you need to use i.e. sliding-door technique which might require bit bigger budget.
Andrzej comments:
@Baki Goxhaj - you're wrong, needs to be 65px coz of padding on the element.
Cosmin Popovici answers:
You are using a single image that cannot expand to fit the whole nav item.
I recommend you implement the sliding doors technique: [[LINK href="http://www.alistapart.com/articles/slidingdoors/"]]CSS Sliding Doors[[/LINK]]
EDIT: hehe, looks like I was a little late :D
Nilesh shiragave answers:
you have to increase the image width a bit and have to apply.
and you have to apply background-image to both <li> and anchor <a>.
let me know how you are displaying menu using wp_list_pages() function or wordpress wp_nav_menu() function which is introduced in wordpress 3.0
Nilesh shiragave comments:
and check this tutorial. you have to create navigation image and CSS similar to this tutorial to get those rounded corners for the navigation items.
http://ashoksuthar.wordpress.com/2007/02/14/rounded-tab-menu-through-css/
Nile Flores comments:
I am familiar with border-radius. That is not what this is.
Jermaine Oppong answers:
Place your previous 'menu-select.png' in your themes image folder with the attached image. Then replace this code in your style.css file
/* From line 136 */
#mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a{
color:#fff;
background:url('images/menu-select.png') no-repeat top center;
width:auto;
height:49px;
text-decoration:none;
}
to this
#mainmenu ul li a:hover, #mainmenu .current_page_item a, #mainmenu .select a{
color:#fff;
background:url('images/menu-select.png') repeat-x top center;
width:auto;
margin-top: 4px;
height:45px;
text-decoration:none;
/* Added CSS3 Rounded Corner Attributes */
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
}
IE does not accept CSS3 Attributes. You can choose to use the default(<em>which still works in my opinion and encourages others to switch browsers</em>) or download this HTC script and follow its instructions:
[[LINK href="http://www.graphicbeacon.com/enable-several-css3-attributes-with-internet-explorer-6-8/"]]css3PIE[[/LINK]] - The Doumentation page will show you how it works.
Nile Flores comments:
The original tab is rounded, as displayed in the splicing on the left and right. The other is merely a background as I placed that there for the moment while I am working on other parts of the website.