CSS - Navigaiton - Social


/ Published in: CSS
Save to your folder(s)

Comment to follow


Copy this code and paste it in your HTML
  1. .social nav {
  2. overflow:hidden;
  3. height:100%;
  4. position:relative;
  5. }
  6. .social nav ul {
  7. }
  8. .social nav ul li {
  9. float:left;
  10. display:block;
  11. margin-right:5px;
  12. margin-bottom:5px;
  13. }
  14. .social nav ul li.first {
  15. }
  16. .social nav ul li.last {
  17. }
  18. .social nav ul li.odd {
  19. }
  20. .social nav ul li.even {
  21. }
  22.  
  23. .social nav ul li a {
  24. display:block;
  25. float:left;
  26. text-indent:-9999px;
  27. width:32px;
  28. height:32px;
  29. background-image:url('/images/icons/social.png');
  30. background-repeat:no-repeat;
  31. }
  32. .social nav ul li.first a {
  33. }
  34. .social nav ul li.last a {
  35. }
  36.  
  37. .social nav ul li.facebook a {
  38. background-position:left top;
  39. }
  40. .social nav ul li.twitter a {
  41. background-position:left -32px;
  42. }
  43. .social nav ul li.linkedin a {
  44. background-position:left -64px;
  45. }
  46. .social nav ul li.google_plus a {
  47. background-position:left -96px;
  48. }
  49. .social nav ul li.pinterest a {
  50. background-position:left -128px;
  51. }
  52. .social nav ul li.instagram a {
  53. background-position:left -160px;
  54. }
  55. .social nav ul li.flickr a {
  56. background-position:left -192px;
  57. }
  58. .social nav ul li.tumblr a {
  59. background-position:left -224px;
  60. }
  61. .social nav ul li.vimeo a {
  62. background-position:left -256px;
  63. }
  64. .social nav ul li.youtube a {
  65. background-position:left -288px;
  66. }
  67. .social nav ul li.dribble a {
  68. background-position:left -320px;
  69. }
  70. .social nav ul li.skype a {
  71. background-position:left -352px;
  72. }
  73. .social nav ul li.rss a {
  74. background-position:left -384px;
  75. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.