スマホ用横から出るメニュー

2016/12/09

スマホ用横から出るメニュー

スマホ用です。
左からメニューが出てくるタイプのもの。
jQueryのtoggleClassでclassを振るシンプルなものです。
メニューボタンをタップしてメニューを出していますが、本当はメニュー以外をタップした場合もメニューを閉じさせる仕様にしたかった。
jsもっと勉強しないとな、と思います。

スマホ横から出るメニュー(改)
▲横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。

jQueryを使わないスマホ用横メニュー
▲ネイティブで書いたもの。横ナビが覆いかぶさるタイプ

メニュー開閉の動作はすべてCSSで行っています。
transitionでぬるっと動かしたかったので、header_navにwidth:0pxを設定しています。
ここでdisplay:noneとかを設定するとtransitionは効かないので注意です。
ちなみにdisplay:noneでアニメーションをしたいならcssのanimationが効くのでそちらを使うと良いと思います。

HTML

<div class="wrap">
    <div class="l_header">
        <nav class="header_nav">
            <ul class="nav_list clearfix">
                <li class="sp header_web_btn"><a href="">メニュー１</a></li>
                <li class="active"><a href="">メニュー2</a></li>
                <li class="pseudo_link">
                    <span class="pseudo_link_inner">メニュー３</span>
                    <ul class="header_sub_list">
                        <li><a href="">メニュー３－１</a></li>
                        <li><a href="">メニュー３－２</a></li>
                        <li><a href="">メニュー３－３</a></li>
                        <li><a href="">メニュー３－４</a></li>
                    </ul>
                </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>
        </nav>
    </div>
    <div class="content">
        <div class="sp sp_nav_btn">
            <img src="http://style01.net/wp-content/themes/style01/img/demo/sp_menu.jpg" alt="">
        </div>
        <div class="content_inner">
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
    </div>
</div>

</ul>

</li>

</ul>

</nav>

</div>

</div>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</div>

CSS

CSS

/*----------------------------------------------------------------------*/
/*Layout(common)
/*----------------------------------------------------------------------*/
body{
    margin: 0;
    padding: 0;
}
.wrap{
    display: table;
    -webkit-transiton:.3s;
    transition: .3s;
    overflow: hidden;
}
.wrap:after{
    content:" ";
    display:table;
    clear:both;
}
.pseudo_link{
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 1.4rem;
    color: #000;
    box-sizing: border-box;
}

/*------------------------------------------*/
/*l_header
/*------------------------------------------*/
.l_header {
    width: 200px;
    display: table-cell;
    vertical-align: top;
}
/*-------------------sp_nav_btn-----------------------*/
.sp_nav_btn{
    display: inline-block;
}

/*-------------------header_nav-----------------------*/
.l_header{
    overflow: hidden;
}
.l_header .header_nav {
    width: 0px;
    height: 100%;
    margin: 0;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    -webkit-transiton:.3s;
    transition: .3s;
}
.l_header .header_nav  .nav_list {
    width: 200px;
    height: 100%;
    margin-top: 0;
    padding-bottom: 30px;
    overflow-x: scroll;
}
.l_header  .nav_list>li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    font-size: 1.4rem;
    color: #000;
    border-bottom: 1px dotted #ddd;
    box-sizing: border-box;
}
.l_header  .nav_list>li a:hover{
    color: #006835;
}
/*-------------------header_sub_list-----------------------*/
.l_header  .header_sub_list{
    border-bottom: 1px dotted #ddd;
}
.l_header  .header_sub_list>li>a{
    padding: 5px 20px;
    font-size: 1.3rem;
    border-bottom: none;
}
/*-------------------header_nav is_nav_active-----------------------*/
.l_header .header_nav.is_nav_active {
    width: 200px;
    height: 100%;
    margin: 0;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
/*-------------------header_web_btn-----------------------*/
.l_header  .nav_list>.header_web_btn{
    margin: 10px 10px 15px;
    padding: 5px 0;
    font-size: 1.5rem;
    border-radius: 5px;
    background: #f8910c;
    box-sizing: border-box;
}
.l_header  .nav_list>.header_web_btn>a{
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    color: #fff;
    border-bottom: none;
}
/*-------------------content-----------------------*/
.content{
    display: table-cell;
    width: 100%;
    padding: 10px;
    background: #ddd;
    vertical-align: top;
}
.content_inner{
    margin-top: 10px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

/*----------------------------------------------------------------------*/

/*Layout(common)

/*----------------------------------------------------------------------*/

body{

margin: 0;

padding: 0;

}

.wrap{

display: table;

-webkit-transiton:.3s;

transition: .3s;

overflow: hidden;

}

.wrap:after{

content:" ";

display:table;

clear:both;

}

.pseudo_link{

display: block;

width: 100%;

height: 100%;

padding: 10px;

font-size: 1.4rem;

color: #000;

box-sizing: border-box;

}

/*------------------------------------------*/

/*l_header

/*------------------------------------------*/

.l_header {

width: 200px;

display: table-cell;

vertical-align: top;

}

/*-------------------sp_nav_btn-----------------------*/

.sp_nav_btn{

display: inline-block;

}

/*-------------------header_nav-----------------------*/

.l_header{

overflow: hidden;

}

.l_header .header_nav {

width: 0px;

height: 100%;

margin: 0;

background: #fff;

box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

-webkit-transiton:.3s;

transition: .3s;

}

.l_header .header_nav .nav_list {

width: 200px;

height: 100%;

margin-top: 0;

padding-bottom: 30px;

overflow-x: scroll;

}

.l_header .nav_list>li a{

display: block;

width: 100%;

height: 100%;

padding: 10px;

font-size: 1.4rem;

color: #000;

border-bottom: 1px dotted #ddd;

box-sizing: border-box;

}

.l_header .nav_list>li a:hover{

color: #006835;

}

/*-------------------header_sub_list-----------------------*/

.l_header .header_sub_list{

border-bottom: 1px dotted #ddd;

}

.l_header .header_sub_list>li>a{

padding: 5px 20px;

font-size: 1.3rem;

border-bottom: none;

}

/*-------------------header_nav is_nav_active-----------------------*/

.l_header .header_nav.is_nav_active {

width: 200px;

height: 100%;

margin: 0;

background: #fff;

box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

}

/*-------------------header_web_btn-----------------------*/

.l_header .nav_list>.header_web_btn{

margin: 10px 10px 15px;

padding: 5px 0;

font-size: 1.5rem;

border-radius: 5px;

background: #f8910c;

box-sizing: border-box;

}

.l_header .nav_list>.header_web_btn>a{

padding-left: 0;

padding-right: 0;

text-align: center;

color: #fff;

border-bottom: none;

}

/*-------------------content-----------------------*/

.content{

display: table-cell;

width: 100%;

padding: 10px;

background: #ddd;

vertical-align: top;

}

.content_inner{

margin-top: 10px;

}

js(jQuery)

JavaScript

$(function() {
    $(".sp_nav_btn").on("click",function(){
        $(".content").toggleClass("is_nav_active");
        $(".header_nav").toggleClass("is_nav_active");
    });
});

$(function() {

$(".sp_nav_btn").on("click",function(){

$(".content").toggleClass("is_nav_active");

$(".header_nav").toggleClass("is_nav_active");

});

デモページ

スマホ横から出るメニュー(改)
▲横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。

jQueryを使わないスマホ用横メニュー
▲ネイティブで書いたもの。横ナビが覆いかぶさるタイプ