Bootstrap dropdown menüdeki boşluk problemi

19-10-2019, 11:28:12

Herkese selam,

Özellikle menüde kullanılan açılır öğelere hover özelliğini ekledikten sonra, tasarıma göre menü ve dropdown arasında bir boşluk varsa menü o alanda kapanıyor, pseudo elementler ile yakalayıp transparan boşluk falan tanımlayayım dedim ancak o şekilde de olmadı.

Aşağı tarafta örneğini paylaşmış olduğum "Boşluklu" menüde, boşluk alana hover yapılmasına rağmen menünün kapanmaması için ne yapılabilir? Şimdiden teşekkürler. 🤘

https://jsfiddle.net/meowos/9sbxj3o0/

19-10-2019, 11:30:31

#2

delikanli53

site linkini özelden atar mısınız bakayım.

19-10-2019, 11:39:43

#3

triposi

@delikanli53; Şu anda lokalde çalışıyorum ancak verdiğim demo üzerinden yardımcı olabilirseniz gerisini ben hallederim, gözden kaçmış olma ihtimaline karşı:

https://jsfiddle.net/meowos/9sbxj3o0/

Teşekkürler.

19-10-2019, 11:58:43

#4

winkwop

#header .navbar-nav>li>.dropdown-menu {
margin-top: 25px !important;
}

Attığınız linkte böyle bir kod var bunu kaldırınca boşluk problemi ben de kalktı ? Bir deneyin bakalım olacak mı hocam.

19-10-2019, 12:40:29

#5

Onur89TR

Dostum buna yapılacak en güzel şey ul'e 25px yüksekliğinde transparent border-top vermek. Tabii o zaman da ya li kısımlarına ayrı ayrı border vereceksiniz, ya da borderi ul'den sileceksiniz.

19-10-2019, 13:15:01

#6

triposi

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

#header .navbar-nav>li>.dropdown-menu {
margin-top: 25px !important;
}

Attığınız linkte böyle bir kod var bunu kaldırınca boşluk problemi ben de kalktı ? Bir deneyin bakalım olacak mı hocam.

Onu derdimi anlatabilmek adına ekledim. O veya başka bir şekilde boşluk varken menüyle dropdown arasına mouse geldiğinde kapanmaması gerekiyor.

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

Dostum buna yapılacak en güzel şey ul'e 25px yüksekliğinde transparent border-top vermek. Tabii o zaman da ya li kısımlarına ayrı ayrı border vereceksiniz, ya da borderi ul'den sileceksiniz.

Öncelikli olarak onu denemiştim, before/after da çözüm olmadı. Border-top ile de manasız bir boşluk oluyor. (https://i.hizliresim.com/Rg4o3a.jpg)

Şu haliyle en mantıklısı o ul'ye ait stilleri sıfırladıktan sonra içine tekrar ul>li diye devam edip, tüm renkleri ve stilleri içerideki ul/li'lere eklersem border-top yada padding ile de çözerim sanırım, teşekkür ettim.

19-10-2019, 13:30:17

#7

Onur89TR

#header .navbar-nav>li>.dropdown-menu {
border: none;
border-top: 25px solid transparent;
box-shadow: none;
}
.dropdown-menu li, .dropdown-menu li.divider {
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.dropdown-menu a {
width: calc(100% - 2px);
margin-left: 1px;
}
.dropdown-menu li.divider {
margin: 0;
padding: 9px 0;
background-color: #fff;
position: relative;
}
.dropdown-menu li.divider:after {
position: absolute;
left: 0;
right: 0;
top: 8px;
border-top: 1px solid #cccccc;
content: "";
}
.dropdown-menu li:nth-child(1) {
border-top: 1px solid #cccccc;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.dropdown-menu li:nth-child(1) a {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.dropdown-menu li:nth-last-child(1) {
border-bottom: 1px solid #cccccc;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropdown-menu li:nth-last-child(1) a {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

Çözüm bu anlatmaya çalıştığım yani.