CSS Navigation Bar(Gezinme Menüsü)

HTML TEMELLERİ

HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)

HTML5
İLERİ SEVİYE

HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)

CSS TEMELİ

CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)

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

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

<ul>

<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

<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

<ul>

<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>

<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>

<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>

</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

<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>

Enes KILIÇ
Webmaster

HTML TEMELLERİ

HTML5 İLERİ SEVİYE

CSS TEMELİ

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

Css

Html

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

Css

Html

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

Css

Html

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

Css

Html

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

Css

Html

Paylaş:

HTML5
İLERİ SEVİYE