Blog 'nuzda daha dinamik bir görünüm kazandırmak ve sitenize gelen ziyaretçilerin siteniz de daha rahat dolaşabilmesi için blog'unuza açılır menü eklemeniz sizin yararınıza olacaktır.
Oluşturduğumuz kodları direkt sitenize uyguladığınız da paylaşmış olduğum görünümde bir menu oluşturmuş olursunuz , dilerseniz kendiniz de css kodlarını kullanarak daha iyi görünümde bir açılır menü oluşturabilirsiniz.
Örneğin bir moda blog'unuz olduğunu düşünelim.
Trendler , Defileler gibi başlıkları MODA başlığı altında , Çanta,Ayakkabı,Aksesuar gibi başlıkları ayrı ayrı menuler de olmasındansa hepsini Alışveriş başlığı adı altında toplamak istiyorsunuz.Bu gibi durumlar da açılır menü kullanmanız sayfanız açısından daha iyi bir tercih olacaktır.
Şimdi css ile yatay bir açılır menu yapmaya başlayalım.
İlk olarak -Css Kodlarını kullanarak yatay açılır menuyu tasarlamaya başlayalım.
#nav_menu_panel {
background:#FE6602;
height: 55px;
margin: 0 auto;
width: 100%;
}
Burada kullandığımız kodlar açılır menunun zeminini ayarlamak için yazdığımız kodlardır.background:#FE6602;
height: 55px;
margin: 0 auto;
width: 100%;
}
Genişlik,yükseklik ve sağa sola olan uzaklığı ayarladık,bu değerleri kendi sitenize göre düzenleyebilirsiniz.
Ayrıca background kısmından arka plan rengini dilediğiniz renge çevirebilirsiniz.Renk kullanmak istemiyorsanız,herhangi bir resim ekleyebilirsiniz.Dilerseniz zeminin kenarlarını border-radius etiketiyle biraz ovalleştirebilirsiniz.süslü parantezlerin içine border-radius:5px;
yazmanız kenarları yumuşatmanız için yeterli olacaktır.
Açılır menü nün zeminini hazırladıktan sonra , menü yü oluşturmaya devam ediyoruz
#nav_menu_section {
width: 600px;
height: 55px;
margin: 0 auto;
padding: 0 0 0 10px;
position:absolute;
}
Burada da açılır menü için zemin içine bir alan oluşturduk,post alanının dışına taşmaması için ,genişliğin değerini 600 px verdim,burada ki 600 px lik değeri siz kullanacağınız alana göre belirleyebilirsiniz.Yine margin ve padding değerleri burada normal olduğu için değişiklik yapmanıza pek gerek yok.Position 'u menu'nun dağılmaması ve açılır menünün görünebilir olması için absolute olarak ayarlıyoruz.width: 600px;
height: 55px;
margin: 0 auto;
padding: 0 0 0 10px;
position:absolute;
}
#nav_menu_section ul li {
float: left;
width: 150px;
text-transform: uppercase;
text-align:center;
padding-top:10px;
}
float: left;
width: 150px;
text-transform: uppercase;
text-align:center;
padding-top:10px;
}
Menu için oluşturacağımız liste elemanlarını kullanacağı alanları belirlemek için yukarıda ki kodları kullanıyoruz.Burada dikkat etmeniz gereken husus; nav_menu_section için 600px değer verdim,ve liste elemanları için 4 adet eleman kullanacağım için her birine 150 px değer atadım.Bütünlüğün bozulmaması açısından bu orana dikkat etmeniz gerekmekte.
#nav_menu_section ul li a
{
float: left;
width: 150px;
padding: 5px 0;
margin-right: 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
}
{
float: left;
width: 150px;
padding: 5px 0;
margin-right: 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
}
Menu de link vereceğimiz alanlarının stilini de burada ayarlıyoruz.Örneğin font tipini , font ailesini,birbirlerine olan sağ ve sol uzaklıkları gibi aralarında ki mesafeyi ve font büyüklüğü gibi değerleri atadığımızda menümüz artık son görünümünü almış oluyor.
#nav_menu_section li a:hover,#nav_menu_section li .current
{
color: #FFF;
border-bottom: 3px solid #FFF;
}
Hover etiketini kullanarak , mouse ile üzerine gelindiğine açılır menü nün alacağı görünümü düzenlemiş oluyoruz.Ben sadece 3 px lik beyaz bir alt kenar ekledim. {
color: #FFF;
border-bottom: 3px solid #FFF;
}
Yani mouse ile menu üzerine geldiğimiz de yazı'nın rengi değişsin istiyorsanızcolor değerini değiştirebilirsiniz.Veya Arka planı olsun isterseniz arka plan değeri verebilirsiniz.
Ana hatlarıyla açılır menu'nun ilk etabını tamamlamış olduk.Şimdi ise yatay menuye açılabilirlik özelliğini eklemek .
Css Kodlarımız 'ın devamı olarak Subnav adında bir sınıf ekleyeceğiz,kodların hemen hemen hepsini açıkladığımdan burada tekrar açıklama yapmayacağım bu nedenle kodları bir bütün halinde ekliyorum.
/* alt açılır menü için /*
#nav_menu_section li.subNav {
border: none;
background-color: #FE6602;
}
#nav_menu_section li.subNav ul {
display: none;
}
#nav_menu_section li.subNav:hover ul {
display: block;
border: none;
margin-left: 5px;
padding: 0;
}
#nav_menu_section li.subNav ul li {
height: auto;
padding: 13px 0px 2px 5px;
}
#nav_menu_section li.subNav:hover ul li a {
color: #fff;
padding: 0;
}
#nav_menu_section li.subNav ul li a:link, #nav li.subNav ul li a:active {
text-decoration: none;
color: #fff;
font-size: 13px;
text-transform:capitalize;
}
#nav_menu_section li.subNav ul li a:hover, #nav li.subNav ul li a:active {
text-decoration: none;
color: #FFF;
background: none;
}
alt açılır menüyü de ekledikten sonra Css ile olan işlerimiz bitmiş oluyor , ve yatay açılır menü yü esasen tamamlamış oluyoruz.Fakat sitemiz de görünür olması için de Html kullanmamız gerekiyor.#nav_menu_section li.subNav {
border: none;
background-color: #FE6602;
}
#nav_menu_section li.subNav ul {
display: none;
}
#nav_menu_section li.subNav:hover ul {
display: block;
border: none;
margin-left: 5px;
padding: 0;
}
#nav_menu_section li.subNav ul li {
height: auto;
padding: 13px 0px 2px 5px;
}
#nav_menu_section li.subNav:hover ul li a {
color: #fff;
padding: 0;
}
#nav_menu_section li.subNav ul li a:link, #nav li.subNav ul li a:active {
text-decoration: none;
color: #fff;
font-size: 13px;
text-transform:capitalize;
}
#nav_menu_section li.subNav ul li a:hover, #nav li.subNav ul li a:active {
text-decoration: none;
color: #FFF;
background: none;
}
Kısaca html kodlarını ekleyip açılır menü yü bitirelim.
Öncelikle Css kullanmadan oluşturacağınız menu bu şekilde görünecektir.Css 'i html ' e stil verip görünümünü zenginleştirmek için kullanıyoruz.Burayı kısaca acıklayacak olursak;
ANA SAYFA , MODA,KOZMETIK,ALIŞVERİŞ adın da 4 adet ana elemanımız var,bunlar css de "li" sınıfında stil verdiğimiz elemanlar.
Ana elemanlarımızın altında ise çeşitli alt liste elemanları var.Görüldüğü gibi bunlar "ul" sınıfında stil verdiğimiz elemanlar.
- ANA SAYFA
- MODA
- Trendler
- Defileler
- KOZMETIK
- Cilt Bakımı
- Makyaj
- Tavsiyeler
- ALIŞVERİŞ
- Çanta
- Ayakkabı
- Aksesuar
Css kodlarını yazarken nav_menu_panel ve nav_menu_section adında iki adet div id oluşturmustuk.
< body > </ body> etiketleri içine daha önce oluşturduğumuz div id leri ekleyeceğiz.
Ve bu div id ' ler içine de Html Kodlarını ekleyeceğiz .
<div id="nav_menu_panel">
<div id="nav_menu_section">
<div id="nav_menu_section">
div id leri html eklemiş olduk ve bu oluşturduğumuz id ler içine de menu linklerini ekleyeceğiz.
<ul>
<li><a href=#">ANA SAYFA</a></li>
<li><a href=#">ANA SAYFA</a></li>
Ana Sayfa linki için herhangi bir alt menu eklemediğimizden dolayı Subnav sınıfını eklemiyoruz.
<li class="subNav">
<a href="#">MODA</a>
<ul>
<li><a href="#">Trendler</a></li>
<li><a href="#">Defileler</a></li>
</ul>
</li>
<a href="#">MODA</a>
<ul>
<li><a href="#">Trendler</a></li>
<li><a href="#">Defileler</a></li>
</ul>
</li>
Moda , Kozmetik Ve Alışveriş Alanlarının açılır düzende olmasını istediğimiz için , bu menuler de
subNav sınıfını kullacağız.
<li class="subNav">
<a href="#">Kozmetik</a>
<ul>
<li><a href="#">Cilt Bakımı</a></li>
<li><a href="#">Makyaj</a></li>
<li><a href="#">Tavsiyeler</a></li>
</ul>
</li>
<a href="#">Kozmetik</a>
<ul>
<li><a href="#">Cilt Bakımı</a></li>
<li><a href="#">Makyaj</a></li>
<li><a href="#">Tavsiyeler</a></li>
</ul>
</li>
Oluşturmuş olduğunuz kategoriye göre bir veya birden fazla açılır ekleyebilirsiniz.Ana Sayfa daki statik görünümde olsun istediğiniz menu için Subnav sınfını kullanmanıza gerek yok.
<li class="subNav">
<a href="#">ALIŞVERİŞ</a>
<ul>
<li><a href="#">Çanta</a></li>
<li><a href="#">Ayakkabı</a></li>
<li><a href="#">Aksesuar</a></li>
</ul>
</li>
</ul>
</div>
</div>
<a href="#">ALIŞVERİŞ</a>
<ul>
<li><a href="#">Çanta</a></li>
<li><a href="#">Ayakkabı</a></li>
<li><a href="#">Aksesuar</a></li>
</ul>
</li>
</ul>
</div>
</div>
Yatay Açılır Menu yu bitirmiş olduk son olarak dikkat etmeniz gereken konu da , menu lere link vermek.
<a href="#">ALIŞVERİŞ</a> bura da gördüğünüz "#" işareti yerine Alışveriş yazısı üzerine tıklandığında ziyaretçinin gideceği sayfayı belirlemenizdir.
Bu da ; göndermiş olduğunuz yazılar ile ilgili kategori oluşturmanızdan geçer.
Örneğin bir yazınızı Alışveriş adı altında etiketlersiniz,ilgili yazıları bir kategoride toplamış olursunuz.Böylelikle ;
https://blogadesiniz.com/search/label/Alısveris şeklinde bir linkiniz olmuş olur.
<a href="https://blogadesiniz.com/search/label/Alısveris">ALIŞVERİŞ</a>
oluşturduğunuz menunun linklerini bu şekilde verebilirsiniz.
Blog için açılır menu işlemini bitirmiş oluyoruz.
Html kodlarını ve Css kodlarını bütünüyle paylaşmış oldum, fakat Css kodlar uzun olduğu için toplu bir şekilde bir kez daha paylaşıyorum.
Umarım işinize yarar.
/* Açılır Menu CSS kodları */
<style type="text/css">
#nav_menu_panel {
background:#FE6602;
height: 55px;
margin: 0 auto;
width: 100%;
}
#nav_menu_section {
width: 600px;
height: 55px;
margin: 0 auto;
padding: 0 0 0 10px;
position:absolute;
}
#nav_menu_section ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav_menu_section ul li {
float: left;
width: 150px;
text-transform: uppercase;
text-align: center;
padding-top:10px;
}
#nav_menu_section ul li a {
float: center;
width: 150px;
padding: 5px 0;
margin-right: 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
}
#nav_menu_section li a:hover,#nav_menu_section li .current
{
color: #black;
border-bottom: 3px solid #FFF;
}
<style type="text/css">
#nav_menu_panel {
background:#FE6602;
height: 55px;
margin: 0 auto;
width: 100%;
}
#nav_menu_section {
width: 600px;
height: 55px;
margin: 0 auto;
padding: 0 0 0 10px;
position:absolute;
}
#nav_menu_section ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav_menu_section ul li {
float: left;
width: 150px;
text-transform: uppercase;
text-align: center;
padding-top:10px;
}
#nav_menu_section ul li a {
float: center;
width: 150px;
padding: 5px 0;
margin-right: 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
}
#nav_menu_section li a:hover,#nav_menu_section li .current
{
color: #black;
border-bottom: 3px solid #FFF;
}
/* subNavs */
#nav_menu_section li.subNav {
border: none;
background-color: #FE6602;
}
#nav_menu_section li.subNav ul {
display: none;
}
#nav_menu_section li.subNav:hover ul {
display: block;
border: none;
margin-left: 5px;
padding: 0;
}
#nav_menu_section li.subNav ul li {
height: auto;
padding: 13px 0px 2px 5px;
}
#nav_menu_section li.subNav:hover ul li a {
color: #fff;
padding: 0;
}
#nav_menu_section li.subNav ul li a:link, #nav li.subNav ul li a:active {
text-decoration: none;
color: #fff;
font-size: 13px;
text-transform:capitalize;
}
#nav_menu_section li.subNav ul li a:hover, #nav li.subNav ul li a:active {
text-decoration: none;
color: #FFF;
background: none;
}
</style>
#nav_menu_section li.subNav {
border: none;
background-color: #FE6602;
}
#nav_menu_section li.subNav ul {
display: none;
}
#nav_menu_section li.subNav:hover ul {
display: block;
border: none;
margin-left: 5px;
padding: 0;
}
#nav_menu_section li.subNav ul li {
height: auto;
padding: 13px 0px 2px 5px;
}
#nav_menu_section li.subNav:hover ul li a {
color: #fff;
padding: 0;
}
#nav_menu_section li.subNav ul li a:link, #nav li.subNav ul li a:active {
text-decoration: none;
color: #fff;
font-size: 13px;
text-transform:capitalize;
}
#nav_menu_section li.subNav ul li a:hover, #nav li.subNav ul li a:active {
text-decoration: none;
color: #FFF;
background: none;
}
</style>
Hiç yorum yok:
Yorum Gönder
Not: Yalnızca bu blogun üyesi yorum gönderebilir.