3 Boyutlu Yatay Üst Menü

   Menü butonlarının üstünde hafif bir ışık efekti bulunuyor.Tıklanmış olan butonun ışığı mavi renkli olarak ayarlanmış.  Ziyaretçiler  butonlara  tıklayıp  açılan sayfada sayfa ile ilişkili olan butonun diğerlerinden farklı görünmesi  için aktif sınıfına dahil etmeniz gerekiyor.Yada biraz değişiklik yaparak sadece mousun üstünde olduğu butonun içeriye batmış gibi görünmesini sağlayabilirsiniz.Menü örneği herhangi  bir resim ve JavaScript  kullanılmadan hazırlanmış bir örnektir.

   Demo görüntüsünde her buton için bir sayfa yerleştirdim.Sayfa boyutu 802 bayt kadar küçük olunca  tıklandığında açılması anlık oluyor.Bu sizi yanıltmasın.Her buton için ayrı bir sayfa bulunuyor ve tıkladığınızda  buton ile ilişkilendirilmiş sayfa açılıp buton içeride basılı görünüyor.

   Bu menüyü Blogger sitenize eklemek için; Kumanda Panelinizden Şablon HTML Düzenle diyerek aşağıdaki CSS kodlarını kodundan hemen üst kısmına ekleyin.
Not: Kullandığınız temaya göre değişiklik fark edebilir.

   Kumanda paneli > Şablon > HTML Düzenle yolunu izleyin.Ardından CTRL+F tuşları ile alttaki kodun üst kısmına CSS kodlarını kopyalayıp ekleyin.

]]></b:skin>

CSS KODLARI:

body {<br /> background: #2a2a2a;<br /> font-family: sans-serif;<br /> }<br /> <br /> .Nav:after {<br /> content: "";<br /> display: table;<br /> clear: both;<br /> }<br /> <br /> .buton:before, .buton:after {<br /> content: '';<br /> display: block;<br /> position: absolute;<br /> }<br /> <br /> .container {<br /> text-align: center;<br /> padding: 3.75em 0;<br /> }<br /> <br /> .Nav {<br /> list-style: none;<br /> margin-left: 0;<br /> font-size: 0.85em;<br /> }<br /> <br /> .ButonCerceve {<br /> -webkit-border-radius: 0.4375em;<br /> -moz-border-radius: 0.4375em;<br /> -ms-border-radius: 0.4375em;<br /> -o-border-radius: 0.4375em;<br /> border-radius: 0.4375em;<br /> -webkit-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;<br /> -moz-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;<br /> box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;<br /> background: #242424;<br /> border-top: 1px solid rgba(0, 0, 0, 0.1);<br /> border-bottom: 1px solid rgba(255, 255, 255, 0.1);<br /> display: inline-block;<br /> text-align: center;<br /> padding: 0.375em 0.3125em;<br /> position: relative;<br /> }<br /> <br /> .ButonCerceve:after {<br /> -moz-border-radius-bottomright: 0.4375em;<br /> -webkit-border-bottom-right-radius: 0.4375em;<br /> border-bottom-right-radius: 0.4375em;<br /> background: rgba(36, 36, 36, 0.4);<br /> width: 0.4375em;<br /> height: 0.4375em;<br /> bottom: 0;<br /> right: 0;<br /> }<br /> <br /> .buton {<br /> -webkit-border-radius: 0.3125em;<br /> -moz-border-radius: 0.3125em;<br /> -ms-border-radius: 0.3125em;<br /> -o-border-radius: 0.3125em;<br /> border-radius: 0.3125em;<br /> -webkit-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;<br /> -moz-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;<br /> box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;<br /> background-color: #343434;<br /> background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(78, 78, 78, 0.15)), color-stop(2%, rgba(65, 65, 65, 0.15)), color-stop(5%, rgba(59, 59, 59, 0.15)), color-stop(32%, rgba(56, 56, 56, 0.15)), color-stop(33%, rgba(54, 54, 54, 0.15)), color-stop(46%, rgba(53, 53, 53, 0.15)), color-stop(47%, rgba(51, 51, 51, 0.15)), color-stop(60%, rgba(50, 50, 50, 0.15)), color-stop(61%, rgba(48, 48, 48, 0.15)), color-stop(100%, rgba(42, 42, 42, 0.15)));<br /> background-image: -webkit-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);<br /> background-image: -moz-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);<br /> background-image: -o-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);<br /> background-image: linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);<br /> background-size: 4px 4px;<br /> float: left;<br /> margin-right: 0.125em;<br /> padding: 0.375em 0.4375em;<br /> position: relative;<br /> width:150px;<br /> }<br /> .buton a {<br /> -webkit-border-radius: 0.45833em;<br /> -moz-border-radius: 0.45833em;<br /> -ms-border-radius: 0.45833em;<br /> -o-border-radius: 0.45833em;<br /> border-radius: 0.45833em;<br /> text-shadow: black 0 -1px 0;<br /> background: rgba(182, 182, 182, 0.018);<br /> color: rgba(255, 255, 255, 0.85);<br /> display: block;<br /> font-family: 'Fresca', sans-serif;<br /> font-size: 1.5em;<br /> padding: 0.5em 0.5em 0.5em;<br /> text-decoration: none;<br /> }<br /> .buton:hover {<br /> -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;<br /> -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;<br /> box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;<br /> }<br /> .buton:hover a {<br /> filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);<br /> opacity: 0.8;<br /> }<br /> .buton:after {<br /> background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(69%, rgba(255, 255, 255, 0.11)), color-stop(80%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));<br /> background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);<br /> background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);<br /> background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);<br /> background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);<br /> width: 100%;<br /> height: 1px;<br /> left: 0;<br /> top: 0;<br /> }<br /> <br /> .aktif {<br /> -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> background-color: #2d2d2d;<br /> background-image: linear-gradient(transparent 50%, #2e2e2e 50%);<br /> background-size: 2px 2px;<br /> }<br /> .aktif a {<br /> text-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;<br /> background: none;<br /> color: #4cbeff;<br /> }<br /> .aktif:before {<br /> background-image: -webkit-gradient(radial, 50%, 0, 50%, 57, color-stop(0%, rgba(41, 137, 216, 0.51)), color-stop(53%, rgba(30, 87, 153, 0.01)), color-stop(54%, rgba(30, 87, 153, 0)), color-stop(57%, rgba(30, 87, 153, 0)));<br /> background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: -o-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> -webkit-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;<br /> -moz-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;<br /> box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;<br /> top: -0.25em;<br /> left: 10%;<br /> width: 80%;<br /> height: 0.375em;<br /> }<br /> .aktif:after {<br /> background-image: -webkit-gradient(radial, 50%, 0, 50%, 57, color-stop(0%, rgba(41, 137, 216, 0.51)), color-stop(53%, rgba(30, 87, 153, 0.01)), color-stop(54%, rgba(30, 87, 153, 0)), color-stop(57%, rgba(30, 87, 153, 0)));<br /> background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: -o-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> background-image: radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);<br /> -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;<br /> -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;<br /> box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;<br /> top: inherit;<br /> bottom: -0.5em;<br /> left: 0;<br /> width: 100%;<br /> height: 0.5em;<br /> }<br /> .aktif:hover {<br /> -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;<br /> }

HTML KODLARI:
HTML Kodlarını gadget ekleme yöntemi ile ekleyin blogger Üst bilgi gadgetinin hemen altına sürükleyerek bırakın.

<div class="container"> <ul class="Nav ButonCerceve"> <li class="buton"><a href="#">Anasayfa</a></li> <li class="buton"><a href="#">jQuery</a></li> <li class="buton aktif"><a href="#">Css3</a></li> <li class="buton"><a href="#">Wordpress</a></li> <li class="buton"><a href="#">Tutorial</a></li> </ul> </div>
***HTML Kodları içerisinde ki # işareti kısmına buton adına göre olan linklerin eklenecek olan kısmıdır.



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