CSS animated menu

Question

I am trying to obtain something similar to the "share this on..." menu here but I don't quite understand how they are doing this, even after a look at their CSS. I refer to the fact that the images show up on hover.

My first attempt would be something like

<div id="share_on">
    <ul>
        <li><a href="#"><img src="shareon-digg.png" /></a></li>
        <li><a href="#"><img src="shareon-reddit.png" /></a></li>
        ...
        <li><a href="#"><img src="shareon-stumbleupon.png" /></a></li>
    </ul>
</div>

and the CSS:

#share_on {overflow: hidden}
#share_on ul {margin-bottom: -16px}
#share_on li {display: inline}
#share_on li:hover {margin-top: -16px}

Of course this does not work, which is why I am asking here. In the inactive state, only half of the icon shows up, which is the expected behaviour. But on hover, nothing changes. I also have tried some variations, like

#share_on li:hover {margin-bottom: 16px}

or

#share_on li:hover {padding-bottom: 16px}

but none of these works. Any ideas?

Answer 1

They use divs with background, not imgs. Dunno if it matters, I don't really feel like trying it out right now.

.button {
  position: fixed;
  z-index: 9999;
  background-image: url('whatever');
  margin-right: 0px;
  ...
}

.button:hover {
  margin-right: 1px;
}

Something like this oughta do it. In theory at least.

Answer 2

From my understanding, you're talking about the animated rounded square icons, right? Without digging deep into the code, I bet those are done using jQuery. Hence I'd advise you to look there for answers.

http://jquery.com/

Answer 3

One way of achieving a similar effect is with the following css:

ul.social
    {
    width: 50%;
    margin: 1em auto;
    }

ul.social li
    {
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 31px;
    width: 34px;
    border-bottom: 1px solid #ccc;
    }

ul.social li img
    {
    position: relative;
    margin-top: 16px;
    -webkit-transition: margin-top 0.5s linear;
    }

ul.social li img:hover
    {
    margin-top: 0;
    -webkit-transition: margin-top 0.5s linear;
    }

And the html:

<ul class="social">
<li><a href="#" title="digg"><img src="img/digg.png" /></a></li>
<li><a href="#" title="facebook"><img src="img/fb.png" /></a></li>
</ul>

Demo page over at: http://www.davidrhysthomas.co.uk/so/social.html

The animation I'm using is the -webkit-transition, which is, of course, limited to working on Webkit (Chrome and Safari) browsers. Firefox gets the changed-position, but would need js/jQuery to smooth the transition.

It's worth noting that the site you link to uses a large-ish css-sprite (http://angnetwork.com/ug/wp-content/plugins/sexybookmarks/images/sexy-sprite.png) to create the same effect, but

Answer 4

I found the solution. The problem is just that <li> is an inline element. The following works:

<div id="share_on">
    <div class="animated"><a href="#"><img src="shareon-digg.png" /></a></div>
    <div class="animated"><a href="#"><img src="shareon-reddit.png" /></a></div>
    ...
    <div class="animated"><a href="#"><img src="shareon-stumbleupon.png" /></a></div>
</div>

and for the CSS:

#share_on {overflow: hidden}
.animated {float: left; margin-right: 5px; margin-bottom: -16px}
.animated img:hover {margin-top: -16px; margin-bottom: 16px}