HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css navigation bar kullanımı
navigation bar css active
navigation bar nedir
navigation bar html
html navigation bar template
menu bar css
css navigation menu
menu bar html css
bar menu css
top bar menu css
navigation bar css and html
horizontal navigation bar kullanımı
navigation bar css active
navigation bar css animation
navigation bar css template
css navbar yapımı
css navigation bar align right
css navigation bar active link

CSS Navigation Bar(Gezinme Menüsü)

CSS Navigation Bar(Gezinme Menüsü)

Web sitenizdeki en temel parçalardan biri navigation barlarıdır. Bu kısım sayesinde web sitenizdeki tüm sayfalarınızı rahat bir şekilde dolaşabilirsiniz. Bu kısmı oluştururken html linklerden ve html listelerden faydalanacağız. Görsel kısmı ise yine css dili ile oluşturacağız.Genelde yatay ve dikey olmak üzere iki çeşit navigation bar vardır..Hadi hemen inceleyelim..

1-Horizontal Navigation Bar(Yatay Navigasyon Menüsü)

Genelde en çok gördüğümüz ve sitelerde olmazsa olmaz yatay olarak kullanılan navigasyon barlar vazgeçilmezdir. Sitenizin ana hattını oluştururlar. Sade ve anlaşılabilir şekilde bu menüleri oluşturmalısınız..

Kullanımı:

Css
.navigation_bar li {
float: left;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li a:hover {
background-color: #111;
}
.navigation_bar .active{
background-color: #111;
}
Html
<div class="navigation_bar">
<ul>
<li><a href="#anasayfa">Home</a></li>
<li><a href="#Haberler">Haberler</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
<li><a class="active" href="#iletisim">İletişim</a></li>
</ul>
</div>

a)Active-Current Navigation Link(Aktif-Geçerli Gezinme Linkleri)

Web sitenizin açık olduğu sayfanın aktifliğini vurgular.Bu sayede de sitenizi kullananların sitenizde hangi sayfada olduğunu kolaylıkla anlamış olurlar.

Kullanımı: u>

Css
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navigation_bar li {
float: left;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li a:hover:not(.active) {
background-color: #111;
}
.navigation_bar .active {
background-color: #708090;
}
Html
<div class="navigation_bar">
<ul>
<li><a href="#anasayfa">Anasayfa</a></li>
<li><a href="#Haberler">Haberler</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
<li><a class="active" href="#iletisim">İletişim</a></li>
</ul>
</div>

b)Border Dividers(Ayraç Kullanımı)

Navigasyon barlarınızdaki menü elemanlarınızı ayırmak için aralarına ayraç koymak isteyebilirsiniz.Bu sayede menü elemanlarınız hem rahat bir şekilde ayrılacak hem de göze hitap edecek..

Kullanımı:

Css
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navigation_bar li {
float: left;
border-right:1px solid #bbb;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li:last-child {
border-right: none;
}
.navigation_bar li a:hover:not(.active) {
background-color: #111;
}
.navigation_bar .active {
background-color: #708090; /*#4CAF50*/
}
Html
<div class="navigation_bar">
<ul>
<li><a href="#anasayfa">Home</a></li>
<li><a href="#haberler">Haberler</a></li>
<li><a class="active" href="#iletisim">İletişim</a></li>
<li style="float:right;"><a href="#hakkinda">Hakkında</a></li>
</ul>
</div>

c)Fixed Top Navigation Bar(Sabit Navigasyon Barı)

Web sitenizde uzun içerikler oluşturduğunuz zaman web sayfanızın uzunluk boyutu oldukça artacaktır.Sitenize gelen ziyaretçileriniz içeriğinizden faydalanmak için sayfanızı incelediğinde tekrardan sayfanın başına dönmek isteyecektir. Nedeni ise tekrardan navigation barınıza ulaşıp yeni sayfalar görmek istedikleri içindir.Ya da okudukları içeriğin yarısına geldiklerinde aradıkları bilgiyi bulup o sayfanızdan başka bir sayfanıza geçmek isteyebilirler.Bu neden ilede navigation barınızı sabit bir şekilde sayfanıza ayarlamak oldukça kolaylık sağlayacaktır.

Css
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position:sticky;/*eğer sorun olursa fixed olarak değiştirin*/
top:0px;
width: 100%;
}
.navigation_bar li {
float: left;
border-right:1px solid #bbb;
}
.navigation_bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation_bar li:last-child {
border-right: none;
}
.navigation_bar li a:hover:not(.active) {
background-color: #111;
}
.navigation_bar .active {
background-color: #708090; /*#4CAF50*/
}
Html
<body>
<div class="navigation_bar">
<ul>
<li><a class="active" href="#anasayfa">Anasayfa</a></li>
<li><a href="#haberler">Haberler</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#DCDCDC;height:1500px;">
<h1>Sabit Navigasyon Barı</h1>
<h2>Sayfayı aşağıya kaydırınız.</h2>
<h2>Sayfa aşağı doğru kaydığında navigasyon barının sabit kaldığını göreceksiniz..</h2>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
<p>Bu bir yazı paragrafıdır.</p>
</div>
</div>
</body>

2-Vertical Navigation Bar(Dikey Navigasyon Menüsü)

Web Sitelerinizin kategori ve içeriklerinize kolaylıkla düzenli bir şekilde ulaşılmasını sağlayan kısımdır.Bu kısım sayesinde web sitenizi ziyaret eden kullanıcı aradığı içeriği içerebilecek menü elemanına tıklayarak web sitenizde dolaşmaya başlayacaktır..

Kullanımı:

Css
.navigation_bar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
.navigation_bar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.navigation_bar li a:hover{
background-color: #708090;
color: white;
}
.navigation_bar .active {
background-color: #555; /*#4CAF50*/
color:#fff;
}
Html
<div class="navigation_bar">
<ul>
<li><a class="active" href="#anasayfa">Anasayfa</a></li>
<li><a href="#haberler">Haberler</a></li>
<li><a href="#iletisim">İletişim</a></li>
<li><a href="#hakkinda">Hakkında</a></li>
</ul>
</div>


Paylaş:

Enes KILIÇ
Webmaster