- 締切済み
mmenu.jsでのメニューがハイライトされない
こんにちは。 スマホサイトでメニューをmmenu.jsを使用しています。 ただ、メニューをクリックしてそのページにジャンプしたあと、 またメニューを開くと、現在のページ名がハイライトされず、 サブメニューもたたまれてる状態に戻ってしまいます。 何かカスタマイズが必要な部分があるのでしょうか? 詳しい方、アドバイスをお願い致します。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- Gletscher
- ベストアンサー率23% (1525/6504)
回答No.1
CSSはどうなっていますか? ソースコードを書かないと質問にならないですよ。
補足
失礼しました。 CSSはjquery.mmenu.all.cssをそのままで使っています。 空のリンク状態の時はハイライトされるのですが、リンクを設定すると、ハイライトされない状態です。 ちなみにリンクはルートパスにしています。 .mm-menu,.mm-panels,.mm-panels>.mm-panel{margin:0;left:0;right:0;top:0;bottom:0;z-index:0;box-sizing:border-box} .mm-btn,.mm-menu{box-sizing:border-box} .mm-listview a,.mm-listview a:hover,.mm-navbar a,.mm-navbar a:hover{text-decoration:none} .mm-hidden{display:none!important} .mm-menu,.mm-panels>.mm-panel:not(.mm-hidden){display:block} .mm-wrapper{overflow-x:hidden;position:relative} .mm-menu{padding:0;position:absolute} .mm-panels,.mm-panels>.mm-panel{background:inherit;border-color:inherit;position:absolute} .mm-btn,.mm-panel.mm-highest{z-index:1} .mm-panels{overflow:hidden} .mm-panel{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} .mm-panel.mm-opened{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .mm-panel.mm-subopened{-webkit-transform:translate3d(-30%,0,0);transform:translate3d(-30%,0,0)} .mm-panels>.mm-panel{-webkit-overflow-scrolling:touch;overflow:scroll;overflow-x:hidden;overflow-y:auto;padding:0 20px} .mm-listview .mm-divider,.mm-listview>li>a,.mm-listview>li>span,.mm-navbar .mm-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .mm-panels>.mm-panel.mm-hasnavbar{padding-top:40px} .mm-panels>.mm-panel:after,.mm-panels>.mm-panel:before{content:'';display:block;height:20px} .mm-vertical .mm-panel{-webkit-transform:none!important;-ms-transform:none!important;transform:none!important} .mm-listview .mm-vertical .mm-panel,.mm-vertical .mm-listview .mm-panel{display:none;padding:10px 0 10px 10px} .mm-listview .mm-vertical .mm-panel .mm-listview>li:last-child:after,.mm-vertical .mm-listview .mm-panel .mm-listview>li:last-child:after{border-color:transparent} .mm-vertical li.mm-opened>.mm-panel,li.mm-vertical.mm-opened>.mm-panel{display:block} .mm-listview>li.mm-vertical>.mm-next,.mm-vertical .mm-listview>li>.mm-next{height:40px;bottom:auto} .mm-listview>li.mm-vertical>.mm-next:after,.mm-vertical .mm-listview>li>.mm-next:after{top:16px;bottom:auto} .mm-listview>li.mm-vertical.mm-opened>.mm-next:after,.mm-vertical .mm-listview>li.mm-opened>.mm-next:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);right:19px} .mm-btn{width:40px;height:40px;position:absolute;top:0} .mm-clear:after,.mm-clear:before,.mm-close:after,.mm-close:before{content:'';border:2px solid transparent;display:block;width:5px;height:5px;margin:auto;position:absolute;top:0;bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)} .mm-clear:before,.mm-close:before{border-right:none;border-bottom:none;right:18px} .mm-clear:after,.mm-close:after{border-left:none;border-top:none;right:25px} .mm-arrow:after,.mm-next:after,.mm-prev:before{content:'';border:2px solid transparent;display:block;width:8px;height:8px;margin:auto;position:absolute;top:0;bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)} .mm-prev:before{border-right:none;border-bottom:none;left:23px} .mm-arrow:after,.mm-next:after{border-top:none;border-left:none;right:23px} .mm-navbar{border-bottom:1px solid;border-color:inherit;text-align:center;line-height:20px;height:40px;padding:0 40px;margin:0;position:absolute;top:0;left:0;right:0} .mm-navbar>*{display:block;padding:10px 0} .mm-navbar .mm-btn:first-child{padding-left:20px;left:0} .mm-navbar .mm-btn:last-child{text-align:right;padding-right:20px;right:0} .mm-panel .mm-navbar{display:none} .mm-panel.mm-hasnavbar .mm-navbar{display:block} .mm-listview,.mm-listview>li{list-style:none;display:block;padding:0;margin:0} .mm-listview{font:inherit;font-size:14px;line-height:20px} .mm-listview>li{position:relative} .mm-listview>li,.mm-listview>li .mm-next,.mm-listview>li .mm-next:before,.mm-listview