以下ページを参考にして、ブートストラップのメガメニューを入れました。
http://bootsnipp.com/snippets/featured/mega-menu-with-carousel-for-stores
ただ、クリックするとメガメニューが出てくる仕様ではなく、ホバーすると出てくる仕様にしたく、以下を参考にしました。
http://www.csshtmljs.com/bootstrap-snippets.php?code-snippets=535&q=HTML+Snippets+for+Twitter+Boostrap+framework+:+bootstrap-css.com
今は、men やwomanのメニューをマウスオーバーするとメガメニューが出ますが、クリックしたら別のページに飛ばせたいのです。
どなたかご教示お願いできますでしょうか。
■ホバーする仕様
<script> $(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("200"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("200"); $(this).toggleClass('open'); }); }); </script>
■ホバーがイキで、クリックすると別ページにいく仕様にしたいのですが、失敗しました。
<script> $(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("200"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("200"); $(this).removeClass('open'); }); }); $(".dropdown").click( function() { $('.dropdown-menu', this); $(this).removeClass('open'); }); }); </script>