ロゴ
menu
HOME > レスポンシブウェブデザイン > スマートフォンやタブレットで見たときのメニュー表現[1]

スマートフォンやタブレットで見たときのメニュー表現[1]

レスポンシブでコーディングしているサイトのナビゲーションをスマートフォンで見たとき、どのように処理するかのサンプルです。

サンプル

これは割と単純で、指定の幅になったときにfloatしていたメニューを縦並びに戻しているだけです。

パソコン表示

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#menu_button{
    display:none;
    cursor: pointer;
}
#navigation{
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    height: 30px;
    line-height: 30px;
    overflow:hidden;
}
#navigation ul{
  display: block;
}
#navigation ul li{
    list-style:none;
    float:left;
    width:20%;
    text-align:center;
}
#navigation ul li a{
    display: block;
    background: #537EB8;
    color: #FFF;
    text-decoration: none;
    border: 1px solid #FFFFFF;
}
#navigation ul li a:hover{
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    opacity:0.70;
}

スマートフォン表示

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#navigation{
    width: auto;
    height: auto;
}
#navigation ul{
    display:none;
}
#navigation ul li{
    float:none;
    width:100%;
    text-align:center;
}
 
#menu_button{
    display:block;
    text-align: center;
    background-color: #0084FF;
    color: #FFFFFF;
    padding: 5px;
}

ｊQuery

SyntaxHighlighterについて
1
2
3
4
5
jQuery(document).ready(function(){
  jQuery(document).on('click','#menu_button',function(){
    jQuery("#navigation ul").slideToggle();
  });
});

あとはタップしたときにtoggleで開いたり閉じたりします。