ThemeShaper Forums » ThemeShaper WordPress Themes

[closed]

Hover images in menu

(24 posts)
  • Started 4 years ago by rscamero92
  • Latest reply from rscamero92
  • This topic is resolved
  1. 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 4 years ago #
  2. 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 4 years ago #
  3. 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 4 years ago #
  4. The Menu on asoftplace.net seems to be hardcoded.
    hardcoded has the advantage that you can give each item its own class.

    Posted 4 years ago #
  5. 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 4 years ago #
  6. 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 4 years ago #
  7. 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 4 years ago #
  8. ...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 4 years ago #
  9. Thanks guys, I'll try this both ways and let you know how it goes!

    Posted 4 years ago #
  10. 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 4 years ago #
  11. 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 4 years ago #
  12. better yet...... how do I style the CSS to show the images as the links. Sorry if I have confused anyone.

    Posted 4 years ago #
  13. 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 4 years ago #
  14. Helgatheviking,

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

    Posted 4 years ago #
  15. 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 4 years ago #
  16. 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 4 years ago #
  17. 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 4 years ago #
  18. What is #access for???? other then to drive someone nuts!

    Posted 4 years ago #
  19. 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 4 years ago #
  20. 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 4 years ago #
  21. 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 4 years ago #
  22. 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 4 years ago #
  23. 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 4 years ago #
  24. 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 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.