Disabilita il mouse sul menu con CSS

Question

Ho cercato di risolvere questo per una settimana - Sono sicuro che è semplice ma sono davvero lottando con esso!

Sto cercando di cambiare la mia navigazione in modo che gli utenti devono fare clic su di esso per comparire. Credo che il predefinito magento sia che si basano solo, almeno è quello che sta accadendo sulla mia. Qualcuno mi ha detto che ritengono che questo sia influenzato dalle classi CSS che penso potrebbero avere ragione. Vale la pena notare che la mia versione mobile (se visualizzata su un desktop) Abilita clic, ma il desktop mostra su Hover.

Ecco il mio CSS per NAV-primario:

.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;
 }

.

Questo è quello che li fa apparire su Hover o solo essere lì:

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

.

Ma non sono sicuro di cosa cambiarlo per andare da movimentare per fare clic?

Aggiornamento:

Ho cambiato il codice in My /Papp.js a quanto segue e sembra funzionare!

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
    }
},

.

Fondamentalmente ora lo faccio lo stesso della versione del piccolo schermo; Se gli utenti fanno clic per visualizzare la categoria successiva che è fantastica! Ho un paio di categorie che sono destinate a visualizzare un blocco statico invece di deviare alla pagina che ora non funziona. Qualche idea come consentire comunque di mostrare i blocchi statici?

Answer 1

Il selettore specificato è l'aggiunta di display: nessuno che nasconde i caduti.Ciò potrebbe rimanere lo stesso, ciò che devi cambiare è la parte che le mostra.Sembra che sia fatto da questo selettore ".Nav-primario .Menu-Active> ul.level0" che rende la visualizzazione della voce di menu: bloccare di nuovo.Cosa hai davvero bisogno di cambiare è il JavaScript che aggiunge la classe "Menu-Active" al livello superiore UL nel menu, nel tema RWD che sarebbe pelle / frontend / rwd / predefinito / js / app.js.

.

Answer 2

Stai cercando un evento onclick, che è in genere fatto con jQuery e non css.C'è un workaround CSS che coinvolge l'uso della casella di controllo.Vedi i Rispondi a questa domanda .

The ASKER in questa domanda potrebbe avere ciò che stai cercando.