Hover images in menu « ThemeShaper Forums

ThemeShaper Forums » ThemeShaper WordPress Themes

[closed]

Hover images in menu

(24 posts)

Started 12 years ago by rscamero92
Latest reply from rscamero92
This topic is resolved

Tags:

rscamero92
Member

Okay, I believe I have pulled half my hair out on this, and I'm sure there is a post or 2 floating around here about hover images BUT for whatever reason, I cant seem to get my menu the way I want it. Below is a link to a page that has her menu the way I want mine.

http://asoftplace.net/

I want my menu like her horizontal menu.... I have tried numerous codes and I just can't wrap my brain around it. What HTML do I use?.... where do I put the html? and what CSS do I need?

Can someone please help??? I'm on the verge of giving up and doing away with my site all together. :(

Posted 12 years ago #
tarpontech
Member

At first glance, this doesn't look too tough, once you know where to go.

I'm going to assume you are using Thematic or a child-theme that is using the super-fish menu system. If thats the case, all you need are your images, and you can start digging into the CSS for sf-menu. There's a great tutorial thread here on the forum that goes into great detail as to how to bend super-fish to your will, especially it's css.

here's the post link: http://forums.themeshaper.com/topic/step-by-step-style-a-horizontal-superfish-menu-w-sample-code#post-8024

Posted 12 years ago #
rscamero92
Member

THANK YOU!!!!!!!!!

I think all the "sf" being in the css is what was throwing me for a loop! I can design in html and css fairly well but I don't know jack about javascripts.

I'm going to go work on my page and I'll post it here once I'm finished with it ;)

Thanks again!!!!!!

Posted 12 years ago #
rawsta
Member

The Menu on asoftplace.net seems to be hardcoded.
hardcoded has the advantage that you can give each item its own class.

Posted 12 years ago #
rscamero92
Member

Rawsta, that is the part I'm trying to accomplish, I want each "link" in the menu to have its own image. I have 2 images for each link, one being the main image, the other being the rollover/hover image. With the tutorial above I can get my menu in the webpage the way I want it, at least at first glance, without the hover effect, but how do I code it in the child theme to hover the way I want it?

I designed my page in the dreamweaver and have the hover effect within the html &css files, but when I try inserting that part of the code into the child theme it doesn't work. I'm not really sure what I'm doing wrong.

Any help would be greatly appreciated!!

Jamie

Posted 12 years ago #
rscamero92
Member

I was reading about filtering out thematic's actions/hooks........ would it be easier for me to filter out the superfish and then filter in something like jquery javascript for the menu?

Posted 12 years ago #

rawsta
Member

on an old page i did something like it
i putted the whole menu into the sidebar (functions.php)

<ul>
  <?php 	/* Widgetized sidebar */
				if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?>

	  <li class="news_item">(a href="http://yourdomain.com/category/news/">News</a>
    <li class="dates_item">(a href="http://yourdomain.com/category/dates/">Dates</a>
    <li class="info_item">(a href="http://yourdomain.com/info/">Info</a>
    <li class="gallery_item">(a href="http://yourdomain.com/gallery/">Gallery</a>
    <li class="specials_item">(a href="http://yourdomain.com/specials/">Specials</a>
    <li class="contact_item">(a href="http://yourdomain.com/contact/">Contact</a>

		<?php endif; ?>
		 <?php if (!is_404()) : ?>
	    <li class="search">
			<?php get_search_form(); ?>

		<?php endif; ?>
	</ul>

(changed the < to ( at the <a href )
so has every item its own class and can have own images.
maybe not the best way and i'm not sure if it will work but a try is it worth.

Posted 12 years ago #

tarpontech
Member

...shooting from the hip... If you view the page source, you'll see that thematic produces css classes for each menu item. You can use these classes to produce that menu-item-specific customization, such as individual images. These classes arn't listed in the stylesheets, as they're created dynamically, gotta peek at the source.

Posted 12 years ago #
rscamero92
Member

Thanks guys, I'll try this both ways and let you know how it goes!

Posted 12 years ago #
rscamero92
Member

Ok guys..... below is my menu (using thematic as my theme, I will be using my child theme though once I get the menu right)...... How do I add my rollover images to this????

<div id="access">

<div class="skip-link">
Skip to content</div>

<div class="menu">

<ul class="sf-menu sf-js-enabled">

<li class="page_item page-item-9">
About

<li class="page_item page-item-229">
Featured

<li class="page_item page-item-241">
Contact JCC

<li class="page_item page-item-15">
Inspiration

<li class="page_item page-item-11">
Projects

</div>

</div>

Posted 12 years ago #
rscamero92
Member

ooops it linked.......... try this again......

<div id="access">

<div class="skip-link">
(a title="Skip navigation to the content" href="#content">Skip to content</div>

<div class="menu">

<ul class="sf-menu sf-js-enabled">

<li class="page_item page-item-9">
(a title="About" href="http://jamiescreativecorner.com/about/">About

<li class="page_item page-item-229">
(a title="Featured" href="http://jamiescreativecorner.com/featured/">Featured

<li class="page_item page-item-241">
(a title="Contact JCC" href="http://jamiescreativecorner.com/contact-jcc/">Contact JCC

<li class="page_item page-item-15">
(a title="Inspiration" href="http://jamiescreativecorner.com/inspiration/">Inspiration

<li class="page_item page-item-11">
(a title="Projects" href="http://jamiescreativecorner.com/projects/">Projects

</div>

</div>

Posted 12 years ago #
rscamero92
Member

better yet...... how do I style the CSS to show the images as the links. Sorry if I have confused anyone.

Posted 12 years ago #

helgatheviking
Moderator

each li item gets a unique class. you can use that to specify which image goes with which link.

.sf-menu a{
text-indent: -99999px;

}

.sf-menu li.page-item-9 a {
background: url(images/about.png) no-repeat;
}

.sf-menu li.page-item-9 a:hover {
background: url(images/about-hover.png) no-repeat;
}

Posted 12 years ago #

rscamero92
Member

Helgatheviking,

That didn't work either, (well except for the text-indent part lol), any other ideas?

Posted 12 years ago #
rscamero92
Member

Nevermind. I GOT IT!!!!!!!! WHOOOOOOOHOOOOOO!!!! Damn, I swear I just might get up and do a little dance hehehe ;)

I forgot with mocking my child theme up on my testing server, that the page-item numbers would be different that my live site. DUH!!!!

A BIG!!!!! Thank you to all of you who took the time to try to help me!!!!! And to Ian and anyone else who created or help create Thematic!!!!!!!

Posted 12 years ago #
helgatheviking
Moderator

congrats. i have done that one before myself. it is always well-deserved after all the hair-pulling that sometimes happens. don't forget to mark the thread as resolved.

Posted 12 years ago #
rscamero92
Member

Okay I have 5 of the 6 links the way I want them (again, THANKS EVERYONE!!!). But when I add the function to show the "home" link, it messes all the other links up, nor does it have a li class to be able to add my images to.

So, how do I add a link back to the home page without using the "add home link function"?

Posted 12 years ago #
rscamero92
Member

What is #access for???? other then to drive someone nuts!

Posted 12 years ago #
helgatheviking
Moderator

how are you generating the menu? if you are using wp 3.0 menus you can add unique classes to each item. if not, for the home link could you put the home background on just

.sf-menu li.page-item a

knowing that all the other links will override that in specificity?

and the #access menu is there to make you crazy. i think i read that on the themeshaper blog. ;)

Posted 12 years ago #
rscamero92
Member

lol @ access being there to make you crazy! I tried adding in the home using the CSS you typed above, and in doing so it cause the whole menu to go out of whack. I have the wp menu 3.0 option (using the hybrid theme) off so I'm not sure what went wrong. I switched back to the thematic them and when the function that allows the home link is active, my images don't show up, it looks as though it reverts back to the default wordpress menu when home link is active. As long as I keep the function deactivated all my links & images show fine, well except for not having the home link. So I'm clueless as to what isn't right. I'm almost done with the editing of my codes and should have my blog up today, I'll post a link here, maybe you or someone else with fresh eyes might be able to see what is wrong, or if something needs to be added etc etc...

Posted 12 years ago #
em hr
Moderator

For when things go really squirrely ( CSS wise ) try validating your stylesheet to see if there are errors.

http://jigsaw.w3.org/css-validator/

Posted 12 years ago #
rscamero92
Member

UGH!!!!!! here is my live blog..... jamiescreativecorner.com

It is far from finished but I uploaded the child theme and I have no idea what happened but half the images are not showing up and the links aren't working right.

Can anyone tell me what is wrong?

Posted 12 years ago #
helgatheviking
Moderator

what about hand-coding the menu as seen here
http://themeshaper.com/wordpress-menu-tricks

i'm guessing your menu isn't like to change much. and this way you could give the home link a useful class.

quickly looking at your site w/ http://getfirebug.com i see that you are importing the default.css stylesheet. it is common practice to not import that and to instead paste the contents into your stylesheet if you intend to make a lot of mods.

.sf-menu li

has a background of white... which is covering up your images. same for the hover states with sf-menu li:hover

Posted 12 years ago #
rscamero92
Member

Helga, I could kiss you right now!!! lolol THANKS!!!!!! it's fixed now, just got to change around the actual links and the hard part is done!!!!!

Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.