レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。

デモページへopen_in_new

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

}