Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

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

 4 Mesajlar 1.037 Okunma
acebozum
tr.link

#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]
     

     

    elektronikssl
    webimgo

    #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 20 / 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
    wmaraci
    çok acil lütfen html kod isteği
    psd to html css ücretli
    wmaraci
    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