４月６日授業内容 （実技試験候補（ハンバーガメニュー）、ドロワーメニュー（未入力、リンクあり））
実技試験候補
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Toggle Menuとハンバーガーメニュー</title> <meta name="viewport" content="width"=device-width> <script src="js/jquery-2.2.1.min.js"></script> <link rel="stylesheet" href="css/style.css"> <script> $(function(){ $('#btn').on('click',function(){ $('ul').slideToggle(200); }); }); </script> </head> <body> <div id="container"> <header> <h1>Toggle Menu</h1> </header> <nav> <button><img id="btn" src="img/logo.png"></button> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> </nav> <main> <p>It’s called a “hamburger” because it it looks roughly like a bun-meat-bun sandwich. (Others have insisted that it looks much more like a triple hot-dog, but they’ve thus far been unsuccessful in winning the public’s hearts and minds.)</p> <p>The idea behind the hamburger menu is that you can use it to hide site navigation on smaller screens, showing it only when the user clicks the icon instead of always showing it (which was the previous norm).</p> </main> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,p,ul,li,img{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none; } img{vertical-align:bottom; } /*body*/ body{background:#CF6;} #container{width:80%; margin:0 auto; padding:20px; } button{padding:5px; background:#033; border-radius:10px;} #btn{ height:60px; width:71px; } h1{color:#036; text-align:center;} nav{width:100%; marign:0 auto; } ul{height:200px;} p{width:100%;} li{ height:50px; box-sizing:border;} li:nth-child(-n+3){border-bottom:1px solid #FFF; } li a{line-height:50px; display:block; text-align:center; background:olive; color:white;} li a:hover{background:aqua; }
