Forum'da ara:
Ara


Yazar Mesaj
Mesaj30.07.2012, 06:37 (UTC)    
Mesaj konusu: Bedava Sitem Menüsü Tarzında - CSS MENÜ

Bu menü Bedava-Sitem kullanıcı panelindeki menü örnek alınarak oluşturulmuştur.

Menü Ön İzleme (Resim) : http://img.webme.com/pic/f/frmbestlive/bs_menusu.jpg
Demo : http://frmbestlive.tr.gg/Bedava-Sitem-Menusu.htm

Bilmeyenler İçin Kısa Bir Anlatım ;

Menü ilk halinde "Tasarımlar" menüsü aktif. Eğer bunu değiştirmek isterseniz ..

Genel Menü <li> Kodu :
Kod:
<a href="#"><li>Ana Sayfa</li></a>
    <a href="#"><li>İletişim</li></a>
    <a href="#"><li>Hakkımda</li></a>
    <a href="#"><li>Ziyaret&ccedil;i Defteri</li></a>
    <a href="#"><li class="menu_aktif">Tasarımlar</li></a>
    <a href="#"><li>Men&uuml;ler</li></a>
    <a href="#"><li>Butonlar</li></a>
    <a href="#"><li>404 Hata Sayfaları</li></a>
    <a href="#"><li class="menu_bitis">Y&ouml;netici Girişleri</li></a>


Aktif Menü <li> Kodu :
Kod:
<a href="#"><li class="menu_aktif">Tasarımlar</li></a>


Aktif menüde de gördüğünüz üzere hangi menü seçeneğini aktif yapmak istiyorsanız class="menu_aktif" sınıfını ekliyoruz. Örneğin 3 tane menü seçeneğini aktif yapmak için ..

Kod:
<a href="#"><li>Ana Sayfa</li></a>
    <a href="#"><li>İletişim</li></a>
    <a href="#"><li class="menu_bitis">Hakkımda</li></a>
    <a href="#"><li>Ziyaret&ccedil;i Defteri</li></a>
    <a href="#"><li class="menu_aktif">Tasarımlar</li></a>
    <a href="#"><li class="menu_bitis">Men&uuml;ler</li></a>
    <a href="#"><li>Butonlar</li></a>
    <a href="#"><li>404 Hata Sayfaları</li></a>
    <a href="#"><li class="menu_bitis">Y&ouml;netici Girişleri</li></a>



class="menu_bitis" neyi gösteriyor ?
Bedava Sitem menüsüne benzemesi için tüm menü koduna üstten bir çizgi oluşturduk bu nedenle altta çizgi olmayacaktı ve son menü seçeneğinin altında çizgi olmayacaktı. Ben de bir sınıf oluşturarak o menü seçeneğinin altınada kenarlık ekledim ve tam bir uyum sağladım.

------------------------
MENÜNÜN GENEL KODLARI :
Kod:
<style type="text/css">
<!--
#bs_menu {
   background-color: #FFFFFF;
   height: auto;
   width: 210px;
   padding-top: 10px;
   padding-bottom: 5px;
   border: 1px solid #D6D6D6;
}
#haftanin_sitesi_bslk {
   height: auto;
   width: 180px;
   padding-right: 15px;
   padding-left: 15px;
   margin-bottom: 7px;
}
.haftanin_sitesi_baslik {
   color: #000000;
   font-weight: bold;
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
}
#site_adres {
   margin-bottom: 25px;
   padding-right: 15px;
   padding-left: 15px;
}
.site_adres {
   background-color:#fec400;
   font-size:12px;
   padding:3px 6px;
   color:#000000;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
}
.site_adres_bslk {font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000000;}
body {
   background-color: #FFFFFF;
}
#bs_menu ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
}
#bs_menu li:hover {
   background-color: #E4F2F2;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   text-decoration: none;
   text-decoration: none;
}
#bs_menu li {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
   text-decoration: none;
   padding-left: 25px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: #D6D6D6;
   text-decoration: none;
}
.menu_bitis {
   border-bottom-width: 1px;
   border-bottom-color: #D6D6D6;
   border-bottom-style: solid;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
}
a:hover {
   text-decoration: none;
}
a:active {
   
}
.menu_aktif {
    background-color: #E4F2F2;
}
#reklam {
   margin-top: 15px;
   margin-bottom: 15px;
}
-->
</style>
<div id="bs_menu">
  <div id="haftanin_sitesi_bslk"><span class="haftanin_sitesi_baslik">Haftanin Sitesi</span><br /></div>
  <div id="site_adres"><span class="site_adres_bslk">Adres:</span> <a class="site_adres" href="http://frmbestlive.tr.gg" target="_blank">frmbestlive.tr.gg</a></div>
  <ul>
    <a href="#"><li>Ana Sayfa</li></a>
    <a href="#"><li>İletişim</li></a>
    <a href="#"><li>Hakkımda</li></a>
    <a href="#"><li>Ziyaret&ccedil;i Defteri</li></a>
    <a href="#"><li class="menu_aktif">Tasarımlar</li></a>
    <a href="#"><li>Men&uuml;ler</li></a>
    <a href="#"><li>Butonlar</li></a>
    <a href="#"><li>404 Hata Sayfaları</li></a>
    <a href="#"><li class="menu_bitis">Y&ouml;netici Girişleri</li></a>
  </ul>
  <div id="reklam">
    <p><img src="http://img.webme.com/pic/f/frmbestlive/210x210.png" width="210" height="210" /></p>
  </div>
Bu alana istersen bir şey ekle .. İstemezsende kaldır. Kaldırmazsan benimle iletişime ge&ccedil; :)</div>


Bir Teşekkür Yeter
Mesaj30.07.2012, 06:48 (UTC)    
Mesaj konusu:

Pardon arkadaşlar bu kodu verirken hata yapmışım

<a href="#"><li>Ana Sayfa</li></a>
<a href="#"><li>İletişim</li></a>
<a href="#"><li class="menu_bitis">Hakkımda</li></a>
<a href="#"><li>Ziyaret&ccedil;i Defteri</li></a>
<a href="#"><li class="menu_aktif">Tasarımlar</li></a>
<a href="#"><li class="menu_bitis">Men&uuml;ler</li></a>
<a href="#"><li>Butonlar</li></a>
<a href="#"><li>404 Hata Sayfaları</li></a>
<a href="#"><li class="menu_bitis">Y&ouml;netici Girişleri</li></a>

Bu kodun gerçeği şu :

Kod:
<a href="#"><li>Ana Sayfa</li></a>
    <a href="#"><li>İletişim</li></a>
    <a href="#"><li class="menu_aktif">Hakkımda</li></a>
    <a href="#"><li>Ziyaret&ccedil;i Defteri</li></a>
    <a href="#"><li class="menu_aktif">Tasarımlar</li></a>
    <a href="#"><li class="menu_aktif">Men&uuml;ler</li></a>
    <a href="#"><li>Butonlar</li></a>
    <a href="#"><li>404 Hata Sayfaları</li></a>
    <a href="#"><li class="menu_bitis">Y&ouml;netici Girişleri</li></a>
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu