Ένα apple μενού για το blog και το site σας
Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<style>
/* foulscode.blogspot.gr */
.old {
width: 960px;
height: auto;
}
.old ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}
.old ul li {
float: left;
list-style: none;
}
.old ul li a {
font: bold 12px/100% "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
padding: 11px 35px;
text-decoration: none;
color: rgba(0,0,0,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background: -webkit-linear-gradient(top, #cacaca, #848484);
background: -moz-linear-gradient(top, #cacaca, #848484);
background: -ms-linear-gradient(top, #cacaca, #848484);
background: -o-linear-gradient(top, #cacaca, #848484);
background: linear-gradient(to bottom, #cacaca, #848484);
}
.old ul li a:before {
border-left: 1px solid rgba(255,255,255,.1);
content: "";
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}
.old ul li a:after {
border-right: 1px solid rgba(255,255,255,.1);
box-shadow: 1px 0px 0px rgba(0,0,0,.5);
content: "";
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}
.old ul li:last-child a:after {border: none; box-shadow: none;}
.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}
.old ul li a:hover {
background: -webkit-linear-gradient(top, #929292, #535353);
background: -moz-linear-gradient(top, #929292, #535353);
background: -ms-linear-gradient(top, #929292, #535353);
background: -o-linear-gradient(top, #929292, #535353);
background: linear-gradient(to bottom, #929292, #535353);
}
.old ul li a:active {
-webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
}
/* foulscode.blogspot.gr */
</style>
<div class="old">
<ul>
<li><a href="URL">Home</a></li>
<li><a href="URL">Store</a></li>
<li><a href="URL">Mac</a></li>
<li><a href="URL">iPod</a></li>
<li><a href="URL">iPhone</a></li>
<li><a href="URL">iPad</a></li>
<li><a href="URL">iTunes</a></li>
<li><a href="URL">Support</a></li>
</ul>
</div>
DEMO LIVE
Στην συνεχεια προσθέστε με τα μαρκαρισμένα url και τους τίλους και αυτό ήταν!
Κατηγορίες:
Σχόλια