Sélectionnez HTML Déroulant de l'Option Z-index
J'ai un select simple liste déroulante quand je vais pour sélectionner une option de Menu élément de navigation, de sorte que maintenant, quand je vais passez la souris sur les éléments du menu de navigation est de revenir à l'option de sélection de la liste qui est ouvert. Cela se passe dans tous les navigateurs. Je ne sais pas si c'est un bug ou quoi. Les étapes sont les suivantes:
- Ouvert, sélectionnez options du menu déroulant
- Même temps, placez le curseur sur le menu de navigation des articles
- Maintenant les éléments de navigation sont derrière la liste d'options (pas derrière la balise select)
J'ai essayé de donner le z-index avec des positions. Mais rien ne fonctionne. Je pense que c'est pas un problème, mais ont besoin d'explication sur même. Toutes les suggestions seront grandement appréciés.
C'est l'exemple de code:
<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 & 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>
Veuillez pousser votre code meilleure compréhension
Je ne pense pas que vous aurez tous les éléments de pages pour cacher sélectionnez le menu déroulant.
Ne pas décrire, ce que vous avez essayé. SHOW nous, ce que vous avez essayé. I. e. nous montrer un lien. Post code jsfiddle ou
J'ai modifier la question.Maintenant, le scénario est d'essayer de sélectionner toute option et en même temps, passez la souris sur les éléments du menu.
Avez-vous des suggestions?
Je ne pense pas que vous aurez tous les éléments de pages pour cacher sélectionnez le menu déroulant.
Ne pas décrire, ce que vous avez essayé. SHOW nous, ce que vous avez essayé. I. e. nous montrer un lien. Post code jsfiddle ou
J'ai modifier la question.Maintenant, le scénario est d'essayer de sélectionner toute option et en même temps, passez la souris sur les éléments du menu.
Avez-vous des suggestions?
OriginalL'auteur Gurvinder | 2012-02-09
Vous devez vous connecter pour publier un commentaire.
La
<select>
élément est un contenu interactif élément HTML5 et un menu en HTML4.01. Comme telle, elle est un objet qui nécessite la saisie de l'utilisateur et se comporte comme un droit pour ouvrir le menu contextuel et est rendu au-dessus de tous les éléments d'un document s'il est actif. Essayez-le pour vous - ouvrez votre contextmenu et passez la souris sur la barre de navigation.Ce bug est connecté au comportement des autres interactive des éléments de contenu tels que
video
(voir aussi Le rendu HTML5).Le seul moyen d'empêcher un tel comportement est à changer l'affichage de la propriété d'un actif, sélectionnez à
none
tout en planant d'un élément interactif.visibility:hidden;
ne va pas aider étant donné que les options sont encore montré, et à l'aide dedisplay:none;
sur les options des résultats dans des erreurs de rendu.Voici une petite démonstration de la technique décrite ci-dessus:
OriginalL'auteur Zeta
très simple
OriginalL'auteur user3927337
Ensemble de votre z-index à -1 pour qu'il apparaisse sur le fond. Donc, sur votre sélectionnez l'élément que vous avez un style en ligne définissant le z-index de 1. Changer de négatif 1.
J'ai essayé ceci dans IE8 et cela a fonctionné. L'sélectionnez déroulante était derrière le menu options.
OriginalL'auteur thepriebe
pour ceux qui ont le même problème, il est très facile, ajoutez le code ci-dessous dans votre code du Menu, il a travaillé pour tous les navigateurs.
OriginalL'auteur user4391566
Autre solution, vérifier si il y a une sélection dans la forme et le focus sur le premier élément de la forme au lieu de créer un champ caché.
OriginalL'auteur Danilo Mena
À l'aide de
display: none
causes de la liste déroulante de la perdre, si elle a, au moins dans Chrome, mais pas dans Firefox. Cela peut causer des problèmes, si certains contenu doit être affiché à la place de la<select>
lorsque la liste déroulante est utilisé (les options de remplacement par certains HTML personnalisé).À l'aide de
position: relative; z-index: -1
peut aussi causer des problèmes: Car il rend le<select>
disparaître derrière le calque par défaut, il peut devenir impossible de cliquer sur la liste déroulante. En outre, le "focus" de l'événement peut être déclenché après que les options ont été rendus, la modification du z-index via JavaScript peut ne pas fonctionner comme prévu.Je suis venu avec la solution de déplacer le menu déroulant en dehors de la vue sur le "focus" et déplacement de retour sur "le flou":
Par rapport à
display: none
, cette solution permet de maintenir la mise en page intact (sauf que le menu disparaît), comme la liste déroulante peut définir la hauteur de son bloc parent de l'élément.OriginalL'auteur BurninLeo
Comme Zeta dit, la boîte de sélection est un élément interactif, vous ne pouvez pas afficher quoi que ce soit au-dessus d'elle à l'aide de HTML/CSS, donc la seule option est de le cacher lors de l'affichage de votre menu, ou tout simplement pour
blur
toutfocus
ed sélectionne sur la page.Si vous ne voulez pas ajouter des classes css bien, vous pouvez simplement
blur()
soit au début de votreShowItem
fonction:...ou de manière plus générale (pour les autres lecteurs pas dans votre situation spécifique) dans un
hover
oumouseenter
de rappel d'événement sur les éléments de menu qui déclenchent les sous-menus apparence.OriginalL'auteur Mtz