Google Fan Webmaster Forumu

Geri git   Google Fan Webmaster Forumu > Client side Programlama > HTML - CSS - XML

HTML - CSS - XML HTML & CSS Programlama

Seçenekler Stil
  #1  
Okunmamış 05.07.2014, 02:41
 
İstanbul Avrupa Şubesi
Yaş: 24
Mesajlar: 28
Konular: 28
Ticaret Sayısı: (0)
Aktiflik: 0 / 75
Wink CSS ile Navigasyon Menü Tasarlayalım

www.adobewordpress.com/tasarim-unsurlari/css"]CSS3[/URL] ile birlikte tasarım yelpazemiş genişledi. www.adobewordpress.com/tasarim-unsurlari/html5"]HTML5[/URL] 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 <nav> içerine klasik bir <ul> düzeneği kuracağız. Ve bunlara uygun bir tasarım hazırlayacağız.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

HTML

4 temel öğe içeren bir menü örneği hazırlayalım. Menü bağlantılarımızdan ikisinin de alt kategorileri olsun.

HTML-Kodu:
<nav>
 <ul class="navigasyon">
 <li><a href="http://adobewordpress.com">Adobewordpress.com</a></li>
 <li><a href="#">Menü 1</a>
 <ul class="alt-menu">
 <li><a href="#">Alt menü 1</a></li>
 <li><a href="#">Alt menü 2</a></li>
 <li><a href="#">Alt menü 3</a></li>
 </ul>
 </li>
 <li><a href="#">Menü 2</a></li>
 <li><a href="#">Menü3</a>
 <ul class="alt-menu">
 <li><a href="#">Alt menü 1</a></li>
 <li><a href="#">Alt menü 2</a></li>
 <li><a href="#">Alt menü 3</a></li>
 <li><a href="#">Alt menü 4</a></li>
 <li><a href="#">Alt menü 5</a></li>
 <li><a href="#">Alt menü 6</a></li>
 </ul>
 </li>
 <li><a href="#">Menü4</a></li>
 </ul>
</nav>
HTML kodlarımız bu kadar. Sırada bu taslağa güzel bir tasarım giydirmek var.

CSS

İlk <nav> tasarımını oluşturalım. Yazı tipini ve sayfanın ortasında çıkmasını belirtiyoruz. Ayrıca içerindeki <ul> kodları için ortak bir taslak yaratalım.

HTML-Kodu:
nav{ display:table; margin:0 auto; font:14px Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif; } nav ul{list-style:none; padding:0;}
Şimdi navigasyon classını atadığımız <ul> tasarımını yapalım.

HTML-Kodu:
.navigasyon{
 display:table;
 margin:1em;
 border:1px solid #292d30;
}
Her bir menü öğesinin görsel tasarımıyla devam edelim.

HTML-Kodu:
.navigasyon>li{
 display:inline-block;
 position:relative;
 border-right:1px solid #2a2e2f;
 border-left:1px solid #4a4e51;
 text-shadow: 0px 1px 2px #0b0c0e;
}
Birinci ve sonuncu menü öğesine özel alan oluşturalım.

HTML-Kodu:
.navigasyon>li:first-child{border-left:0;}
.navigasyon>li:last-child{border-right:0;}
Menü öğelerinin üzerine gelince oluşacak tasarımı belirleyelim.

HTML-Kodu:
.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;
 }
Alt menülerin sola yakınlığını tarayıcıya bırakalım.

HTML-Kodu:
.navigasyon>li:hover .alt-menu{border-top:1px solid #111;left:auto;}
Link tasarımlarıyla devam edelim.

HTML-Kodu:
.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 menülerin görünümünü düzenleyelim.

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

.alt-menu>li+li{
 border-top:solid 1px #222;
}
Son olarak alt menülerin link görünüşleri düzenleyelim.

HTML-Kodu:
.alt-menu a{
 background:#444;
 font-size:14px;
 padding:.7em 1em;
}
Ve CSS kodlarımız burada son buluyor.

Kapanış

Şık bir arayüze sahip navigasyon menü hazırlamak bu kadar kolay.

Kaynak : ]http://www.adobewordpress.com/css-ile-navigasyon-menu-tasarlayalim[/url]
Alıntı ile Cevapla

Reklam
Cevapla

Tag Ekle
css, ile, menu, navigasyon, tasarlayalim


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil



İçerik sağlayıcı paylaşım sitelerinden biri olan TurkWebmasterlar.Com WebMaster Forum Adresimizde T.C.K 20.ci Madde ve 5651 Sayılı Kanun'un 4.cü maddesinin (2).ci fıkrasına göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur. TurkWebmasterlar.Com hakkında yapılacak tüm hukuksal Şikayetler buradan iletişime geçilmesi halinde ilgili kanunlar ve yönetmelikler çerçevesinde en geç 1 (Bir) Hafta içerisinde TurkWebmasterlar.Com yönetimi olarak tarafımızdan gereken işlemler yapılacak ve Avukatlarımız size dönüş yapacaktır.