Menu hover effect - how to reproduce this effect?


Tags: javascript,jquery,css,hover,effects

Problem :

Here is a nice hover effect applyied on main menu (red rectangles above menu): http://www.templatemonster.com/demo/37841.html

I'd like to use this effect on my website. There is no any css for that effect, so it must be some javascript used. How could I reproduce this or where could I find the javascript that can do that on my website? Simply, how could I achieve that?



Solution :

There is no need to use javascript, you can achieve it via CSS, try toggling the hover state on any of those links and you will see the effect.

The relevant CSS there is

#superfish-1 > li > a {
    -webkit-transition: all .3s ease;
    padding: 98px 10px 0 10px !important;
    background: url(../images/menu_hover.gif) 0 -100px repeat-x;
}

#superfish-1 a:hover {
      background-position: 0 0;
}

So, basically, there is a background image (the red rectangle) with a 100px offset; when you hover the link, the background offset disappears (with a 0.3s transition)


    CSS Howto..

    How to style LI to show quotes in a ticker

    How to resize image on window resize in CSS?

    How to make my dynamic table scrollable when mouse clicked?

    How to make this rounded shape with css [duplicate]

    How to do CSS for a grid of images

    how to set part of circle as background in css

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    How can I eliminate the space above my list?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    CSS: How to fix the width of a vertical menu?

    How do I achieve a fully working image scrolling effect like in this example?

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to arrange two butons side by side in Struts2

    How can I get the second child using CSS?

    How to make a transparent border using CSS?

    how to change height of div to covered the text area (CSS)

    Bootstrap How to make a responsive grid degradating in two steps?

    How to make the divs fill the remaining space without using float?

    How to apply css and elemental styles to a ASP.net MVC 3 Web Application

    How to show foreground image and then hide on hover?

    HTML/CSS Image Rollover/Animation, specific case with existing code, how to change animation?

    Find how an element's css has changed after jQuery “toggle” function has been used

    How to keep two divs and images inside them to be side by side on browser resize?

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to clear the (CSS) visited history of an Android WebView?

    Show css3 animate for 2 times

    How to position a CSS triangle using ::after?

    how to prevent vertical Stepdown

    How I can add highlight effect on outside the area of selection with CSS?