using rollover images for navigation menu

  • Henry

    (@voodoohoodoo)


    13 years, 4 months ago

    Hi all,
    am in desperate need of some help –
    I have some images already,
    I need to place these in the navigation menu – I have 2 images per menu item so they change colour when I hover on them.
    I need to know where and how to place these images in the code.

    This tutorial looked okay:https://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/

    but just not sure where to put the code. Does this sound right?

    Please help, I will be eternally in your debt.
    Any questions let me know.

    thanks
    H

Viewing 5 replies - 1 through 5 (of 5 total)

  • a link to your site with the menu in place would help.

    you need to identify the css selectors (css class and probably unique css id or css) of each menu item (this will depend on the wordpress function that your theme uses to build the menu) – possibly with the help of a free webtool such as firebug or fitefox web developer add-on.

    the code will then normally go into style.css of your theme.

    Thread Starter Henry

    (@voodoohoodoo)

    Sorry, yes – https://www.rerdownloads.com

    (The theme is Suffusion)

    thanks

    the css selectors of the menu items typically are:

    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70">

    with a class of .current-menu-item for the current page.

    the numbers vary for individual menu items – you can find them when you look into the html code of your site in the browser; or when you use a tool such as firebug.

    I have no idea if suffusion has a different way of adding custom styles.

    Thread Starter Henry

    (@voodoohoodoo)

    Ok yes, I have found these css selectors.

    <div id=”nav” class=”continuous fix”>
    <div class=’col-control’>
    <ul class=’sf-menu’>
    <li id=”menu-item-70″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-70″>ABOUT
    <li id=”menu-item-2299″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-2299″>CATALOGUE
    <li id=”menu-item-21″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-21″>CONTACT US

    so…I’m gonna have me a fiddle around with this stuff i guess…

    helplisa

    (@dhrumindc)

    I am trying to do this .. dont pick up images at all.

    .sidebarmenu #menu-item-21 a {
background-image:url('images/new.jpg'); }

.sidebarmenu #menu-item-21 a:hover { background-image:url('images/new.jpg');}

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘using rollover images for navigation menu’ is closed to new replies.