Her web sitesi için bir menü şarttır. Bu nedenle bu yazı, HTML ve CSS ile zarif bir gezinme menüsü oluşturma sürecinde size yol gösterecek.
Tasarım konseptimizi basit, temiz ve etkili olduğu için Apple web sitesi gezinme menüsüne dayandıracağız.
Hadi hadi bakalım!
HTML ile başlayın
HTML kodumuzu oluşturmak için, <nav>içinde bir dizi çapa sarılı <div> olan öğeyi kullanacağız. <nav>Etiket HTML5'te yeni olduğundan, <!DOCTYPE html>dosyanızın en üstünde olmasını isteyeceksiniz.
Gezinme menüsü için gereken HTML kodunun bir örneğini aşağıda bulabilirsiniz:
<nav>
<a href="#"><div>Home</div></a>
<a href="#"><div>About</div></a>
<a href="#"><div>Contact</div></a>
<a href="#"><div>Sitemap</div></a>
</nav>
Menünüzde istediğiniz kadar bağlantıya sahip olabilirsiniz. In href=""özelliğin, sadece sen bağlantısını istediğiniz sayfayla # sembolünü değiştirin.
<a>etiket üzerinde dışarıdan her birinin <div>etiketi, içeride değil. Bu, yalnızca metnin değil, aynı zamanda çevresindeki dolgunun da tıklamalara yanıt vermesini sağlayacaktır.
CSS'ye geçin
CSS kodunda belirtmek isteyeceğiniz birkaç şey vardır:
- Her birinin genişliğini ayarlayın <div>- 119 piksel kullandık.
- Yazı tipini ve yazı tipi boyutunu belirtin ve metnin ortaya hizalandığından emin olun.
- Her <div>birine 1 piksellik bir kenarlık verin .
- Her birindeki üst ve alt dolguyu <div>yaklaşık 10 piksel olarak ayarlayın.
- Her <div>birinin float: left;üst üste değil, yan yana olacak şekilde işaretlendiğinden emin olun
Örnek CSS kodu:
nav {
font-size: 14px;
font-family: georgia;
text-align: center;
}
div {
width: 119px;
border: solid 1px;
float: left;
padding: 10px 0;
}
Köşeleri yuvarlayın ve sınırları düzeltin
Apple gezinme menüsüne döndüğünüzde, gezinme çubuğunun yuvarlatılmış köşelere sahip olduğunu göreceksiniz. Bunu uygulamak biraz zor çünkü sadece ilk ve son kutuyu hedeflemek istiyorsunuz. Bunu yapmak için, kullandığımız: first-childve :last-childüzerinde seçicileri, <a>etiket, değil<div> aslında, <a>ilk ve son etiketleri <nav>etiketi.
a:first-child div {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
a:last-child div {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
Bu aşamada sahip olduğumuz bir sorun, kutuların sınırlarının ortada ikiye katlanmasıdır. Bunu düzeltmek border-left: none;için, tüm <div>etiketleri ayarlayın ve ardından :first-childyalnızca seçicinizde sol sınırı geri yükleyin .
Renklendirin
Şimdi renklendirme zamanı. Apple menüsü bunun için resimleri kullanıyor, ancak daha hızlı yüklendiği ve daha az dosya boyutu kapladığı için CSS kullanacağız. Kenarlıkların ve arka planların renklerini ayarlamak için onaltılık kod bilginizi kullanın.
3D efekti elde etmek üzere bir gradyan ayarlamak için CSS linear-gradient()işlevini kullanmak isteyeceksiniz . Ayarladığınız ilk onaltılık kod üst renk, ikincisi ise alt renktir. Ne yazık ki, bu işlev için henüz tüm tarayıcılarda tek tip destek bulunmadığından, gradyanı her ana tarayıcı için ayrı ayrı ayarlamanız ve bir tarayıcı gradyanı desteklemiyorsa tek bir renk ayarlamanız gerekir, örneğin:
background: #fb0
background: -webkit-linear-gradient(#fb0, #950);
background: -moz-linear-gradient(#fb0, #950);
background: -ms-linear-gradient(#fb0, #950);
background: -o-linear-gradient(#fb0, #950);
background: linear-gradient(#fb0, #950);
Gezinirken rengi değiştirin
Apple menüsündeki kutular, üzerine gelindiğinde renk değiştirir. Bu efekti elde etmek için, a:hoverseçiciyi kullanın ve arka planı eskisi gibi ayarlayın; bir degrade kullanıyorsanız birden fazla tarayıcı desteği ile. Boşluklu bir görünüm için gradyanınızdaki üst rengi alt renkten daha koyu olacak şekilde ayarlayabilirsiniz.