css - horizontal - menu déroulant html5



Solutions pour les menus déroulants multi-niveaux réactifs basés sur CSS sans les dépendances JS? (4)

Fait un exemple avec divs et ancres. J'espère que cela aide!

http://jsfiddle.net/UufP5/9/

html:

 <div class="mymenu">
<div class="menu">
    <div class="menu_title">
        menu 1
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
        <a href="#">submenu5</a>
        <a href="#">submenu6</a>
    </div>
</div>
<div class="menu">
    <div class="menu_title">
        menu 2
    </div>
    <div>
        <a href="#">submenu1</a>
        <a href="#">submenu2</a>
        <a href="#">submenu3</a>
        <a href="#">submenu4</a>
    </div>                
</div>
<div class="menu">
    <div class="menu_title">
        menu 3
    </div>
    <div>
        <a href="#">submenu1</a>
    </div>           
</div>

Les

css:

 .mymenu{
font-size: 18px;
position:absolute;
z-index:1;
}
.menu{
    background: #222;
    color: #f9f9f9;
    height: 1em;
    overflow:hidden;
    display:inline-block;
    float:left;
    padding: 0.3em;
}

.menu:hover{
    height: auto;
}

.menu a{
    display:block;
    color: #abc;
}

J'ai regardé les menus déroulants réactifs disponibles / barres de navigation mais rien ne semble fonctionner correctement. J'ai principalement besoin d'un menu basé sur CSS qui ne repose pas sur des hacks JavaScript.

Pourquoi ne pas utiliser JS? Les solutions basées sur JS ne fonctionnent pas sur les navigateurs proxy comme Opera Mini, la majorité de notre audience l'utilise, et les navigateurs BlackBerry ne montrent pas un bon travail avec JS.

Beaucoup de gens préconisent l'utilisation de menus sélectionnés pour la navigation mobile. Une solution intéressante, mais elle dépend à nouveau de JS et est très fastidieuse pour les menus multi-niveaux imbriqués.

Alors, quels systèmes de navigation avez-vous rencontré qui pourraient travailler pour vous?


Answer #1

J'ai aussi essayé de résoudre ce problème. Et je ne pense pas qu'une solution qui couvre tous mes besoins soit possible. Mais ce sera probablement assez bon pour la plupart des gens: http://jsfiddle.net/selfthinker/T7dDm/

HTML:

<ul>
  <li class="dropdown" onclick=""><span>Menu</span>
    <ul>
      <li><a href="#">Menu item</a></li>
      <li><a href="#">Another menu item</a></li>
    </ul>
  </li>
</ul>

CSS:

li.dropdown > span {
    cursor: pointer;
    /* style the "Menu" to make it appear clickable (e.g. replace it with a house icon?) */
    font-size: 2em;
    font-weight: bold;
    color: #00c;
}
li.dropdown {
    position: relative;
}
li.dropdown:hover > ul,
li.dropdown:active > ul,
li.dropdown:focus > ul {
    display: block;
}
li.dropdown > ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0;
    /* and style away: */
    background-color: #ccc;
    font-size: 1.5em;
}

J'ai testé cela sur le nouvel iPad dans Safari et Opera Mini, sur Android (2.2.2, HTC Desire) dans le navigateur de stock et Opera Mini et sur quelques navigateurs de bureau. Et cela fonctionne fondamentalement partout. Ce sont les problèmes restants :

  1. Ce n'est pas accessible au clavier, c'est-à-dire que vous ne pouvez pas parcourir les éléments du menu. Vous pouvez faire apparaître le menu déroulant lui-même sur la tabulation, mais je ne suis pas au courant (sans JavaScript) qui vous permet d'accéder aux éléments à l'intérieur. C'est le plus gros problème pour moi.
  2. Dans Safari sur l'iPad et tous les Opera Minis, le menu ne se ferme plus dès que vous avez tapé dessus. Vous devez soit recharger, soit cliquer sur un lien. (Dans le navigateur Android, vous pouvez fermer le menu en tapant n'importe où ailleurs sur l'écran.) Il pourrait y avoir une solution à cela?
  3. Dans Opera Mini, la page entière se recharge après avoir tapé sur le déclencheur de menu, mais après cela le menu s'affiche normalement.

Answer #2

Les navigateurs mobiles affichent / cachent souvent: le contenu du survol quand il est tapé, si ce n'est un lien. Utilisez ce code:

HTML:

<ul>
<li id="showhide">I am visible, and can be tapped/hovered.
     <ul id="menu">
          <li>Menu item 1</li>
          <li>Menu item 2</li>
     </ul>
</li>
</ul>

CSS: (pas de style)

#showhide{
     position:relative;
}
#menu{
     position: absolute;
     left: -999px
}
#showhide :hover #menu{
     left: 0px;
}

Voir ceci est JSFiddle: http://jsfiddle.net/VVqBU/


Answer #3

Pour le menu déroulant multiniveaux avec script java out, je crée un exemple ici .

HTML:

<ul>
    <li>
        Menu 1
        <ul>
            <li>Menu 1.1</li>
            <li>
                Menu 1.2
                <ul>
                    <li>Menu 1.2.1</li>
                    <li>
                        Menu 1.2.2
                        <ul>
                            <li>Menu 1.2.2.1</li>
                            <li>Menu 1.2.2.2</li>
                        </ul>
                    </li>
                    <li>Menu 1.2.3</li>
                    <li>Menu 1.2.4</li>
                </ul>
            </li>
            <li>Menu 1.3</li>
        </ul>
    </li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>

CSS:

ul{
}
ul li{
    display:inline-block;
    position:relative;
}
ul li> ul{
    display:none;
    position:absolute;
    left:95%;
    top:15px;
}
ul li> ul li{
    display:block;
}
ul li:hover> ul{
    display:block;
}




navigation