CSS ile Navigasyon Menü Tasarlayalım

20.07.2013 16:50

Adobewordpress WM Aracı Kullanıcı

Üyelik 08.07.2011
Yaş/Cinsiyet 36 / E
Meslek Tasarımcı
Konum İstanbul Avrupa

Ad Soyad V** Ö**
Mesajlar 677
Beğeniler 58 / 418
Ticaret 1, (%100)

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

2 kişi bu mesajı beğendi.

adobewordpress.com ~ “güncel tasarım okulu”

20.07.2013 18:29

#2

Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı

Üyelik 04.12.2011
Yaş/Cinsiyet 34 / E
Meslek .
Konum İzmir

Ad Soyad ** **
Mesajlar 2376
Beğeniler 704 / 791
Ticaret 1, (%100)

Benim nedense bütün HTML & CSS işlerinde eski tarayıcı takıntım var. Mesela bu verdiğiniz önizlemede IE 8'de problemler açığa çıkmış. Şu son yaptığım menüde (buradan) efekt yok fakat IE 7'de bile düzgün çalışıyor. Ben de kendi menülerimi nasıl tasarladığımı anlatmak istiyorum. Kısmet. :)

21.07.2013 01:21

#3

Adobewordpress WM Aracı Kullanıcı

Üyelik 08.07.2011
Yaş/Cinsiyet 36 / E
Meslek Tasarımcı
Konum İstanbul Avrupa

Ad Soyad V** Ö**
Mesajlar 677
Beğeniler 58 / 418
Ticaret 1, (%100)

IE kullanmadığım için test etmedim. Sorundan kastınız nedir. Box-shadowların kod alternatifini çoğaltmak gerek sanırım.

Örneğin firefox

a

b

Gibi bir dizilimi şöyle listeler.

a b

Bu dizilim yanlıştır. Doğrusu ab şeklinde olacaktır ki o yüzden Chrome şuan %70'lerin üzerinde kullanım oranına sahip. Konuyu şimdi firefox için de sorun yaratmayacak şekilde düzenliyorum. Siz de ie de test edip sonucu yazarsanız sevinirim.

adobewordpress.com ~ “güncel tasarım okulu”

21.07.2013 16:14

#4

JackkerL WM Aracı Kullanıcı

Üyelik 01.05.2013
Yaş/Cinsiyet 26 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad O** A**
Mesajlar 1868
Beğeniler 219 / 526
Ticaret 16, (%100)

adobewordpress.com'un takipçisiyim,öğretiyor.

1 kişi bu mesajı beğendi.

26.07.2013 17:23

#5

aerakman WM Aracı Kullanıcı

Üyelik 14.03.2012
Yaş/Cinsiyet 28 / E
Meslek Ekonomi ve Finans
Konum Samsun

Ad Soyad A** E**
Mesajlar 517
Beğeniler 37 / 98
Ticaret 0, (%0)

Harika işler yapıyorsunuz, takip ediyor ve öğreniyorum.

1 kişi bu mesajı beğendi.

26.07.2013 18:42

#6

Adobewordpress WM Aracı Kullanıcı

Üyelik 08.07.2011
Yaş/Cinsiyet 36 / E
Meslek Tasarımcı
Konum İstanbul Avrupa

Ad Soyad V** Ö**
Mesajlar 677
Beğeniler 58 / 418
Ticaret 1, (%100)

JackkerL adlı üyeden alıntı

adobewordpress.com'un takipçisiyim,öğretiyor.

aerakman adlı üyeden alıntı

Harika işler yapıyorsunuz, takip ediyor ve öğreniyorum.

Teşekkürler arkadaşlar. Tasarımlarınıza en ufak bir katkı sağlayabiliyorsak ne mutlu bize.

adobewordpress.com ~ “güncel tasarım okulu”

26.07.2013 20:13

#7

WAY4PLAY WM Aracı Kullanıcı

Üyelik 28.02.2013
Yaş/Cinsiyet 29 / E
Meslek Mühendis
Konum İstanbul Anadolu

Ad Soyad B** Ö**
Mesajlar 222
Beğeniler 30 / 39
Ticaret 2, (%100)

Menü tasarımları çok kaliteli duruyor.Bilgiler için çok teşekkürler :) Bundan sonra takipçinizim :)

05.08.2013 17:48

#8

10679 WM Aracı Anonim Üyelik

Üyelik 03.11.2012
Yaş/Cinsiyet - /
Meslek
Konum

Ad Soyad ** **
Mesajlar 458
Beğeniler 124 / 125
Ticaret 7, (%100)

Hocam kendi temama uyarmak için baya uğraştım, E tabi o kadarda olacak:) ama çok güzel bir şey ortaya çıktı. Siteniz de gerçekten çok güzel daha çok büyümesi dileği ile...

05.08.2013 19:23

#9

Adobewordpress WM Aracı Kullanıcı

Üyelik 08.07.2011
Yaş/Cinsiyet 36 / E
Meslek Tasarımcı
Konum İstanbul Avrupa

Ad Soyad V** Ö**
Mesajlar 677
Beğeniler 58 / 418
Ticaret 1, (%100)

Çok teşekkürler :)

@imamet O günleri de görürüz inşallah! :)

adobewordpress.com ~ “güncel tasarım okulu”

06.08.2013 15:53

#10

seoistiyoruz WM Aracı Kullanıcı

Üyelik 07.11.2012
Yaş/Cinsiyet 40 / E
Meslek bil mühendisi
Konum İstanbul Avrupa

Ad Soyad ** **
Mesajlar 16
Beğeniler 0 / 0
Ticaret 1, (%100)

selam,
ben menü yaptım ama çok uzun oldu , kısaltıncada ortalanmıyor :/ rengininide değiştirmek istiyorum yardımcı olabilen var mı?

CSS ile Navigasyon Menü Tasarlayalım

Üye Girişi Yap