Sitesine menü kodu eklemek isteyenler için koddostu ekibince hazırlanmış harika bir hazır kod! Css3 destekli bu hazır kodu sitenizde dilediğiniz yere ekleyin! Genişliği ayarlamak için kodun başlangıcındaki width:280px değerini azaltıp arttırmanız yeterli!(width:400px gibi)
önizleme : http://preview.koddostu.com/2013/09/link-1-link-2-link-3-link-4-link-1-link.html
alıntı
kaynak:koddostu.com
Kod:
<!--Kod Dostu HTML CSS3 Menü Kodu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<style>.koddostu-tda{width:280px;}</style>
<koddostu>
<div class="koddostu-tda">
<a href="http://www.koddostu.com">Link 1</a>
<a href="http://www.koddostu.com/2013/09/link-menusu-css3-html-hazr-kodu.html">Link 2</a>
<a href="http://www.koddostu.com">Link 3</a>
<a href="http://www.koddostu.com/2013/09/link-menusu-css3-html-hazr-kodu.html">Link 4</a>
</div>
</koddostu>
<style>.koddostu-tda{position:relative;display:block;background:#40424d;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;text-align:center;padding:15px 0px 20px 0px;box-shadow:0px 0px 4px 3px rgba(0, 0, 0, 0.5) inset;-moz-box-shadow:0px 0px 4px 3px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0px 0px 4px 3px rgba(0, 0, 0, 0.5) inset;}.koddostu-tda a{position:relative;display:inline-block;width:85%;height:50px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;text-align:center;font-family:Helvetica,sans-serif;font-size:25px;color:#fff;font-weight:bold;line-height:50px;text-decoration:none !important;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;transition:all 0.3s ease-in;margin-bottom:15px;}</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style>.koddostu-tda a:after{content:'';display:block;position:absolute;bottom:-8px;left:0px;width:100%;height:1px;background:#29313d;border-bottom:1px solid #555762;}.koddostu-tda a:hover, a:active, a:focus{outline:0;background:#31333f;color:#4B8CD1;box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.2) inset;-moz-box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.2) inset;-webkit-box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.2) inset;}</style>
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<!--Kod Dostu HTML CSS3 Menü Kodu STOP-->
önizleme : http://preview.koddostu.com/2013/09/link-1-link-2-link-3-link-4-link-1-link.html
alıntı
kaynak:koddostu.com