Have Geek Brain

CSS animated menu

I'm trying to get something similar to the "share this on ..." menu here , but I'm not quite sure how they do it, even after looking at their CSS. I am referring to the fact that images appear on hover.

My first try would be 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 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 it won't work, which is why I am asking here. When inactive, only half of the icon is displayed, which is the expected behavior. But nothing changes on hover. I have also tried some options like

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

or

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

but none of these works. Any ideas?

+2


a source to share


4 answers


One way to achieve 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: http://www.davidrhysthomas.co.uk/so/social.html

The animation I'm using is -webkit-transition

, of course, limited to working with Webkit browsers (Chrome and Safari). Firefox gets the position changed, but it will need js / jQuery to smooth the transition.

It's worth noting that the site you are linking to is using a large-scale css sprite (http://angnetwork.com/ug/wp-content/plugins/sexybookmarks/images/sexy-sprite.png ) to create the same effect but

+1


a source


They use divs with background, not imgs. Dunno, if it matters, I really don't want to try this now.

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

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


Something like this should do it. In theory, at least.

0


a source


As I understand it, you are talking about animated square square icons, right? Without going deeper into the code, I'm pretty sure jQuery does it. Therefore, I would advise you to look for answers.

http://jquery.com/

0


a source


I found a solution. The problem is what <li>

is inline. 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 CSS:

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


a source






More articles:


All Articles