Html Sélectionnez les options de boîte sur Hover?

J'ai vu cette très simple selectbox sur youtube, où l'sélectionnez les options sont visibles sur le vol stationnaire (au lieu de cliquer), comme on le voit dans la capture d'écran suivante.

Html Sélectionnez les options de boîte sur Hover?

Je suis en train de créer un effet similaire à la suivante, simple boîte de sélection. Quelqu'un peut s'il vous plaît aider comment cela peut être fait? Merci.

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select>

source d'informationauteur John

  1. 5

    Il est impossible d'ouvrir un select boîte dans la plaine chemin de votre description. C'est pas par hasard que l'image que vous avez fournies ne ressemble en rien à une normale de sélectionner la zone. C'est parce qu'il est probablement en fait un ul liste dont le style est adapté à regarder comme il le fait, révélant lui-même sur le vol stationnaire, ce qui est réellement possible.

    J'ai créé un exemple plus sur jsfiddle de comment il pourrait en être fait.

  2. 4

    Si vous êtes intéressés à faire de cette façon, j'ai une simple, non-javascript moyen de le faire sur mon projet en cours en fait (regardez le "je Veux" dans le menu en haut). Comme @Marcus a dit, ce n'est pas avec une boîte de sélection, mais se fait avec une liste non ordonnée (<ul>).

    Le html est simple: 

    <div id="iWantToMenuContainer">
<ul id="i-want-to" class="menu">
    <li><a href="http://cumberlandme.info/contact">contact the town office</a></li>
    <li><a href="http://cumberlandme.info/upcoming-events">find out what&#8217;s happening</a></li>
    <li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>

    l'important, c'est de la css, essentiellement juste les 2 premières règles. La div s'affiche pour développer en raison de la overflow:visible sur :hover.

    #iWantToMenuContainer {
    overflow:hidden;
}
#iWantToMenuContainer:hover {
    overflow:visible
    }
#iWantToMenuContainer ul {
    border:1px solid #b6c2b9;
    background:#fff;
    padding:1px 20px 3px 5px
    }
#iWantToMenuContainer a:link,#iWantToMenuContainer a:visited {
    display:block;
    background: #fff;    
}
#iWantToMenuContainer a:hover {
    background:#e6e6e6
    }
  3. 0

    Au travail en ce moment donc ne peut pas vérifier youtube, mais à partir du style je suppose que ça", sélectionnez" contrôle n'est pas un réel contrôle de sélection. Très probablement, il est mis en œuvre comme une navigation menu déroulant, mais au lieu d'accéder à une url sur sur il remplace le contenu et la valeur de l'étiquette d'entrée. Ensuite sur soumettre le formulaire il peut prendre la valeur de l'étiquette.

  4. 0

    Lien pour la mise à jour du plugin jquery Fourche $.selectUI plugin

    • Correctifs itération sur plusieurs éléments transmis dans