Css ile açılır menü yapıyorum bir soru - Sayfa 2

26-02-2021, 01:00:07

#10

buddy

üzme canını üstad ben sonunda padding ile hallettim

konuya padding ile yap diyenlere olmaz diyordum oluyormuş

doctor_cmptr adlı üyeden alıntı: mesajı görüntüle

position: absolute; kuulandı iseniz bir dış dive position: relative ; vermeniz gerekir bence

maalesef olmuyor

top: 20px; den sonrasınında istediğiniz gerçekleşmiyo !!!

<li class="acilirmenu">Ürünler
<ul class="alt_menu">
<li class="altmenu">Alt Menü 1</li>
<li class="altmenu">Alt Menü 2</li>
<li class="altmenu">Alt Menü 3</li>
<li class="altmenu">Alt Menü 4</li>
</ul>
</li>

<style>
.acilirmenu {
position:relative;
}
.alt_menu {display:none}
.acilirmenu:hover .alt_menu {
display:block; position: absolute;
top: 20px;
width: 260px;}
.altmenu:hover {display:block;}
</style>

26-02-2021, 04:51:17

#11

cemaltekin

Divin boyutunu aradaki boşluğa da taşırmayı deneyin. Yada 700 800 ms kadar bir transition verin bu sayede mouse ana divden çıkıp açılır kısma gelene kadar 1 sn kadar vakit olacaktır.

26-02-2021, 11:08:03

#12

Hunper

Selamlar, top: veya margin-top: gibi özellikler kullanırsanız .acilirmenu'nun hover durumunu seçtiğiniz için mouse üzerinden kalktığında açılır menü de kapanacaktır doğal olarak. Bunu css ile padding kullanmadan yapamazsınız diye düşünüyorum. Zaten bu sorundan bahsetmişsiniz

Gelelim çözüme

Burada :hover durumunda açılacak olan etiketi ul yerine onu kapsayan bir div etiketine verdim. Bu div etiketine yalnızca yukarıdan alacağı boşluğu verdim. Dolayısıyla mouse artık hiçbir zaman menü üzerinden çıkmayacak. İçindeki ul etiketine de still kodlarını rahatlıkla verebilirim artık.

    /* reset */
    body {
        padding:30px;
        position:Relative;
    }
    /* reset */


.mainMenu {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
}
.mainMenu li {
    display:block;
    background:#333;
    color:#fff;
    position:relative;
    padding:10px;
}
.mainMenu li .mainMenuDropdown {
    display:none;
    position:absolute;
    width:200px;
    left:0;
    padding-top:50px; /* bu değeri değiştirerek aradaki mesafeyi artırabilirsiniz */
}
.mainMenu li .mainMenuDropdown .alt_menu {
    background:#333;
    margin:0;
    padding:0;
    list-style:none;
}
.mainMenu li .mainMenuDropdown .alt_menu li {
    display:block;
    padding:10px;
    margin:0;
}
.mainMenu li .mainMenuDropdown .alt_menu li:hover {
    background:#444;
}
.mainMenu li:hover .mainMenuDropdown {
    display:block;
}

<ul class="mainMenu">
    <li class="acilirmenu">Ürünler
        <div class="mainMenuDropdown">
            <ul class="alt_menu">
                <li class="altmenu">Alt Menü 1</li>
                <li class="altmenu">Alt Menü 2</li>
                <li class="altmenu">Alt Menü 3</li>
                <li class="altmenu">Alt Menü 4</li>
            </ul>
        </div>
    </li>
</ul>

26-02-2021, 14:01:58

#13

buddy

ben olayı daha pratik şekilde çözdüm

ana menü üzerinde açılabilir li etiketine padding bottom değeri verdim. böylece arada ne ladar boşluk istersem o kadar padding değeri verip aradaki boşlukta da menü açılır kalıyor.

Hunper adlı üyeden alıntı: mesajı görüntüle

Selamlar, top: veya margin-top: gibi özellikler kullanırsanız .acilirmenu'nun hover durumunu seçtiğiniz için mouse üzerinden kalktığında açılır menü de kapanacaktır doğal olarak. Bunu css ile padding kullanmadan yapamazsınız diye düşünüyorum. Zaten bu sorundan bahsetmişsiniz

Gelelim çözüme

Burada :hover durumunda açılacak olan etiketi ul yerine onu kapsayan bir div etiketine verdim. Bu div etiketine yalnızca yukarıdan alacağı boşluğu verdim. Dolayısıyla mouse artık hiçbir zaman menü üzerinden çıkmayacak. İçindeki ul etiketine de still kodlarını rahatlıkla verebilirim artık.

    /* reset */
    body {
        padding:30px;
        position:Relative;
    }
    /* reset */


.mainMenu {
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
}
.mainMenu li {
    display:block;
    background:#333;
    color:#fff;
    position:relative;
    padding:10px;
}
.mainMenu li .mainMenuDropdown {
    display:none;
    position:absolute;
    width:200px;
    left:0;
    padding-top:50px; /* bu değeri değiştirerek aradaki mesafeyi artırabilirsiniz */
}
.mainMenu li .mainMenuDropdown .alt_menu {
    background:#333;
    margin:0;
    padding:0;
    list-style:none;
}
.mainMenu li .mainMenuDropdown .alt_menu li {
    display:block;
    padding:10px;
    margin:0;
}
.mainMenu li .mainMenuDropdown .alt_menu li:hover {
    background:#444;
}
.mainMenu li:hover .mainMenuDropdown {
    display:block;
}

<ul class="mainMenu">
    <li class="acilirmenu">Ürünler
        <div class="mainMenuDropdown">
            <ul class="alt_menu">
                <li class="altmenu">Alt Menü 1</li>
                <li class="altmenu">Alt Menü 2</li>
                <li class="altmenu">Alt Menü 3</li>
                <li class="altmenu">Alt Menü 4</li>
            </ul>
        </div>
    </li>
</ul>