Abland
|
Hi,
There's a few posts related to customization of the horizontal menu so I thought this might help.
In your WP admin, Apperance > Menus, there's a tab at the top, "Screen Options". Select that to open the drop down.
Under "Show advanced menu properties" select "CSS Classes" and "Link Target".
In the menu section on the right, select a menu item from your custom menu to open the drop down. You now have "Open link in a new window/tab" and a text box for "CSS Classes (optional)". In the text box, add the class "yabba-dabba" for one of the menu links. That class is now added to the <li> tag for that menu item.
In "style.css" if you have black text on the menu:
ul.art-hmenu>li>a
{
position: relative;
display: block;
height: 34px;
cursor: pointer;
text-decoration: none;
color: #000000; /*BLACK TEXT*/
padding: 0 17px;
line-height: 34px;
text-align: center;
}
add the class identifier to change it to white:
ul.art-hmenu>li.yabba-dabba>a
{
position: relative;
display: block;
height: 34px;
cursor: pointer;
text-decoration: none;
color: #fff; /* WHITE TEXT*/
padding: 0 17px;
line-height: 34px;
text-align: center;
}
That specific link will now have white text while all the rest are black.
If you want space to the right of that menu item add:
ul.art-hmenu>li.yabba-dabba>a
{
margin-right: 50px;
}
For different images find:
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/menuitem.png');
}
add the new class and new image:
ul.art-hmenu>li.yabba-dabba>a:before, ul.art-hmenu>li.yabba-dabba>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/NEW-menuitem.png');
}
Everything between "/* begin MenuItem */" and "/* end MenuItem */" is playable.
|
| |
speedyp
|
Great info - thanks Abland 
|
| |
speedyp
|
Abland - I just tried this out & the custom menu class thing is a revelation :)
Trying the background image links.. any advice on setting the active, passive & hovered images for each link?
|
| |
Abland
|
Hi, speedyp,
I was pleased when I came across those options 
For the background, if it's just a case of different colours I usually download my theme's "menuitem.png" and change colours in Photoshop. Then upload with unique file names and apply the class to the applicable style rules.
But I've also gone: background-image: none; and then go with a background-color for each state.
|
| |
speedyp
|
Bear with me Abland - I've almost got it...
Set up a site to play with menus:
http://chris-creative.co.uk/menus
I've managed to add an image to the last menu item, but still unclear how to specify a different image for the passive, hovered & current states?
This would be a major step forward in my layouts if I can crack this...
Please help 
|
| |
Abland
|
Hi, speedyp,
You're on the right track for the hover. In style.css find:
ul.art-hmenu>li>a.active:before {
background-position: bottom left;
}
ul.art-hmenu>li>a.active:after {
background-position: bottom right;
}
ul.art-hmenu>li>a.active {
color: #63FD1C;
}
ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
background-position: center left;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
background-position: center right;
}
ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
color: #63FD1C;
}
Add your class and edit as inicated:
ul.art-hmenu>li.imagine>a.active:before {
background-image: url('http://chris-creative.co.uk/menus/images/image-active.jpg');
background-position: center center;
}
ul.art-hmenu>li.imagine>a.active:after {
background-image: url('http://chris-creative.co.uk/menus/images/image-active.jpg');
background-position: center center;
}
ul.art-hmenu>li.imagine>a.active {
color: #cc3300; /*reddish text*/
}
ul.art-hmenu>li.imagine>a:hover:before, ul.art-hmenu>li.imagine:hover>a:before {
background-image: url('http://chris-creative.co.uk/menus/images/image-hover.jpg');
background-position: center center;
}
ul.art-hmenu>li.imagine>a:hover:after, ul.art-hmenu>li.imagine:hover>a:after {
background-image: url('http://chris-creative.co.uk/menus/images/image-hover.jpg');
background-position: center center;
}
ul.art-hmenu>li.imagine>a:hover, ul.art-hmenu>li.imagine:hover>a{
color: #fff; /*white text*/
}
As the original rules called for a background position, since you're using new images you need to add new background position rules. In your site, it doesn't really make a difference if added or not ... I just like to deal with the little details as well as the larger.
|
| |
speedyp
|
YAHOO!!!!!!!
I'm finally able to create image rollover nav menus (just like I was doing 6 years ago with Xara Webdesigner) 
Thanks so much for taking the time to help 
|
| |
speedyp
|
now if only there was an option to shove the title out the way then it would be perfect................
|
| |
speedyp
|
never mind - sussed it.
My life is now perfect
|
| |
Mike
|
Is it possible to have one horizental menu but with one section to the left with say 4 buttons a particular color (passive and hover different) and then another section towards the right with say 3 buttons using another color scheme and finally one button on extreme right with another color?...awkard client!!!
They want the site to appear like different sections (not sure that it will)
|
| |
Mike
|
I am trying to follow your instructions above and have got more than half way, the top of the menu works exactly as I want however I am having difficulty with the submenu (drop down) I have enclosed my code below. I use subitem1.png
Mike
/* begin MenuItem */ ul.art-hmenu>li>a { position: relative; display: block; height: 36px; cursor: pointer; text-decoration: none; color: #59a3c6; padding: 0 25px; line-height: 36px; text-align: center; } ul.art-hmenu>li.yabba-dabba>a { position: relative; display: block; height: 36px; cursor: pointer; text-decoration: none; color: #fbb040; padding: 0 25px; line-height: 36px; text-align: center; } ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after { position: absolute; display: block; content:' '; top: 0; bottom:0; z-index: -1; background-image: url('images/menuitem.png'); } ul.art-hmenu>li.yabba-dabba>a:before, ul.art-hmenu>li.yabba-dabba>a:after { position: absolute; display: block; content:' '; top: 0; bottom:0; z-index: -1; background-image: url('images/menuitem1.png'); } ul.art-hmenu>li>a:before { left: 0; right: 15px; background-position: top left; } ul.art-hmenu>li>a:after { width: 15px; right: 0; background-position: top right; } .art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover { font-weight: bold; text-align: left; text-decoration: none; } ul.art-hmenu>li>a.active:before { background-position: bottom left; } ul.art-hmenu>li>a.active:after { background-position: bottom right; } ul.art-hmenu>li>a.active { color: #FEEBE1; } ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before { background-position: center left; } ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after { background-position: center right; } ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{ color: #FFFFFF; } /* end MenuItem */ /* begin MenuSeparator */ ul.art-hmenu>li { margin-left:0; } ul.art-hmenu>li:first-child { margin-left:0; } /* end MenuSeparator */ /* begin MenuSubItem */ .art-hmenu ul a { display: block; white-space: nowrap; height: 24px; background-image: url('images/subitem.png'); background-position: left top; background-repeat: repeat-x; border-width: 0; border-style: solid; min-width: 7em; text-align: left; text-decoration: none; line-height: 24px; color: #FFFFFF; margin:0; padding: 22px; } .art-hmenu ul.yabba-dabba> a { display: block; white-space: nowrap; height: 24px; background-image: url('images/subitem1.png'); background-position: left top; background-repeat: repeat-x; border-width: 0; border-style: solid; min-width: 7em; text-align: left; text-decoration: none; line-height: 24px; color: #FFFFFF; margin:0; padding: 0 22px; } .art-hmenu ul>li:first-child>a { border-top-width: 0; } .art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active { text-align: left; text-decoration: none; line-height: 24px; color: #FFFFFF; margin:0; padding: 0 22px; } .art-hmenu ul li a:hover { color: #FFFFFF; background-position: left bottom; border-top-width: 0 !important; } .art-hmenu ul li:hover>a { color: #FFFFFF; background-position: left bottom; border-top-width: 0 !important; } /* end MenuSubItem */
|
| |
nick
|
hey guys i know this thread is old but hopefully someone can answer my question. i have all the images for a custom menu( 6 buttons in total) and need them to change color along with each backround slider image(wp supersized plugin) or for the images in the backround slider to change on hover of menu button. is this possible.
heres a screan shot of what i am looking to do
<div style="width:480px;text-align:right;"><embed width="480" height="360" src="http://static.pbsrc.com/flash/rss_slideshow.swf" flashvars="rssFeed=http%3A%2F%2Ffeed941.photobucket.com%2Falbums%2Fad257%2Fwhodaman11%2Fart%2Ffeed.rss" type="application/x-shockwave-flash" wmode="transparent" /><a href="http://photobucket.com/redirect/album?showShareLB=1" target="_blank"><img src="http://pic.photobucket.com/share/icons/embed/btn_geturs.gif" style="border:none;" /></a><a href="http://s941.photobucket.com/albums/ad257/whodaman11/art/" target="_blank"><img src="http://pic.photobucket.com/share/icons/embed/btn_viewall.gif" style="border:none;" /></a></div>
thqnks in qdvqnce
|
| |
nick
|
sorry about that. here is the image ![](<div style="width:480px;text-align:right;"><embed width="480" height="360" src="<a href='?p=affr&redirect_url=http%3a%2f%2fstatic.pbsrc.com%2fflash%2frss_slideshow.swf%26quot%3b' target='ext'>http://static.pbsrc.com/flash/rss_slideshow.swf"</a> flashvars="rssFeed=http%3A%2F%2Ffeed941.photobucket.com%2Falbums%2Fad257%2Fwhodaman11%2Fart%2Ffeed.rss" type="application/x-shockwave-flash" wmode="transparent" /><a href="<a href='?p=affr&redirect_url=http%3a%2f%2fphotobucket.com%2fredirect%2falbum%3fshowShareLB%3d1%26quot%3b' target='ext'>http://photobucket.com/redirect/album?showShareLB=1"</a> target="_blank"><img src="<a href='?p=affr&redirect_url=http%3a%2f%2fpic.photobucket.com%2fshare%2ficons%2fembed%2fbtn_geturs.gif%26quot%3b' target='ext'>http://pic.photobucket.com/share/icons/embed/btn_geturs.gif"</a> style="border:none;" /></a><a href="<a href='?p=affr&redirect_url=http%3a%2f%2fs941.photobucket.com%2falbums%2fad257%2fwhodaman11%2fart%2f%26quot%3b' target='ext'>http://s941.photobucket.com/albums/ad257/whodaman11/art/"</a> target="_blank"><img src="<a href='?p=affr&redirect_url=http%3a%2f%2fpic.photobucket.com%2fshare%2ficons%2fembed%2fbtn_viewall.gif%26quot%3b' target='ext'>http://pic.photobucket.com/share/icons/embed/btn_viewall.gif"</a> style="border:none;" /></a></div>)
|
| |
nick
|
that didnt work either . here it is ![]() [IMG]http://i941.photobucket.com/albums/ad257/whodaman11/art/example_zps519d04a5.jpg[/IMG] 
|
| |