• Hangi Su Arıtma Cihazını Almalıyım ?
    Hangi Su Arıtma Cihazını Almalı ...
    Merhaba okurlarım.Bugün sizler için bir çok kişininde
  • Evinburda Kuşcağız Şube (Gökhan Yavrucuk) Sahtekarlık Yaptı ! Ali Ve Selim Ulutekin’den Uzak Durun !
    Evinburda Kuşcağız Şube (Gökha ...
    Merhaba arkadaşlar sizlerinde dikkatli olması amacıyla bu
  • Php-MySql Türkçe Karakter Sorunu Çözümü
    Php-MySql Türkçe Karakter Sorunu ...
    Merhaba okurlarım. Bugün sizler için Php-MySql Türkçe
  • Css İle Menü Yapmak

    Yazar: Khaaos

    Kategori: Webmaster

    Tarih:1 Nisan 2012

    Okunma:9.226 Kere

    7 Yorum

    Css İle Menü YapmakMerhaba okurlarım.İşim gereği bazen wordpress dışına çıkıp bazı kodlamalar ve düzenlemeler yapmak zorunda kalıyorum.Bugün yapmam gereken tasarım sonucu wordpress’in kategorileme kodlarını iptal ederek css ile menü yapmak zorunda kaldım.Yaptığım bu css kodlamasını da siz değerli wordpress uzmanı okurlarıma göstermek istedim.İlerde belki sizinde işine yarayacağını düşünerek css kodlarını paylaşmak istiyorum.

    İlk olarak aşağıda verdiğim kodları kendi temam üzerinde ki header.php açarak </head> kodu altına yerleştirdim.Bu verdiğim kodlar menümüzün linklerini yerleştirmek oluyor.Siz bu kodları kendinize göre ayarlarsınız.Kategoriyi nerede göstermek isterseniz oraya atarsınız.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Deneme</title>
    <link rel="stylesheet" href="menu.css" media="all" type="text/css">
    </head><body>
    <div id="khaaos">
        <ul>
            <li><a class="khaaos-anasayfa" href="index.html"></a></li>
            <li><a class="khaaos-icerik" href="index.html"></a></li>
            <li><a class="khaaos-kullanim" href="index.html"></a></li>
            <li><a class="khaaos-tanitim" href="index.html"></a></li>
            <li><a class="khaaos-siparis" href="index.html"></a></li>
    </ul></div>
    
    
    
    </body></html>
    

    Sizler href kodundan sonra gelen index.html yazan bölüme linke tıklandığı zaman nereye gitmesini istiyorsanız oranın linkini verebilirsiniz.
    Daha sonra Style.css dosyasını acarak css olarak düzenlemiş aşağıda ki kodları Style.css dosyanızın içine atmanız gerekiyor.

    #khaaos{
    	width:604px; height:64px;
    	margin-left:auto;
    	margin-right:auto;
    }
    #khaaos ul{
    	margin:0px;
    	padding:0px;
    	list-style-type:none;
    }
    #khaaos ul li{
    	float:left;
    }
    #khaaos ul li a{
    	display:block;
    	height:32px;
    }
    
    /*Ust*/
    .khaaos-anasayfa{
    	width:121px;
    	background-image:url(menu.png);
    	background-position:0px 0px;
    }
    .khaaos-icerik{
    	width:81px;
    	background-image:url(menu.png);
    	background-position:-121px 0px;
    }
    .khaaos-kullanim{
    	width:105px;
    	background-image:url(menu.png);
    	background-position:-202px 0px;
    }
    .khaaos-tanitim{
    	width:172px;
    	background-image:url(menu.png);
    	background-position:-307px 0px;
    }
    .khaaos-siparis{
    	width:125px;
    	background-image:url(menu.png);
    	background-position:-479px 0px;
    }
    
    /*alt*/
    .khaaos-anasayfa:hover{
    	background-position:0px -32px;
    }
    .khaaos-icerik:hover{
    	background-position:-121px -32px;
    }
    .khaaos-kullanim:hover{
    	background-position:-202px -32px;
    }
    .khaaos-tanitim:hover{
    	background-position:-307px -32px;
    }
    .khaaos-siparis:hover{
    	background-position:-479px -32px;
    }
    

    Yukarıda verilen kodlar arasında ki menu.png resminin bulunduğu yeri kendinize göre değiştirmeniz gerekir.Ben anadizine direk menü resmini atarak bu şekilde yaptım.Siz menü.png dosyasını nereye atıyorsanız oranın linkini verin.

    Detaylı olarak videolu olarak anlatmak isterdim ama inanın ki hiç boş zamanım yok.Soru ve sorunlarınızı konu altına yorum yaparak sorarsanız elimden geldiğince yardımcı olmaya çalışacağım.

    Örnek tasarımı önizlemek için tıklayınız.

    Menü resmini almak isterseniz tıklayınız.

    VN:F [1.9.22_1171]
    Rating: 6.3/10 (3 votes cast)
    VN:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    Css İle Menü Yapmak, 6.3 out of 10 based on 3 ratings
    Facebook'ta Paylaş
    Twitter'ta Paylaş

    Bu Yazıyı Paylaşmak İstermisin ?

    Paylaş!

    Yazar Hakkında

    25.09.1985 Çorum/Sungurlu İlçesi Doğumluyum.Genç Yaşlarda Webmasterlığa Asp ile Başlamış Olup PHP Nimetlerini Görünce Yazılım Macerasına PHP İle Yola Devam Etmeye Karar Verdim.Niğde Üniversitesi Turizm ve Otelcilik Mezunu Olup İş Hayatımı Bodrumda Sürdürmekteyken Ankara'ya Hızlı Bir Geçiş Yapmak Zorunda Kaldım.Şimdi İse Wordpress Üzerine Çalışmalar Yapmaktayım...

    “Css İle Menü Yapmak” için 7 Yorum

    1. hakan diyor ki:

      hocam bende 850px 340px 5 li buton yaptım footer üstünde görünmesi için herşey tamamda tek sorun butonlar görünmüyor mause ile üzerine gelince tıklanabilir oluyor tıklayınca gidilecek yerede gidiyor ama sayfa beyaz yani görünürde bişey yok acaba hatayı nerde yaptım çözemedim yardımcı olurmusunuz acaba birde hala bekliyorum tekli yorum sayfası yapmayı anlatacaktınız kolay gelsin teşekkürler

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    2. hakan diyor ki:

      hocam ben hala çözemedim buraya verdiğiniz kodları kendime göre düzenlediğim şekline bakıp bana hatayı söyleyebilirmisiniz butonları bi türlü görünür yapamadım 5 butonlu yapmak istedim her buton 170×170 kare ebatında toplam width:850 height:340 yardımcı olursanız sevinirim

      #khaaos{
      width:850px; height:340px;
      margin-left:auto;
      margin-right:auto;
      }
      #khaaos ul{
      margin:0px;
      padding:0px;
      list-style-type:none;
      }
      #khaaos ul li{
      float:left;
      }
      #khaaos ul li a{
      display:block;
      height:170px;
      }

      /*Ust*/
      .khaaos-anasayfa{
      width:170px;
      background-image:url(menu.png);
      background-position:0px 0px;
      }
      .khaaos-icerik{
      width:170px;
      background-image:url(menu.png);
      background-position:-170px 0px;
      }
      .khaaos-kullanim{
      width:170px;
      background-image:url(menu.png);
      background-position:-340px 0px;
      }
      .khaaos-tanitim{
      width:170px;
      background-image:url(menu.png);
      background-position:-510px 0px;
      }
      .khaaos-siparis{
      width:170px;
      background-image:url(menu.png);
      background-position:-680px 0px;
      }

      /*alt*/
      .khaaos-anasayfa:hover{
      background-position:0px -170px;
      }
      .khaaos-icerik:hover{
      background-position:-170px -170px;
      }
      .khaaos-kullanim:hover{
      background-position:-340px -170px;
      }
      .khaaos-tanitim:hover{
      background-position:-510px -170px;
      }
      .khaaos-siparis:hover{
      background-position:-680px -170px;
      }

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    3. Khaaos diyor ki:

      Merhaba Hakan.Biraz Araştırma Yaptım Benim Zamanım Olmadığı İçin Sana Videolu Olarak Bir Anlatım Buldum.Burada Arkadaşımız Detaylı Olarak Anlatmış Dikkatli İzlersen Olayı Çözebilirsim

      Buyrun:
      http://ugurdalkiran.com/css-sprite-teknigini-kullanarak-bir-menu-yapalim.html

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    4. hakan diyor ki:

      hocam çok saolun 3 gündür ufacık bi hata yüzünden uğraştığıma inanamıyorum hatada şu imiş (menü.png) burda resmin uzantısını yazmamışım .png yani 3 gündür hiçde tikkatimi çekmedi ya:)) ilginiz ve alakanız için çok teşekkür ederim sıkı takipçinizim birde bu tek sayfa yorum sayfası yapmayı gösterirseniz süper olacak iyi çalışmalar kolay gelsin:)

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    5. Khaaos diyor ki:

      Merhaba Hakan.Müsait olduğumda anlatacağım konular arasında ama dediğim gibi yoğunluğum var biraz.Yoğunluğumu attıktan sonra ilgileneceğim.Takip ettiğiniz içinde teşekkür ederim.

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    6. eski sohbet diyor ki:

      hocam bunu her yere ekleyebiliyormuyuz

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
    7. Sedat diyor ki:

      Teşekkürler çok işime yaradı .

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      VA:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

    Yorum Yapın