Proste menu uzyskane za pomocą CSS, którego elementy oprócz podświetlenia, odbijają się lekko w bok w momencie najechania kursorem.
Download:
link
Źródło:
http://cssdeck.com/labs/wxtftwhm
HTML
<![CDATA[<!--//////////////Created by Ryan Bishop.///////////////////
Check out more of my work at: http://dribbble.com/RyanBishop
---------------------------OR-------------------------------
------------Follow me on twitter: @abletroner---------------
//////////////////////////////////////////////////////////-->
<!-- Google Fonts -->
<link href="//fonts.googleapis.com/css?family=Strait" rel="stylesheet" type="text/css"></link>
<!-- HTML -->
<div class="menu-container">
<div class="nav">
<div class="settings">
</div>
</div>
<div class="menu">
<ul>
<li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sdC-xlZg6TEi4t60-62NDl4DcxmA9MUSifn_Uzg7mFSnK9VRtjREesLnCgpTo6wrZZdrwemZvjHLjtZQnp1Q=s0-d">Search</a></li>
<li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u9kkTKdF-w1SReNlHLKsSxl3A5pILwFsq0YcIRPbuHtb6gH8I3b7JzlLKvUu7ArlN7VPZjodG9j-AT8eDP8Ko=s0-d">Upload</a></li>
<li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vPUkWTpkmtw2aaf-i_9FJPRftsyaMZaGC0BHligdL-fX9POzra9UWBGTSccsxirMch4SzVbE4VdSIu7mFLt9k=s0-d">Location</a></li>
<li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_upw0nXB9iWzo_tehJtlJIOeimngKwfNKjZVTmnH4pth8TFNS-xroIHeZUd-Cr_niF4vYLGJTNO4W1azUcBV5E=s0-d">Contacts</a></li>
</ul>
</div>
</div>
]]>
CSS
<![CDATA[/*///////////////Created by Ryan Bishop.////////////////////
Check out more of my work at: http://dribbble.com/RyanBishop
---------------------------OR-------------------------------
------------Follow me on twitter: @abletroner---------------
//////////////////////////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #a3cabd;
}
.menu-container {
display: block;
position: relative;
width: 300px;
background-color: #f3f0ef;
margin: 5% auto 0;
padding: 0;
border-radius:5px;
box-shadow: inset 0 0 1px rgba(255,255,255,1);
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.1);
}
.nav{
background-color: #ed6b3a;
height:40px;
border-radius:5px 5px 0 0;
}
.settings {
height:20px;
float:right;
background-image:url(http://i.imgur.com/CLs7u.png);
width:20px;
margin:10px;
}
.menu ul {
list-style:none;
}
.menu ul li {
border-top:1px solid rgba(0,0,0,0.1);
padding:11px 10px;
box-shadow:inset 0 1px 1px #fff;
text-indent:10px;
}
.menu ul li a {
font-size:14px;
color:#a4a3a3;
font-family: 'Strait', sans-serif;
font-size:14px;
text-decoration:none;
text-shadow: 1px 1px 1px #fff;
}
.menu ul li img {
float:left;
margin:-2px 0 0 0;
}
.menu ul li:hover {
border-left:3px solid #ed6b3a;
background-color:rgba(0,0,0,0.02);
}
]]>
0 komentarze:
Prześlij komentarz