Navigasyon Kodu

Bu süper navigasyon kodu ile sitenize çok güzel bir hava katabilirsiniz. Üzerinde sadece buton isimleri ve resimlerini değiştirin. Eğer css bilginiz varsa renkler üzerinde de biraz değişiklik yapabilirsiniz. Fakat kesinlikle telif haklarını silmeyin. Sizde blogger karalisteye girmeyin. Eğer bize birazcık saygınız varsa.

<!--MinikUzman Gelişmiş Navigasyon Kodu Başlangıç--> <!--Telif Hakkı Sahibi MinikUzman--> <minikuzman> <style type="text/css"> .overview-button { position:fixed; left:-10px; top:10px; width:72px; height:62px; background-color: #363636; cursor:pointer; pointer-events: auto !important; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index:999999; background-repeat: no-repeat; background-position: 10px center; text-align: center; background-color: #000; border-right-style: solid; border-right-width: 5px; border-right-color: #b72228; -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } .overview-button img { width: 40px; height: 40px; float: right; padding: 12px 12px 0px 0px; } .overview-button:hover { background-color: #b72228; border-right-style: solid; border-right-width: 5px; border-right-color: #000; } ul#minikuzman { position:fixed; margin: 0px; padding: 0px; top: 10px; right: 0px; list-style: none; z-index:999999; cursor:pointer; pointer-events: auto !important; display:block; } ul#minikuzman li { width: 200px; margin-bottom: 5px; } ul#minikuzman li img { width: 40px; height: 40px; float: left; padding: 10px 0px 0px 12px; } ul#minikuzman li a { display: block; width: 200px; height: 62px; background-color: #b72228; background-repeat: no-repeat; background-position: 10px center; text-align: center; -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; border-left-style: solid; border-left-width: 5px; border-left-color: #000; } ul#minikuzman li a:hover { background-color: #000; border-left-style: solid; border-left-width: 5px; border-left-color: #b72228; } ul#minikuzman li span { color:#fff; font-family: Arial; font-weight:normal; font-size:28px; line-height:62px; } @media screen and (max-width: 1024px) { .overview-button img { width: 30px; height: 30px; padding: 4px 6px 0px 0px; } .overview-button { width: 50px; height: 38px; } ul#minikuzman li img { width: 30px; height: 30px; padding: 5px 0px 0px 5px; } ul#minikuzman li a { height: 40px; } ul#minikuzman li span { font-size: 20px; line-height: 40px; padding-right:20px; } ul#minikuzman li { margin-right:-20px; } .hint { font-size: 18px; padding: 5px 10px 10px 10px; } } </style> <!--MinikUzman Navigasyon Kodu--> <ul id="minikuzman"> <li><a href="#"><img src="http://redcode.web.tr/images/home.png" alt="" /><span>AnaSayfa</span></a></li> <li><a href="#"><img src="http://redcode.web.tr/images/skills.png" alt="" /><span>MinikUzman</span></a></li> <li><a href="#"><img src="http://redcode.web.tr/images/resume.png" alt="" /><span>Servisler</span></a></li> <li><a href="#"><img src="http://redcode.web.tr/images/portfolio.png" alt="" /><span>Haberler</span></a></li> <li><a href="#"><img src="http://redcode.web.tr/images/about.png" alt="" /><span>Hakkımızda</span></a></li> <li><a href="#"><img src="http://redcode.web.tr/images/contact.png" alt="" /><span>Iletişim</span></a></li> </ul> </minikuzman> <!--MinikUzman Gelişmiş Navigasyon Kodu Bitiş-->