HTML Seçimi Bırak Aşağı Seçeneği Z-endeksi

Question

Menü gezinme öğesinde bir seçenek belirlediğimde basit bir açılır menüyü seçiyorum, böylece menü öğelerinde gezinmek üzere geziniyorum seçeneği seçmeye geri dönüyor açık olan liste. Tüm tarayıcılarda oluyor. Bir böcek mi, ne olduğunu bilmiyorum. Adımlar şunlardır:

• Aç açılan seçeneklerini navigasyon öğeleri

ben (değil seçme etiketi arkasında) seçenek listesinin arkasında gidiyoruz Şimdi

navigasyon menüsü öğeleri

Aynı zamanda vurgulu pozisyonları ile z-endeksi vermeye çalıştım. Ama hiçbir şey işe yaramıyor. Bence bunun bir sorun değil, aynı zamanda açıklamaya da ihtiyacı var. Herhangi bir öneri büyük takdir edilecektir.

Bu

örnek kod:

<style type="text/css"> 
/* #################### Navigation bar CSS styling ################## */ 

.mynavbar { 
    position: relative; 
    width: 100%; 
    height: 23px; /* corresponds to 'line-height' of a.navbartitle below */ 
    margin: 0; border: 0; padding: 0; 
    background-color: #666633; 
} 


a.navbartitle { 
    display: block; 
    float: left; 
    color: white; 
    background-color: #666633; 
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    margin: 0; border: 0; padding: 0; 
    line-height: 23px; /* corresponds to 'top' value of .submenu below */ 
    text-align: center; 
    text-decoration:none; 
} 
a.navbartitle:hover { 
    background-color: #447755; 
} 
/* menu title widths */ 
#t1 { width: 104px; } 
#t2 { width: 100px; } 
#t3 { width: 102px; } 
#t4 { width: 102px; } 
#t5 { width: 180px; } 
/* We just specify a fixed width for each menu title. Then, down below we specify 
    a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.) 
    Using these fixed values isn't as elegant as just letting the text of each 
    menu title determine the width of the menu titles and position of the submenus, 
    but we found this hardwired approach resulted in fewer cross-browser/cross-OS 
    formatting glitches -- and it's pretty easy to adjust these title widths and the 
    corresponding submenu 'left' positions below, just by eyeballing them whenever 
    we need to change the navbar menu titles (which isn't often). */ 

.submenu { 
    position:absolute; 
    z-index: 2; 
    top: 23px; /* corresponds to line-height of a.navbartitle above */ 
    padding: 0; margin: 0; 
    width:166px; /* If adjust this, then adjust width of .submenu below a too */ 
    color: white; 
    background-color: #666633; 
    border: 1px solid #447755; /* box around entire sub-menu */ 
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; 
    font-size: 11px; 
} 
/* Fix IE formatting quirks. */ 
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */ 
/* End */ 

/* position of each sub menu */ 
/* We just eyeball the position of each submenu here -- can move left or right as needed. 
    If you adjust menu title text, you might want to adjust these too. */ 
#products_submenu { left: 0px; visibility: hidden; } 
#services_submenu { left: 104px; visibility: hidden; } 
#funstuff_submenu { left: 204px; visibility: hidden; } 
#aboutus_submenu { left: 306px; visibility: hidden; } 
#contact_submenu { left: 408px; visibility: hidden; } 
/* Note, each submenu is hidden when the page loads - then made visible when 
    the mouse goes over the menu title. Using the 'visibility' property instead 
    of using the 'display' property avoided a bug in some versions of Safari. 
    (The bug is pretty where esoteric: The browser ignored the 'hover' property 
    on 'li' objects inside an object whose display property was set to 'none' 
    when the page loaded...) Using the 'visibility' property instead of 'display' 
    would normaly take up extra room on the page, but that's avoided here by putting 
    the submenu on a second layer: see 'position: absolute' and 'z-index: 2' 
    in .submenu definition, higher up this page. */ 

.submenu a 
{ 
    display: block; 
    color: #eee; 
    background-color: #666633; 
    width: 146px; /* This should be width of .submenu above minus right-side padding on next line */ 
    padding: 5px 0px 4px 20px; 
    text-decoration: none; 
    background-color: #666633; 
    border-bottom: #447755 dotted 1px; 
    border-top: 0; border-left: 0; border-right: 0; 
} 


ul { position: relative; display: block; } 
li { position: relative; display: block; } 

.submenubox { 
    margin: 0; padding: 0; border: 0; 
} 
.submenubox ul 
{ 
    margin: 0; padding: 0; border: 0; 
    list-style-type: none; 
} 

.submenubox ul li { 
    margin: 0; padding: 0; border: 0; 
} 

.submenubox ul li a:link { } 
.submenubox ul li a:visited { } 
.submenubox ul li a:hover 
{ 
    color: #c6e8e2; /* text color for submenu items */ 
    background-color: #447755; 
    border-bottom: #447755 dotted 1px; 
} 


</style> 
<script type="text/javascript"> 
// JavaScript functions to show and hide drop-down menus. 
// In SimpleNavBar.html we call ShowMenuDiv each time the mouse goes over 
// either the menu title or the submenu itself, and call HideMenuDiv when the 
// mouse goes out of the menu title or the submenu iteslf (onMouseOut). 

function ShowItem (itemID) { 
    var x = document.getElementById(itemID); 
    if (x) 
    x.style.visibility = "visible"; 
    return true; 
} 

function HideItem (itemID) { 
    var x = document.getElementById(itemID); 
    if (x) 
    x.style.visibility = "hidden"; 
    return true; 
} 

// As noted in the SimpleNavBarStyles.css file, using x.style.visibility as 
// seen below seemed to have better cross browser support than using 
// x.style.display="block" and x.style.display="none" to show and hide 
// the menu. 
</script> 
<div class="mynavbar"> 

<a onmouseover="ShowItem('products_submenu');" onmouseout="HideItem('products_submenu');" href="placeholder.html" id="t1" class="navbartitle">Products</a><a onmouseover="ShowItem('services_submenu');" onmouseout="HideItem('services_submenu');" href="placeholder.html" id="t2" class="navbartitle">Services</a><a onmouseover="ShowItem('funstuff_submenu');" onmouseout="HideItem('funstuff_submenu');" href="placeholder.html" id="t3" class="navbartitle">Fun Stuff</a><a onmouseover="ShowItem('aboutus_submenu');" onmouseout="HideItem('aboutus_submenu');" href="placeholder.html" id="t4" class="navbartitle">About Us</a><a onmouseover="ShowItem('contact_submenu', 't5');" onmouseout="HideItem('contact_submenu');" href="placeholder.html" id="t5" class="navbartitle">Contacts &amp; Directions</a> 


<!-- REPLACE each "placeholder.html" URL below with the specific page you want 
     the user to go to when the given submenu item is clicked. --> 

<!-- Products sub-menu, shown as needed --> 
<div onmouseout="HideItem('products_submenu');" onmouseover="ShowItem('products_submenu');" id="products_submenu" class="submenu" style="visibility: hidden;"> 
    <div class="submenubox"> 
    <ul> 
     <li><a class="submenlink" href="placeholder.html">Flying Cars</a></li> 
     <li><a class="submenlink" href="placeholder.html">Super Squirters</a></li> 
     <li><a class="submenlink" href="placeholder.html">Sling Shots</a></li> 
     <li><a class="submenlink" href="placeholder.html">Bamboozlers</a></li> 
     <li><a class="submenlink" href="placeholder.html">Kazoos</a></li> 
    </ul> 
    </div> 

</div> 

<!-- Services sub-menu, shown as needed --> 
<div onmouseout="HideItem('services_submenu');" onmouseover="ShowItem('services_submenu');" id="services_submenu" class="submenu"> 
    <div class="submenubox"> 
    <ul> 
     <li><a class="submenlink" href="placeholder.html">Toy Design</a></li> 
     <li><a class="submenlink" href="placeholder.html">Market Research</a></li> 
     <li><a class="submenlink" href="placeholder.html">IP Consulting</a></li> 
     <li><a class="submenlink" href="placeholder.html">Licensing</a></li> 
    </ul></div> 
</div> 

<!-- Fun Stuff sub-menu, shown as needed --> 
<div onmouseout="HideItem('funstuff_submenu');" onmouseover="ShowItem('funstuff_submenu');" id="funstuff_submenu" class="submenu" style="visibility: hidden;"> 
    <div class="submenubox"> 
    <ul> 
     <li><a class="submenlink" href="placeholder.html">Toys We Designed</a></li> 
     <li><a class="submenlink" href="placeholder.html">Press Ravings</a></li> 
     <li><a class="submenlink" href="placeholder.html">Our Blog</a></li> 
    </ul> 
    </div> 
</div> 

<!-- About Us sub-menu, shown as needed --> 
<div onmouseout="HideItem('aboutus_submenu');" onmouseover="ShowItem('aboutus_submenu');" id="aboutus_submenu" class="submenu" style="visibility: hidden;"> 
    <div class="submenubox"> 
    <ul> 
     <li><a class="submenlink" href="placeholder.html">Team</a></li> 
     <li><a class="submenlink" href="placeholder.html">Investors</a></li> 
     <li><a class="submenlink" href="placeholder.html">Partners</a></li> 
     <li><a class="submenlink" href="placeholder.html">Careers</a></li> 
     <li><a class="submenlink" href="placeholder.html">Our Blog</a></li> 
    </ul> 
    </div> 
</div> 

<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed --> 
<div onmouseout="HideItem('contact_submenu');" onmouseover="ShowItem('contact_submenu');" id="contact_submenu" class="submenu" style="visibility: hidden;"> 
    <div class="submenubox"> 
    <ul> 
     <li><a class="submenlink" href="placeholder.html">Contact</a></li> 
     <li><a class="submenlink" href="placeholder.html">Getting Here</a></li> 
    </ul> 
    </div> 
</div><!-- end of sub-meus --> 

</div> 

<div><select style="margin-left: 200px; position: relative; z-index: 0;"> 
       <option value=""></option> 
       <option value="28">Test</option> 
       <option value="Eff2">Test</option> 
       <option value="Effort1">Test</option> 
       <option value="FC">Test</option> 
       <option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option><option value="Effort1">Test</option> 

      </select> 
      </div> 

Answer 1

dibe görünmesi için -1 olarak sizin Z endeksini ayarlayın. Yani seçme elemanı üzerinde ben IE8'de bu çalıştı negatif 1.

<select style="margin-left: 200px; position: relative; z-index: -1;"> 

1. Değişim o z endeksini tanımlayan bir satır içi stili var ve işe yaradı. Seç açılır menüsü menü seçeneklerinin arkasındaydı.

Answer 2

<select> öğesi, HTML5'te bir interactive content öğesi ve HTML4.01'de bir menu öğedir. Bu nedenle, kullanıcı girdisini gerektiren ve bir sağ tıklatma bağlam menüsü gibi davranan ve etkinse tüm belge öğelerinin üzerinde oluşturulmuş bir nesnedir. Kendiniz için deneyin - içerikmeninizi açın ve navigasyonun üzerine gelin.

Bu hata örneğin video gibi diğer interaktif içerik öğelerin davranışı bağlanır (ayrıca HTML5 rendering bakınız).

Böyle bir davranışı önlemenin tek yolu, bir etkin öğenin ekran özelliğini none ile etkileşimli bir öğenin üzerine getirmektir. visibility:hidden;, seçenekler hala görüntülendiğinden ve seçenekler üzerinde display:none; kullanılarak oluşturulmasına yardımcı olmayacaktır. tekniğin

Here is a small demonstration yukarıda anlatılan: çok kolaydır aynı sorun var olanlar için

.mynavbar:hover ~ * .selecthack > select:focus 
.mynavbar:hover ~ .selecthack > select:focus{ 
    display:none;  
} 

Answer 3

, senin kodun Menü altında aşağıdaki kodu ekleyin, bunların hepsi navigasyon için çalıştı.

<input id="HideMenusTxt" name="HideMenusTxt" type="text" value="0" style="width:0;height:0;position:absolute;z-index:-1"/> 

<script type="text/javascript"> 
//menuId= The Id of the div menu 
$('#menuId').on('mouseenter', function() { 
    //in case we have opened select dropdown options, on mouseenter of the menu we set focus to "HideMenusTxt". 
    $('#HideMenusTxt').focus(); 
}); 

Answer 4

Diğer çözüm, şeklinde bir seçme olup olmadığını kontrol ve gizli bir alan oluşturmak yerine formunda birinci elemana odaklanır. en azından Chrome'da, o kadar Firefox'ta - display: none kullanma

 $('#menuId').mouseover(function() { 
      //in case we have opened select dropdown options, on mouseover of the menu we set focus to the first element in the form. 
      var firstSelectElement = $('form:first select:first'); 
      if (firstSelectElement.length > 0) { 
       $('form:first *:input[type!=hidden]:first').focus(); 
      } 

     }); 

Answer 5

sahip olduğu takdirde, odak var kaybetmek açılan neden olur. Açılırken <select> yerine bazı içerik görüntülenecekse, bu sorun yaratabilir (bazı özel HTML'lere göre seçenekleri değiştirin).

position: relative; z-index: -1'u kullanmak da sorunlara neden olabilir: <select> varsayılan katmanın arkasında kaldığından, açılır menüyü tıklatmanız imkansız hale gelebilir. Ayrıca, "odaklama" olayı, seçenekler oluşturulduktan sonra tetiklenebilir, bu nedenle z-endeksinin JavaScript ile değiştirilmesi amaçlandığı gibi çalışmayabilir.

ben "odak" konulu görüş alanı dışında açılan kayması ve "bulanıklık" konulu geri kaydırmaya çözüm geldi:

position: relative; left: -9999px; 

display: none ile karşılaştırıldığında, bu çözüm de dışında korunmuştur düzeni (tutar

açılır menü, ana blok öğesinin yüksekliğini tanımlayabileceğinden, açılır liste kaybolur.

Answer 6

Zeta'nın dediği gibi, seçim kutusu interaktif bir öğedir, HTML/CSS kullanarak herhangi bir şey görüntüleyemezsiniz, böylece tek seçenek menünüzü gösterirken gizlemektir, ya da sadece blurfocus ed seçer sayfada. diğer okuyucular için

 
    ... 
    function ShowItem (itemID) { 

     //jQuery version 
     $('select:focus').blur(); 

     //OR non-jQuery: 
     document.activeElement.blur(); 
     //note this will blur any focused element, so you might want to check 
     //if document.activeElement.tagName == 'SELECT' first, or other conditions 

     var x = document.getElementById(itemID); 
    ... 

... ya da daha genel olarak (değil:

Gerçi herhangi bir ek css sınıfları eklemek istemiyorsanız, size blur() ya da ShowItem fonksiyonunun başlangıcında sadece could özel durumunuzu) alt menüler görünümünü tetikleyen menü öğelerinde hover veya mouseenter olay geri bildirimi.

Answer 7

onun çok basit

$('IdOfMenu').on('mouseenter', function() { 
$("IdOfDropDown").blur(); 
});