SEOTurk Forum Üye Girişi Kayıt Ol
Giriş


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Exclamation Css ile Slider Yapımı Heonir 0 27 04-29-2019, 05:17 PM
Son Yorum: Heonir
Exclamation Css ile Metin Kutusu Yapımı Heonir 0 22 04-29-2019, 04:09 PM
Son Yorum: Heonir
Exclamation CSS ile Yatay Hizalama Değerleri Heonir 0 30 04-29-2019, 03:57 PM
Son Yorum: Heonir

Css ile Yatay Menü Yapımı Google
Bilge Üye
*****

Mesaj Sayısı: 11
Rep Puanı: 7

Özel Mesaj Gönder E-Posta Gönder
#1
Css ve birazda html kullanarak yatay bir menü tasarımı nasıl yapılır onu göstereceğim;

HTML kısım;
PHP Kod: (Hepsini seç)
<ul>
    <li class="active">
        <a href="#">Anasayfa</a>
    </li>
    <li>
        <a href="#">Hakkımda</a>
    </li>
    <li>
        <a href="#">İletişim</a>
    </li>
    <li class="menu-right">
        <a href="#">Kayıt Ol</a>
    </li>
    <li class="menu-right">
        <a href="#">Giriş</a>
    </li>
</
ul

Yukarıda ki kodlarda  bir  menü oluşturduk.Şimdi bunun css kısmı ile yatay ve daha güzel bir tasarıma çevirme zamanı;
 
PHP Kod: (Hepsini seç)
ul {
    padding0;
    margin0;
    list-style-typenone;
    background-color#4fb99f;
    overflow:auto;
}
 
ul li 
{
    float:left;
    border-bottom:3px solid #4fb99f;
}
 
ul li
.menu-right{
    float:right;
}
 
ul li a 
{
    displayinline-block;
    padding12px 24px;
    text-decorationnone;
    color#fff;
    font-size18px;
}
 
ul li
.active {
    background-color#068587;
    border-bottom:3px solid #f2b134;
}
 
ul li
:hover:not(.active) {
    background-color#068587;
    border-bottom:3px solid #f2b134;


İşte bu kadar.
[Resim: bed99228-6860-41ac-b006-3e57e03e3ac4.png]


Ek Dosyalar Ekran Görüntüleri
   
04-30-2019, 09:36 AM
Cevapla


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Exclamation Css ile Slider Yapımı Heonir 0 27 04-29-2019, 05:17 PM
Son Yorum: Heonir
Exclamation Css ile Metin Kutusu Yapımı Heonir 0 22 04-29-2019, 04:09 PM
Son Yorum: Heonir
Exclamation CSS ile Yatay Hizalama Değerleri Heonir 0 30 04-29-2019, 03:57 PM
Son Yorum: Heonir

« Önceki Konu | Sonraki Konu »

Lütfen Giriş Yapın & Kayıt Olun.
Bize Destek Olmak İçin Lütfen Hemen Giriş Yapın & Kayıt Olun
Hemen Kayıt Ol
Sitemize Çok Kolay Bir Şekilde Kayıt Olabilirsiniz. Kayıt olarak birçok içeriğe ücretsiz erişebilirsiniz !
&
Giriş yap
Zaten Bir Hesabınız Var Mı? Giriş yap.


Anahtar Kelimeler

Css ile Yatay Menü Yapımı, Css ile Yatay Menü Yapımı nedir, Css ile Yatay Menü Yapımı nasıl yapılır, Css ile Yatay Menü Yapımı seo, Css ile Yatay Menü Yapımı indir, Css ile Yatay Menü Yapımı hakkında bilgi, Css ile Yatay Menü Yapımı yardım, Css ile Yatay Menü Yapımı hatası, Css ile Yatay Menü Yapımı blog, Css ile Yatay Menü Yapımı ne işe yarar, Css ile Yatay Menü Yapımı ne işe yarar


Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi