Breaking News
Loading...
, , , , ,

Create a Social Media Sharing Menu Using CSS and jQuery

Share on Google Plus


See the Pen PwJNdr by Arun Yokesh (@yokesh) on CodePen.


Create the HTML

1 Let’s create the HTML first. Here is our markup.

<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> 
 

Style the HTML with CSS

This is how our menu looks without any 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;
}
  

You Might Also Like

2 comments

  1. You can make demo on jsfiddle, jsbin, codepen or etc :>)

    Cheers (c)

    ReplyDelete

About me


Like us on Facebook