Social Navigation για το blog/site σας
Καλημέρα σε όλωις! Το μονο που πρέπει να κάνετε είναι αντιγραφή επικόλληση τον παρακάτω κώδικα!
<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* FoulsCode.blogspot.gr */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #798498;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
.float-left { float: left; }
.float-right { float: right; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after { clear: both; }
/* ---------- NAVIGATION ---------- */
nav {
margin: 50px auto;
width: 60px;
}
nav ul {
background-color: #505664;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-table;
position: relative;
}
nav ul li {
float: left;
}
nav ul li a {
color: #6daeb0;
display: block;
height: 45px;
line-height: 45px;
text-align: center;
width: 60px;
}
nav ul li a:hover{
color: #fff;
}
nav ul li ul {
background-color: #6daeb0;
margin-top: 20px;
padding: 5px 0;
position: absolute;
}
nav ul li ul:before {
background-color: #6daeb0;
content: "";
display: block;
height: 8px;
left: 26px; /* (nav ul li a { width: 60px; } / 2) - (nav ul li ul:before { width: 8px; } / 2) */
position: absolute;
top: -4px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
z-index: -1;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
color: #fff;
}
nav ul li ul li a:hover {
background-color: #5d9799;
}
</style>
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Social Navigation</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul class="clearfix">
<li><a href="#" class="btn"><span class="fontawesome-user"></span></a>
<ul>
<li><a href="URL"><span class="fontawesome-facebook"></span></a></li>
<li><a href="
URL"><span class="fontawesome-twitter"></span></a></li>
<li><a href="
URL"><span class="fontawesome-google-plus"></span></a></li>
<li><a href="
URL"><span class="fontawesome-linkedin"></span></a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Αποθήκευση και αυτό ήταν. :)
Κατηγορίες:
Σχόλια