Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
wmaraci reklam

Açılır menüye Transition veremiyorum.

 4 Mesajlar 839 Okunma
pst.net
wmaraci reklam

#1
FurkanKARAKAYA FurkanKARAKAYA WM Aracı Kullanıcı
  • Üyelik 23.01.2021
  • Yaş/Cinsiyet 27 / E
  • Meslek -
  • Konum Elazığ
  • Ad Soyad F** K**
  • Mesajlar 5
  • Beğeniler 3 / 0
  • Ticaret 0, (%0)
Amacım menü yapımında nereyi block, nereyi flex, inline... yapacağımı kavramak, denemeler yapmak. Burada nav ul li ul bölümüne transition vermek. Açılır menü bölümüne bir türlü geçiş süresi veremiyorum. Bu konuda yardımcı olursanız çok sevinirim.

İkinci bir konu ise bu CSS kodumu eleştirir misiniz? Gereksiz uzun yazdığım yerleri şunları ben olsam bir arada yazardım, şu kodu şurada yazarsan hata alma ihtimalin düşer dediğiniz yerler varsa çok sevinirim.

Herkese iyi çalışmalar, iyi geceler.











  • Referanslar

  • İletişim





    •

    [CSS]
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
    * {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
    list-style: none;
    text-decoration: none;
    color: #0f1123;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    }
    nav {
    width: auto;
    height: 50px;
    padding-top: 1px;
    background: rgba(25, 211, 218, .5);
    border-bottom: 1px solid #719fb0;
    }
    nav > ul {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;

    }
    nav ul li {
    margin-right: 4%;
    text-align: center;
    width: 150px;
    }
    nav ul li a:hover {
    background: rgba(100, 206, 203, 0.6);
    }
    .btn {
    background: rgba(100, 206, 203, 0.6);
    }
    nav ul li a {
    display: block;
    border-bottom: 1px solid #719fb0;
    font-weight:900;
    padding: 5px;
    }
    div {
    display: inline-block;
    background: rgba(25, 211, 218, .4);
    }
    div ul li a{
    margin-top: 15px;
    font-weight: 500;
    font-size: 1.02rem;
    }
    nav > ul > li > div > ul > li {
    display: none;
    }
    nav ul li:hover li{
    display: block;
    }
    [/CSS]
     

     

    wmaraci
    reklam

    #2
    FurkanKARAKAYA FurkanKARAKAYA WM Aracı Kullanıcı
    • Üyelik 23.01.2021
    • Yaş/Cinsiyet 27 / E
    • Meslek -
    • Konum Elazığ
    • Ad Soyad F** K**
    • Mesajlar 5
    • Beğeniler 3 / 0
    • Ticaret 0, (%0)
    Opacity ve Visible ile çözdüm.
     

     

    #3
    Happy Happy x Kullanıcı
    • Üyelik 15.01.2021
    • Yaş/Cinsiyet 19 / E
    • Meslek Öğrenci
    • Konum Ankara
    • Ad Soyad x** x**
    • Mesajlar 51
    • Beğeniler 12 / 7
    • Ticaret 1, (%100)
    Kodu eklememissin ki yada ben göremedim.
     

     

    #4
    FurkanKARAKAYA FurkanKARAKAYA WM Aracı Kullanıcı
    • Üyelik 23.01.2021
    • Yaş/Cinsiyet 27 / E
    • Meslek -
    • Konum Elazığ
    • Ad Soyad F** K**
    • Mesajlar 5
    • Beğeniler 3 / 0
    • Ticaret 0, (%0)
    Kodu eklemedim. Yani Atom'da denediğimde yazmıştım.

    Nav ul li ul {
    Display: none;
    }
    Nav ul li ul:hover li {
    Display:block;
    Animation-name: menu;
    Animation-duration: .2s;
    }
    @keyframe menu {
    0%{opacity:0;}
    100%{opacity:1;}
    }
    Şuan yanımda bilgisayar yok fakat bu trafikte birşey yazmıştım.
     

     

    wmaraci
    Mersin evden eve nakliyat
    çok acil lütfen html kod isteği
    psd to html css ücretli
    wmaraci
    Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
     
    Site Ayarları
    • Tema Seçeneği
    • Site Sesleri
    • Bildirimler
    • Özel Mesaj Al