1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

show image when hovering over sub menu item

Discussion in 'HTML & Website Design' started by surimaribo, Nov 23, 2016.

  1. #1
    Hi,

    I want to show a image when you hover over a submenu item in wordpress and make that image clickable .

    For example :
    menu 1
    sub menu 1
    sub menu 2

    So when i hover over the word sub menu 1 or submenu 2 , i want an 70*70 image to display that can link to another page .

    How can i accomplish that ?
     
    surimaribo, Nov 23, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Not tested.
    
    <li><a href="#"><img src="some.jpg"></a></li>
    ----------------
    li a img {
        display: none;}
    
    li a:hover img {
        display: inline;}
    Code (markup):
    You haven't given enough info to provide more than a bare skeleton.

    gary
     
    kk5st, Nov 23, 2016 IP
  3. surimaribo

    surimaribo Well-Known Member

    Messages:
    457
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    130
    #3
    where do i add this code in wordpress
    <li><a href="#"><img src="some.jpg"></a></li>
     
    surimaribo, Nov 23, 2016 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    I don't know. You haven't shown us the markup you're using for your menu nor where the menu's style properties are located nor what they are. We can only guess.

    Look into the source for your menus and if you've got a proper list structure, use the css I gave you as a guide to refactoring the applicable style sheet(s).
     
    kk5st, Nov 23, 2016 IP
  5. devcake

    devcake Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Hello,

    You can install the Menu Image plugin:
    https://wordpress.org/plugins/menu-image/

    After activation you will see option in Appearance - Menus to add images for each item in your menu.
    This plugin automatically creates three image sizes (24 x 24, 36 x 36, and 48 x 48 pixels).

    To add your own image size (70x70 pixels) you can add this code in your theme’s functions.php file:

    add_filter( 'menu_image_default_sizes', function($sizes){
    // remove the default 36x36 size
      unset($sizes['menu-36x36']);
    // add a new size
      $sizes['menu-70x70'] = array(70,70);
    // return $sizes (required)
      return $sizes;
    });
    PHP:
    Hope that will help you.
     

    Attached Files:

    devcake, Nov 27, 2016 IP
  6. fateeh

    fateeh Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    Digital Goods:
    1
    #6
    The easy way for wordpress, you can use plugin. just search in wordpress plugin youwant
     
    fateeh, Dec 12, 2016 IP