Css kodları
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html{
height:100%;
}
body{
text-align:center;
background:#fff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position:50% 50%;
height:100%;
font-family: 'Open Sans Condensed', sans-serif;
}
body:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
#menu{
display: inline-block;
height:135px;
width:80%;
vertical-align: middle;
white-space: nowrap;
}
#menu li {
position: relative;
z-index: 2;
display: block;
float: left;
width: 15%;
height: 135px;
line-height: 220px;
margin-right: 1.42857%;
white-space: nowrap;
background-position: 50%;
}
.rocket {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsIhUOAAef6OLIcXtsli_K2AavxTNQ4Bmq-o03bx-LEh-_j5bfoY3W1V8QwI1c8cfdwezhV3H1PpV9exzosqiN11tXtJwszyafRizh9P1xv31axaNYFXJQRbv3TX1TCj0wjllCl1MMyPg/s0/rocket-large.png')no-repeat;
margin-left: 1.42857%;
}
.wine{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxxylGJWRsRERDNFpb53cL61e-ofZ1mdn99BUpTiL0aQ3y32Vl1I_GymKaP-aH7yc-C7HGZ9Tf6lcVd6GqZ6tZOsfgqTACN7aNLIxrreW19Q5HKhsBoV21M83of9BCReep9QVCRRN0iEx/s0/wine-large.png')no-repeat;
}
.burger{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49GmT11c6R76eGyMwt1wFkECKe_I08-ePlvvCsAhtFkGB7c7aR9CcFskRlbwBqVG07mTaFhdy0W9P416ctPMZgWgu_3bkDicAKDUhQmu_aPLqL0Whxlp0H0rTrYVyOPFqNOa4elBwmGWq/s0/burger-large.png')no-repeat;
}
.comment{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjInuwSd99523vxXfYCkIByLFAWFEWfO79ZJ4EDXNDRXE3KKLreLSGJ1d66T9zp-B9kn_9Ji_lVOljW5TW0blK4eWnA_k_AHlMo5XVfJC13Zi3fB5FwFike1SVHBQawm2G-UVZ14JVwCoXi/s0/comment-large.png')no-repeat;
}
.sport{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuFI900o0mcb8qiFsNGNRdthRqHlcmoY7Iwe34D7923TZQ-Pw0kaIyibwvveBts6RR3UaiGHvVi5zaY5BmamKdDSa1nnbznlsXKyxFewaq4zcdHhfaA-nQTFIKtG-Ui_IgsCICPw7SBC4Y/s0/sport-large.png')no-repeat;
}
.earth{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFkKjs4m1X0ARyK3qdvb6jVMZEerX0j48iQMN9-iMWmbT2VvhXkQ1lEg1fHKDKYYgyQygDgkecdokMCjHMSjnarb38GBzhJe00trH3MIxmD4IrIWAyl8kN8egwUbB1Bxv88VskEwzUO66/s0/earth-large.png')no-repeat;
}
#menu ul{
position:relative;
}
#menu ul:after{
content:"";
display:block;
clear:both;
}
#menu a{
color:#D8D8D8;
text-decoration:none;
display:block;
width:100%;
height:100%;
text-shadow: 0 -1px 0 #000;
}
#menu li:after {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
right: -9.5238%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHX59OQ0GFrPQ1cMTGWUd7zzNn-2ZSP5dYRUBe50OMVCahXZ6HgXnQmkAFQtxPUD8_t6qCgANLqVfrN7V6Yx8tUwhCrlkPsSZ7dk1RRFZyZewHWwqVb7YM0vJpg5et8u-dsdMF1VwSdzn/s0/menu-bg.png');
}
.rocket:before {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
left: -9.5238%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHX59OQ0GFrPQ1cMTGWUd7zzNn-2ZSP5dYRUBe50OMVCahXZ6HgXnQmkAFQtxPUD8_t6qCgANLqVfrN7V6Yx8tUwhCrlkPsSZ7dk1RRFZyZewHWwqVb7YM0vJpg5et8u-dsdMF1VwSdzn/s0/menu-bg.png');
border-radius: 5px 0px 0px 5px;
}
.earth:after{
border-radius:0px 5px 5px 0px;
}
.current{
position:absolute;
top:-13px;
left:8.92857%;
margin-left: -49px;
width:95px;
height:165px;
-webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
}
.current-back{
width:100%;
height:100%;
position:absolute;
background:#00adef;
border-radius:5px;
border-bottom: 2px solid rgba(0, 0, 0, 0.09);
border-top: 2px solid rgba(255,255,255,0.1);
}
.top-arrow{
position:absolute;
overflow:hidden;
width:100%;
height:12px;
top:13px;
left:0;
z-index:2;
}
.top-arrow:before{
content:"";
position:absolute;
width:80%;
height:10px;
top:-10px;
left:10%;
border-radius:20%;
box-shadow:0 0 10px black;
}
.top-arrow:after{
content:"";
position:absolute;
width:0;
height:0;
top:0px;
border-top:8px solid #00adef;
border-left:6px solid transparent;
border-right:6px solid transparent;
margin-left:-6px;
left:50%;
}
.bottom-arrow{
position:absolute;
overflow:hidden;
width:100%;
height:12px;
bottom:17px;
left:0;
z-index:2;
}
.bottom-arrow:before{
content:"";
position:absolute;
width:80%;
height:10px;
bottom:-10px;
left:10%;
border-radius:20%;
box-shadow:0 0 10px black;
}
.bottom-arrow:after{
content:"";
position:absolute;
width:0;
height:0;
bottom:0;
border-bottom:12px solid #00adef;
border-left:8px solid transparent;
border-right:8px solid transparent;
margin-left:-8px;
left:50%;
}
.wine:hover ~ .current{
left: 25.5%;
}
.burger:hover ~ .current{
left: 42%;
}
.comment:hover ~ .current{
left: 58.5%;
}
.sport:hover ~ .current{
left: 75%;
}
.earth:hover ~ .current{
left: 91.1%;
}
Html Kodları
<html>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
</head>
<body>
<nav id="menu">
<ul>
<li class="rocket"><a href="https://www.bloggeriz.com/">Item menu 1</a>
</li>
<li class="wine"><a href="https://www.bloggeriz.com/">Item menu 2</a>
</li>
<li class="burger"><a href="https://www.bloggeriz.com/">Item menu 3</a>
</li>
<li class="comment"><a href="https://www.bloggeriz.com/">Item menu 4</a>
</li>
<li class="sport"><a href="https://www.bloggeriz.com/">Item menu 5</a>
</li>
<li class="earth"><a href="https://www.bloggeriz.com/">Item menu 6</a>
</li>
<div class="current">
<div class="top-arrow"></div>
<div class="current-back"></div>
<div class="bottom-arrow"></div>
</div>
</ul>
</nav>
</body>
</html>
Demosunu İnceleyebilirsiniz.
https://codepen.io/bloggeriz/full/dyvMNVV
Yorum Gönder