Navigasyon Yan Menü Tasarımı

   Html5 ve Css3 Kullanılarak hazırlanmış olan animasyonlu bir menü örneği.Sayfa açılır açılmaz menü  açıklaması yukarıdan aşağı iniyor ve menü penceresi büyüyüp tekrar küçülüyor.Daha sonra  menü  çerçevesi mouse ile her karşılaştığında aynı şekilde büyüme işlemini gerçekleştiriyor.

Aşağıda ki CSS Kodlarını head tagları(etiketleri) arasına ekleyin.

<style type="text/css"> *{margin:0;padding:0;font-size:14px;} body{font-family:arial,sans-serif;background:#6CC1EA;padding:1em} .character{ background:url(codepo8.png) no-repeat center top #fff; padding:250px 0 0 0; text-align:center; position:absolute; top:0; left:0; width:320px; height:70px; -moz-border-radius:160px; -moz-box-shadow:5px 5px 5px rgba(0,0,0,.4); -webkit-border-radius:160px; -webkit-box-shadow:5px 5px 5px rgba(0,0,0,.4); border-radius:160px; box-shadow:5px 5px 5px rgba(0,0,0,.4); font-size:20px; color:#333; } .character a{ display:block; color:#369; text-decoration:none; } #whonav{margin-left:290px} #booknav{margin-left:315px} #blognav{margin-left:330px} #videonav{margin-left:345px} #audionav{margin-left:330px} #meetnav{margin-left:310px} #container{ position:relative; height:200px; width:600px; margin:0 auto; -moz-transform:scale(.3); -moz-transition:all .5s; -webkit-transform:scale(.3); -webkit-transition:all .5s; -o-transform:scale(.3); -o-transition:all .5s; transform:scale(.3); transition:all .5s; } #container:hover{ -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .mainnav li{ list-style:none; display:block; } .mainnav a,section h1{ text-decoration:none; font-family:calibri,arial,sans-serif; font-weight:bold; font-size:40px; color:#fff; text-shadow:1px 2px 1px rgba(0,0,0,.9); -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .mainnav a:hover{ color:#F8931D; -moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } section{ display:block; margin:150px auto 0 auto; width:600px; } section h1{font-size:30px;margin-bottom:10px} #container { -moz-animation-delay:.5s; -moz-animation-duration: 1s; -moz-animation-name: slidein; -webkit-animation-delay:.5s; -webkit-animation-duration: 1s; -webkit-animation-name: slidein; -o-animation-delay:.5s; -o-animation-duration: 1s; -o-animation-name: slidein; } @-o-keyframes slidein { 0% {-o-transform:scale(.3);} 50% {-o-transform:scale(1);} 100% {-o-transform:scale(.3);} } @-moz-keyframes slidein { 0% {-moz-transform:scale(.3);} 50% {-moz-transform:scale(1);} 100% {-moz-transform:scale(.3);} } @-webkit-keyframes slidein { 0% {-webkit-transform:scale(.3);} 50% {-webkit-transform:scale(1);} 100% {-webkit-transform:scale(.3);} } section{ -moz-animation-duration: 1s; -moz-animation-name: movein; -webkit-animation-duration: 1s; -webkit-animation-name: movein; -o-animation-duration: 1s; -o-animation-name: movein; animation-duration: 1s; animation-name: movein; } @-webkit-keyframes movein { from {margin-top:-200px;} to {margin-top:150px;} } @-o-keyframes movein { from {margin-top:-200px;} to {margin-top:150px;} } @-moz-keyframes movein { from {margin-top:-200px;} to {margin-top:150px;} } </style>

Daha sonra aşağıdaki HTML Kodlarını body etiketleri arasında uygun yere ekleyin.

<div id="container"> <header><br /> <h1 class="character"> Bilgi Cafem 61 <a href="#">@blckhckteam</a></h1> </header><br /> <nav><br /> <ul class="mainnav"> <li id="whonav"><a href="#about">Menü 1</a></li> <li id="booknav"><a href="#books">Menü 2</a></li> <li id="blognav"><a href="#blogs">Menü 3</a></li> <li id="videonav"><a href="#video">Menü 4</a></li> <li id="audionav"><a href="#audio">Menü 5</a></li> <li id="meetnav"><a href="#meet">Menü 6</a></li> </ul> </nav><br /> </div> <section><br /> <h1> Buraya İstediğiniz Başlığı yazın</h1> <p> Buraya istediğiniz açıklama yazısını ekleyin</p> </section>

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...