画面サイズが狭くなるとメニューボタンを表示し、ナビゲーションを閉じます。
メニューボタンを押すとナビゲーションを表示・非表示します。閉じるボタンつけました。
別バージョンも参考に。レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。
【改定：2016/03/30】
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="js/tool.js"></script> |
[tool.js]JavaScript
$(function(){//MENU$(function(){$(".mod_nav").each(function() { var panelbtn=$(this).find(".navtitle"); var closebtn=$(this).find(".mod_nav_inner .closebtn"); var panelinner=$(this).find(".mod_nav_inner"); $(panelbtn).addClass("close"); //命令 $(function(){ $(panelbtn).click(function(){ if($(panelinner).css("display")=="none"){ $(panelinner).slideDown("fast").removeClass("close").addClass("open"); $(this).removeClass("close").addClass("open");}else{ $(panelinner).slideUp("fast").removeClass("open").addClass("close"); $(this).removeClass("open").addClass("close"); } }); //close $(closebtn).click(function(){ $(panelinner).slideUp("fast").removeClass("open").addClass("close"); $(panelbtn).removeClass("open").addClass("close"); }); });});});//visible$(function() { var windowWidth = $(window).width(); $(window).resize(function(){ var ww = $(window).width(); if(windowWidth != ww) { if($(".navtitle").css("display")=="none") { $(".mod_nav_inner").css("display","block").removeClass("close").addClass("open"); } else { $(".mod_nav_inner").css("display","none").removeClass("open").addClass("close"); } windowWidth = ww; } });});}); |
HTMl
<nav class="mod_nav"><p class="navtitle"><i class="fa fa-bars"></i><span>MENU</span></p><div class="mod_nav_inner"><ul><li class="current"><a href="#">ホーム</a></li><li><a href="#">ニュース</a></li><li><a href="#">会社概要</a></li><li><a href="#">環境活動</a></li><li><a href="#">採用情報</a></li><li><a href="#">お問い合わせ</a></li></ul><p class="closebtn"><span><i class="fa fa-times-circle"></i>メニューを閉じる</span></p><!-- /.mod_nav_inner --></div><!-- /.mod_nav --></nav> |
CSS
/* mod_nav-----------------------------------------*/.mod_nav { padding: 30px 0 30px 0; background-color: #FFF; /* box-shadow */ -webkit-box-shadow: 0px 2px 4px #CCC; -moz-box-shadow: 0px 2px 4px #CCC; box-shadow: 0px 2px 4px #CCC;}@media screen and (max-width:768px) {.mod_nav { position:relative; padding: 0; height: 50px;}}/* navtitle */ .mod_nav p.navtitle { display: none;}@media screen and (max-width:768px) {.mod_nav p.navtitle { position:absolute; top:8px; left:10px; display: block; font-size:20px; cursor:pointer;}.mod_nav p.navtitle i{ font-size:24px;}.mod_nav p.navtitle span{ display: block; width: 1px; height: 1px; overflow: hidden;}}/* mod_nav_inner */.mod_nav_inner {}@media screen and (max-width:768px) {.mod_nav_inner { display:none; position:relative; top:45px; left:0; background-color:#FFF;}}.mod_nav_inner ul { margin: 0 20px 0 20px; text-align: right;}@media screen and (max-width:768px) {.mod_nav_inner ul { margin: 0; text-align: left; border-top:solid 1px #CCC;}}.mod_nav_inner ul li { display: inline-block; margin: 0 20px 0 20px;}@media screen and (max-width:768px) {.mod_nav_inner ul li { display: block; margin:0; border-bottom:solid 1px #CCC;}}.mod_nav_inner ul li a { display: block; padding: 0 0 0 20px; position: relative;}@media screen and (max-width:768px) {.mod_nav_inner ul li a { display: block; padding: 15px 0 15px 40px;}}.mod_nav_inner ul li a:before { position: absolute; margin-top: -8px; top: 50%; left: 4px; color: #000; content: " \f054"; font-family: FontAwesome;}@media screen and (max-width:768px) {.mod_nav_inner ul li a:before { left: 15px;}}.mod_nav_inner ul li a:link { color: #000; text-decoration: none;}.mod_nav_inner ul li a:visited { color: #000; text-decoration: none;}.mod_nav_inner ul li a:hover, .mod_nav_inner ul li a:hover:before { color: #009933; text-decoration: none;}.mod_nav_inner ul li a:active, .mod_nav_inner ul li a:hover:before { color: #009933; text-decoration: none;}/* mod_nav_btn */ .mod_nav_inner p.closebtn { display:none;}@media screen and (max-width:768px){.mod_nav_inner p.closebtn{ display:block; background-color:#000; color:#FFF; margin:0; padding:10px; line-height:1; font-size:16px; cursor:pointer; text-align:center;}.mod_nav_inner p.closebtn i{ margin:0 5px 0 0;}} |