CSSを使用してメニューのハーバーを無効にする

Question

私は一週間この1を解決しようとしています - 私はそれが単純であると確信していますが、私は本当にそれに苦しんでいます！

ナビゲーションを変更して、ユーザーが表示するためにクリックしなければならないようにしています。マゼントのデフォルトは、少なくともそれが私の上で起こっているのです。誰かが私がこれが正しいと思うかもしれないCSSクラスの影響を受けていると私に言った。私のモバイルバージョン（デスクトップ上で表示されたとき）がクリックを有効にするのではなく、デスクトップはホバーに表示されるのは注目に値します。

NAV-PRIOMALのMY CSS：

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

.

これは、それらをホバーに現れるか、ただそこにいるようにするものです。

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

.

しかし、私はそれを変更するにはどのように変更してクリックしてクリックしますか？

更新：

私は/app.jsのコードを次のように変更しました、そしてそれは働いているようです！

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

.

基本的には、小さな画面版と同じことをしています。これにより、ユーザーは次のカテゴリを表示するためにクリックします。私は、現在機能していないページに転用する代わりに静的ブロックを表示することを意図しているカテゴリをいくつか持っています。まだ静的ブロックを表示できるようにする方法はありますか？

Answer 1

指定したセレクタはディスプレイを追加しています。ドロップダウンを隠しているものはなしです。それは同じままであるかもしれません、あなたが変更する必要があるものはそれらを示す部分です。このセレクタによって行われているようです ".nav-primary .menu-active> ul.level0"がメニュー項目を表示させる：もう一度ブロックします。あなたが本当に変更する必要があるのは、Skin / Frontend / RWD / default / js / app.jsになるRWDテーマで、メニュー - アクティブなクラスをメニューの最上位ULに追加するJavaScriptです。

Answer 2

オンクリックイベントを探しています。これは通常、CSSではなくjQueryで行われます。チェックボックスの使用を含むCSS回避策があります。この質問への答え。