ヘッダー部分のメニューにslicknav.jsを使い、
ページ内のコンテンツの中にremodal.jsを使用しています。
メニューのリンク先は全てページ内リンクです。
・Slicknav
http://slicknav.io/
・Remodalデモ
http://vodkabears.github.io/remodal/
・Remodal github
https://github.com/VodkaBears/Remodal/
モーダルを開いたままメニューを開き、クリックすると
モーダルが消えないまま、後ろでページ内移動します。
メニューを選択、移動と同時にモーダルを閉じることはできますでしょうか?
<header> <div id="mobileMenu"></div> <div id="nav"> <div class="container"> <div class="header_logo"> <a href="#" class="s_logo"><img src="img/logo.png" alt="logo"></a> </div> <div class="menu_area"> <div class="align-right"> <ul id="menu"> <li><a class="scroll" href="#top">TOP</a></li> <li><a class="scroll" href="#menu1">menu1</a></li> <li><a class="scroll" href="#menu2">menu2</a></li> <li><a class="scroll" href="#menu3">menu3</a></li> </ul> </div> </div> <div class="clear"></div> </div> </div> </header> <div id="top">ページトップ</div> <div id="menu1">menu1コンテンツ <div> <a href="#modal1">モーダルが開きます</a> </div> <div class="remodal" data-remodal-id="modal1" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc"> <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button> <div> <h3 id="modal1Title">モーダルtitle</h3> <p id="modal1Desc"> モーダル詳細モーダル詳細モーダル詳細モーダル詳細<br> </p> </div> </div> </div> <div id="menu2">menu2コンテンツ</div> <div id="menu3">menu3コンテンツ</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 02:37