Désactiver Survoler le menu avec CSS

Question

J'ai essayé de résoudre celui-ci pendant une semaine - je suis sûr que c'est simple mais je me débats vraiment avec ça!

J'essaie de changer ma navigation afin que les utilisateurs doivent cliquer dessus pour qu'il apparaisse. Je crois que la défaillance de la magentaine est qu'ils surviennent, au moins c'est ce qui se passe sur le mien. Quelqu'un m'a dit qu'ils croient que cela est affecté par les cours de CSS que je pense avoir raison. Il convient de noter que ma version mobile (lors de la visualisation sur un bureau) active des clics, mais le bureau montre sur la survolte.

Voici mon CSS pour NAV-primaire:

.nav-primary a {
color:#9a9a9a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

.nav-primary a:hover {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}

#header-account li a,
.nav-primary a.level0 {
width: 200px;
text-align: left;
color: #636363;
text-transform: uppercase;
line-height: 20px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
margin-left: 300px;
}

#header-account li:last-child a,
.nav-primary li.level0:last-child a.level0 {
border-bottom: 0;
}

.no-touch #header-account a:hover,
.no-touch .nav-primary a:hover {
text-decoration: none;
}

.nav-primary {
display: block;
padding-top: 30px;
}

.nav-primary a {
text-decoration: none;
position: relative;
display: block;
color: #636363;
line-height: 30px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
}

.nav-primary li {
position: relative;
}

.nav-primary li.level1 a {
margin-left: 350px;
}

.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
 display: block;
 }

.nav-primary li.level0 > a {
text-transform: uppercase;
}

/* ============================================ *
* Small Viewports - Accordion Style Menu
* ============================================ */
.nav-primary a.level0,
.nav-primary a {
 line-height: 25px;
 }
 .nav-primary li.level0 ul {
 display: none;
 }
.nav-primary li.level0 li {
 padding: 0 0 0 25px;
 }
 .nav-primary li.level1 a {
 padding: 0 15px 0 25px;
 }
.nav-primary li.parent > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-top: 5px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid #cccccc;
 border-right: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
 .nav-primary li.parent.sub-menu-active > a:after,
 .nav-primary li.parent.menu-active > a:after {
 content: '';
 position: absolute;
 width: 0;
 height: 0;
 display: block;
 border-right: 5px solid transparent;
 border-left: 5px solid transparent;
 border-top: 5px solid #cccccc;
 border-bottom: none;
 top: 50%;
 left: 10px;
 right: auto;
 margin-top: -5px;
 }
.nav-primary li.menu-active > a,
.nav-primary li.sub-menu-active > a {
 color: #000;
 }
/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */

 .nav-primary li.menu-active > ul {
 display: block;
 }

Ceci est celui qui les fait apparaître soit sur le planer ou simplement être là:

.nav-primary li.level0 ul { display: none; } 

Mais je ne suis pas sûr de quoi changer pour aller de passer à Hover pour cliquer?

mise à jour:

J'ai changé le code dans mon /app.js en ce qui suit et cela semble fonctionner!

mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse enter functionality on smaller screens
    }

    $j(target).addClass('menu-active'); //show current menu
},

/**
 * On large screens, hide menu.
 * On small screens, do nothing.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    if(this.useSmallScreenBehavior()) {
        return; // don't do mouse leave functionality on smaller screens
    }

    $j(target).removeClass('menu-active'); //hide all menus
},

/**
 * On large screens, don't interfere so that browser will follow link.
 * On small screens, toggle menu visibility.
 *
 * @param event
 * @param target
 */
mouseClickAction: function(event, target) {
    {
        event.preventDefault(); //don't follow link
        this.toggleMenuVisibility(target); //instead, toggle visibility
    }
},

Je suis essentiellement maintenant en train de faire la même chose que la version d'écran; Parage des utilisateurs cliquent pour afficher la catégorie suivante qui est géniale! J'ai quelques catégories destinées à afficher un bloc statique au lieu de détourner la page qui ne fonctionne pas. Une idée de la manière de permettre toujours à des blocs statiques de montrer?

Answer 1

Le sélecteur que vous avez spécifié ajoute l'affichage: Aucun qui cache vos dépositions.Cela pourrait rester le même, ce que vous devez changer est la partie qui les montre.On dirait que cela se fait par ce sélecteur ".nav-primaire .Menu-actif> ul.level0" qui fait l'affichage de l'élément de menu: bloquer à nouveau.Ce que vous devez vraiment changer, c'est le JavaScript qui ajoute la classe "Menu-Active" au niveau supérieur UL dans le menu, dans le thème RWD qui serait peau / frontend / rwd / par défaut / js / app.js.

Answer 2

Vous recherchez l'événement OnClick, qui se fait généralement avec JQuery et non CSS.Il y a une solution de contournement CSS impliquant l'utilisation de la case à cocher.Voir le Réponse à cette question .

the Asker dans cette question peut avoir ce que vous recherchez.