Mesaj #580725 - Adobewordpress - CSS ile Navigasyon Menü Tasarlayalım

CSS3 ile birlikte tasarım yelpazemiş genişledi. HTML5 ile de kod dizinlerimiz daha derli toplu bir hal aldı. O zaman bu avantajları kullanarak yeni bir navigasyon menü hazırlayalım. Hem de JavaScript kullanmadan!

Navigasyon menü nedir?

İsminden de anlaşılabileceği gibi ziyaretçilerin web sayfanızda kaybolmasını engeller. Bir çeşit site haritasıdır. Ahtapot gibi siteyi saran kollara sahiptir. İyi bir navigasyon menü web sayfanızın kullanılabilirliğini arttırır.

Nasıl hazırlanır?

Yatay bir menü hazırlayacağız. HTML5 ile gelen

içerine klasik bir

HTML


 
 Adobewordpress.com

 Menü 1
 
 Alt menü 1
Alt menü 2
Alt menü 3

 

 

 Menü 2
Menü3
 
 Alt menü 1

 Alt menü 2

 Alt menü 3

 Alt menü 4

 Alt menü 5

 Alt menü 6

 

 
Menü4

CSS

tasarımını oluşturalım. Yazı tipini ve sayfanın ortasında çıkmasını belirtiyoruz. Ayrıca içerindeki

nav{ display:table; margin:0 auto; font:14px Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif; } nav ul{list-style:none; padding:0;}

.navigasyon{
 display:table;
 margin:1em;
 border:1px solid #292d30;
}

.navigasyon>li{
 display:inline-block;
 position:relative;
 border-right:1px solid #2a2e2f;
 border-left:1px solid #4a4e51;
 text-shadow: 0px 1px 2px #0b0c0e;
}

.navigasyon>li:first-child{border-left:0;}
.navigasyon>li:last-child{border-right:0;}

.navigasyon>li a:hover{
	    box-shadow: inset 0 -1px 0px 0px #f15441, inset 0 -2px 0px 0px #ef6c4e, inset 0 -3px 0px 0px #f6825d, inset 0 -4px 0px 0px #1d1e1d, inset 0px 0px 15px 5px #222;
   -moz-box-shadow: inset 0 -1px 0px 0px #f15441, inset 0 -2px 0px 0px #ef6c4e, inset 0 -3px 0px 0px #f6825d, inset 0 -4px 0px 0px #1d1e1d, inset 0px 0px 15px 5px #222;
-webkit-box-shadow: inset 0 -1px 0px 0px #f15441, inset 0 -2px 0px 0px #ef6c4e, inset 0 -3px 0px 0px #f6825d, inset 0 -4px 0px 0px #1d1e1d, inset 0px 0px 15px 5px #222;
 }

.navigasyon>li:hover .alt-menu{border-top:1px solid #111;left:auto;}

.navigasyon a{
 display:block;
 padding:.5em 2em;
 color:#ddd;
 text-decoration:none;
 transition:all .3s ease;
 background-image: linear-gradient(bottom, #3F4346 100%, #2B2C2F 0%);
 background-image: -o-linear-gradient(bottom, #3F4346 100%, #2B2C2F 0%);
 background-image: -moz-linear-gradient(bottom, #3F4346 100%, #2B2C2F 0%);
 background-image: -webkit-linear-gradient(bottom, #3F4346 100%, #2B2C2F 0%);
 background-image: -ms-linear-gradient(bottom, #3F4346 100%, #2B2C2F 0%);
 background: #3f4346;
}

.navigasyon a:hover,.navigasyon a:focus{
 color:white;
 -moz-box-shadow:3px 3px 5px 6px #000;
 -webkit-box-shadow: 3px 3px 5px 6px #000;
 box-shadow: 3px 3px 5px 6px #000;
}

.alt-menu{
 position:absolute;
 width:150%;
 left:-9999px;
}

.alt-menu>li+li{
 border-top:solid 1px #222;
}

.alt-menu a{
 background:#444;
 font-size:14px;
 padding:.7em 1em;
}

Kapanış

http://www.adobewordpress.com/css-ile-navigasyon-menu-tasarlayalim

Üye Girişi Yap