先日制作したレスポンシブサイトにjQueryで動くナビゲーションボタンをつけ加えてみましょう。
ボタンをタップすると下に出てくるドロップメニューと
横からスライドして出てくるメニューの2種類をここでは作ってみます。
メニューボタンはスマートフォンサイズの時にだけ表示させたいので、スマートフォンサイト用のメディアクエリー内に必ず記述しましょう。
ドロップメニュー
http://yachin29.com/kirin/index2.html
css
/*スマートフォンサイト*/ @media screen and (max-width:640px){ h1 { float: left; width: 40%; } .pc-nav { display: none; } .sp-nav { display: block; overflow: hidden; } .sp-nav li{ text-align:center; float:left; width:50%; margin:0; background-color:#fff; border-bottom:solid 1px #ddd; box-sizing:border-box; } .sp-nav li a{ display: block; width: 100%; font-size: 14px; padding: 14px 0; } .sp-nav li:nth-of-type(odd) { border-right:solid 1px #ddd; } .sp-nav li a:hover { color: #FFF; } .sp-nav li.nav1 a:hover { background:#E96562; } .sp-nav li.nav2 a:hover { background:#14AEB0; } .sp-nav li.nav3 a:hover { background:#FF8F01; } .sp-nav li.nav4 a:hover { background:#E3578A; } .sp-nav li.nav5 a:hover { background:#438FC9; } .sp-nav li.nav6 a:hover { background:#7BA600; } #content ul { width: 98.98%;/* 970÷980*/ padding:0.56%; } #content li { float: left; margin:0; width:100%; padding: 3px; box-sizing: border-box; } #content li img { width: 100%; } li.size-1x1 {max-width:50%; height: auto;} li.size-2x1 {max-width:100%; height: auto;} li.size-2x2 {max-width:100%; height: auto;} li#photo1{ width: 100%; } li#photo4{ width: 50%; } li#photo1{ display: none; } li#photo1-2 { display: block; } li#photo10 { display: block; } footer { width: 100%; padding:0; } footer ul{ float: none; width: 100%; } footer ul li:first-child{ font-size: 14px; line-height: 2; border-bottom: 1px solid #999; text-decoration: none; } footer ul li:first-child a { background: url(../img/next.jpg) no-repeat right center; background-size: 6%; width: 96%; margin: 0 auto; display: block; padding: 10px 0; } footer ul li:first-child:hover { background: #EEE; } footer ul li:not(:first-child){ display:none; } /*ドロップメニュー*/ .menu { display: block; float: right; padding: 10px 5px 12px; } .menu nav ul { display: none; } .menu p#menuToggle{ background: #2b2b2b; background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%); border: 1px solid #444; border-radius: 5px; color: #fff; padding: 7px; } .menu p#menuToggle { line-height: 30px; padding: 5px 10px; width: 120px; } .menu p#menuToggle span { background-image: url(../img/icon_hum.png), url(../img/bg_line.png); background-position: 100% 50%, 80px 50%; background-repeat: no-repeat, repeat-y; background-size: auto auto, 2px auto; display: block; padding-left: 9px; } .menu.open { display: block; background: url(../img/bg_dropdown.png) no-repeat 85% 100%; background-size: 14px; } .menu.open ul { background: #333; border-bottom: 1px solid #000; display: block; left: 1%; position: absolute; top: 62px; width: 98%; margin: 0 auto; z-index: 9999; } .menu.open ul li a { border-top: 1px solid #666; color: #fff; display: block; padding: 14px; } .menu.open ul li:first-child, .menu.open ul li:first-child a { border-top: none; } .menu li a:hover { color: #FFF; } .menu li.nav1 a:hover { background:#E96562; } .menu li.nav2 a:hover { background:#14AEB0; } .menu li.nav3 a:hover { background:#FF8F01; } .menu li.nav4 a:hover { background:#E3578A; } .menu li.nav5 a:hover { background:#438FC9; } .menu li.nav6 a:hover { background:#7BA600; } }
jQuery
$(function(){ $('#menuToggle').click(function(){ //#menuToggleをクリックすると $(this).parent().toggleClass('open'); //親要素に.openを付ける。 }); });