一個簡單簡潔的社交媒體共用菜單

效果預覽

如上， 也可以看線上的效果

live demo.

實現過程1.  建立菜單像的html

<div id="social_nav_horizontal">  <h3> Bookmark or Share This Post </h3>  <ul>    <li><a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Bookmark on del.icio.us">Delicious</a>    <li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com"  title="Share this on Facebook" >Facebook</a></li>    <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/" title="Stumble This Page" > Stumble</a></li>    <li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName" title="Tweet This Page" >Twitter</a></li>  </ul></div>

2.  添加CSS樣式(水平樣式的)

#social_nav_horizontal {  margin-left: 100px;  font-family: Futura, Verdana, Sans-Serif;  font-size: 18px;  color: #8e9090;}#social_nav_horizontal h3 {  display:inline;  padding: 0px 10px;  border-bottom:dashed 1px #ccc;}#social_nav_horizontal ul {  margin: 0;  padding: 0;  margin-top:20px;}#social_nav_horizontal ul li {  float: left;  padding: 5px 0 0 5px;  margin-left: 5px;  list-style-type: none;}#social_nav_horizontal ul li a {  padding: 4px 0 0 28px;  height: 32px;  color: #999;  text-decoration: none;  line-height: 1.45em;}

3. 給每個連結添加圖片

.delicious {  background:url(images/delicious.png) no-repeat;  background-position:0px -1px;}.facebook {  background:url(images/facebook.png) no-repeat;  background-position:0px -1px;}.stumbleupon {  background:url(images/stumbleupon.png) no-repeat;  background-position:0px -1px;}.twitter {  background:url(images/twitter.png) no-repeat;  background-position:0px -1px;}
4. 使用JQuery 方式添加，mouse on 的動畫效果
$(document).ready(function() {  $('#social_nav_vertical li a').hover(  // on mouse over move to left  function() {    $(this).stop().animate({ marginLeft: '20px' },300);  },  // on mouse out, move back to original position  function() {    $(this).stop().animate({ marginLeft: '0px' }, 300);  });});
完整
social-share-css-jquery (ZIP, 0.017 MB)
譯自：  http://sixrevisions.com/tutorials/web-development-tutorials/social-media-share-css-jquery/