前回から始めたWordPressのサイト作り
今回はヘッダーのレスポンシブ部分を作りました。
前回の記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
プラグインを使わずにハンバーガーメニューを作る
今回の主な作業は960px以下の時にハンバーガーメニューを表示して、クリックするとナビゲーションメニューが出て来るようにすることです。
便利なプラグインはたくさんあるんですが、あえて使わずに作っていました。
まず前回のソースでviewportに関する記述をしていなかったのですが、
そのせいでメディアクエリが効かずに5分位悩みました。
headでviewportの指定を必ずするように・・・。自分。
この中で今日はパソコンで開いた時のヘッダーを作っていきたいと思います。
<!-- html --> <!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Webデザイナーを目指す人のブログ</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('#navtoggle').click(function(){ $('header').toggleClass('nav_open'); }); }); </script> </head> <body> <header> <div class="container"> <h1><a href="">Webデザイナーを目指す人のブログ</a></h1> <h2>Webサイト作成時に勉強したことの備忘録</h2> </div> <div id="navtoggle"> <div class="navwrap"> <span></span> <span></span> <span></span> </div> </div> <nav> <ul class="container"> <li><a href="">サイト構築</a></li> <li><a href="">デザイン</a></li> <li><a href="">ツール</a></li> </ul> </nav> </header> </body>
<!-- css --> @charset "UTF-8"; body { background-color: #f2f2f2; color: #333; } h1 { font-size: 22px; font-weight: 600; padding: 15px 0 10px; } h2 { font-size: 13px; } a { text-decoration: none; } a:visited { color: #333; } .container { max-width: 1040px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } /* header */ header nav { border-top: 1px solid #E0DEDE; border-bottom: 1px solid #E0DEDE; margin-top: 15px; } header ul li { display: inline-block; border-right: 1px solid #E0DEDE; width: 160px; height: 40px; text-align: center; line-height: 40px; font-size: 13px; } header ul li:last-child { border-right: none; } header ul li:last-child { border-right-width: none; } #navtoggle { display:none; position: absolute; top: 0; right: 0; width: 60px; height: 60px; cursor: pointer; background-color: #ccc; } .navwrap { position: relative; padding: 0px 15px; top: 15px; } .navwrap span { display: block; position: absolute; border: 2px solid #000; border-radius: 10px; width: 25px; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out } .navwrap span:first-child { top:0; } .navwrap span:nth-child(2) { top:10px; } .navwrap span:last-child { top:20px; } @media screen and (max-width: 960px) { h1 { padding: 50px 0 10px; text-align: center; -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; transition:.5s ease-in-out; } h2 { text-align: center; padding-bottom: 20px; } header nav { position: absolute; right:0; top: -150px; width:100%; padding:0 10px; -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; transition:.5s ease-in-out; text-align:left } header ul li { display: block; margin: 0; border-bottom: 1px dotted #000; border-right: none; width: 100%; text-align: left; padding-left: 20px; } header ul li:before { content:">"; padding-right: 5px; } #navtoggle { display:block; } .nav_open #navtoggle span:first-child { top: 13px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg); } .nav_open #navtoggle span:nth-child(2),.nav_open #navtoggle span:last-child { top: 13px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); } .nav_open h1 { padding: 230px 0 10px; text-align: center; } .nav_open nav { -moz-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(210px); border: none; display: block; } }
本当はハンバーガーメニューの下からリストを表示してほしいのにbodyの上から表示されるようになっています。
h1を先に記述したほうがSEO的にはいいと思っていて、このマークアップになっているんですけど、
navがcontainerの上にあれば希望通り表示されるのかしら。。。
そうなればflexboxなどで順番変えればいいのか。。。
でも今日は時間がないのでこの辺で。
へば!