Advanced Search

CSS - Navigaiton - Social

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

Expand | Embed | Plain Text

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.