Webサイトのグローバルナビゲーション制作に関する質問です。
横幅が981px以上の時(PCを想定)
・メニューを横並びにし、サブメニューは親メニューにカーソルを当てた時に表示される
※これはなんとか、自力で制作することができました
横幅が980px以下の時(タブレット・スマホを想定)
・横並びメニューは消え、ハンバーガーメニューが表示される。ハンバーガーメニューをクリックすると
メニューが縦並びで表示され、サブメニューは親メニューをクリックした時に表示される
また、サブメニューがあることを表示するために、サブメニューがある親メニューには→を添え、
サブメニューが開いている時には→が↓になるようにしたい。
※現在は親メニューにカーソルを当てた時に表示される状態となっています。
※→(矢印アイコン)はfontawesomeを使用?
サンプル
http://slicknav.com/
ページ下部の「Advance Demo」のParent2のようにしたいです。
どなたか、実現する方法を教えていただけたら嬉しいです。
よろしくお願いします。
htmlとCSSは以下の通りです。
html
1<html lang="ja"> 2<head> 3<meta charset="UTF-8"> 4<title>サイトタイトル</title> 5<meta name="viewport" content="width=device-width"> 6<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> 7<link rel="stylesheet" href="style.css"> 8<script type="text/javascript" src="ga.js"></script> 9<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 10</head> 11<script type="text/javascript"> 12 $(function(){ 13 $("#menu li").hover(function(){ 14 $("ul",this).show(); 15 }, 16 function(){ 17 $("ul",this).hide(); 18 }); 19 }); 20 </script> 21 <script> 22 $(function(){ 23 24 $("#menubtn").click(function(){ 25 $("#menu").slideToggle(); 26 }); 27 }); 28</script> 29</head> 30<body> 31<div class="boxA"> 32<div class="boxA-inner"> 33<div class="box1"> 34 <div class="site"> 35 <h1><a href="/"><img src="img/logoimg.png" alt="サイトタイトル" width="" height=""></a></h1> 36 </div> 37</div> 38<div class="box2"> 39 <button type="button" id="menubtn"> 40 <i class="fa fa-bars"></i><span>MENU</span> 41 </button> 42 <nav class="menu" id="menu"> 43 <ul id="menubar"> 44 <li><a href="/">トップ</a></li> 45 <li><a href="menu1/">メニュー1</a></li> 46 <li><a href="menu2/">メニュー2</a></li> 47 <li><a href="menu3/">メニュー3</a></li> 48 <li><a>メニュー4</a> 49 <ul class="sub"> 50 <li><a href="menu4/sub1">サブメニュー1</a></li> 51 <li><a href="menu4/sub2">サブメニュー2</a></li> 52 </ul> 53 </li> 54 <li><a href="menu5/">メニュー5</a></li> 55 <li><a href="menu6/">メニュー6</a></li> 56 <li><a href="menu7/">メニュー7</a></li> 57 </ul> 58 </nav> 59</div> 60</div> 61</div> 62</body> 63</html>
css
1@charset "UTF-8"; 2 3 4body { 5 margin: 0;} 6 7/* ########### 980px以下 ########### */ 8@media (max-width: 980px) { 9 10/* トグルボタン */ 11#menubtn {padding: 6px 12px; 12 border: solid 0px; 13 background-color: #ffffff; 14 position: absolute; 15 top: 20px; 16 right: 10px; 17 cursor: pointer} 18 19#menubtn:hover {background-color: #dddddd} 20 21#menubtn:focus {outline: none} 22 23#menubtn i {color: #000000; 24 font-size: 30px} 25 26#menubtn span {display: inline-block; 27 text-indent: -9999px} 28 29/* ナビゲーションメニュー(縦並び) */ 30.menu {display: none} 31 32.menu ul {margin: 0; 33 padding: 0; 34 list-style: none} 35 36.menu li a {display: block; 37 background-color: #ffffff; 38 padding: 5px; 39 margin-left:10px; 40 margin-right:10px; 41 color: #000000; 42 font-size: 14px; 43 text-decoration: none} 44 45.menu li a:hover {background-color: #eeeeee} 46} 47 48 49/* ########### 981px以上 ########### */ 50@media (min-width: 981px) { 51 52/* トグルボタン */ 53#menubtn {display: none} 54 55/* ナビゲーション */ 56#menu {display: block !important} 57 58.menu ul {margin: 0; 59 padding: 0; 60 list-style: none} 61 62.menu li a {display: block; 63 padding: 10px 15px; 64 color: #000000; 65 font-size: 14px; 66 text-decoration: none} 67 68.menu li a:hover { 69 background-color: #eeeeee 70} 71 72.menu ul:after {content: ""; 73 display: block; 74 clear: both} 75 76.menu li {float: left; 77 width: auto} 78 79/* BOX1とBOX2を横に並べる設定 */ 80.boxA:after {content: ""; 81 display: block; 82 clear: both} 83 84.box1 {float: left; 85 width: auto} 86 87.box2 {float: right; 88 width: auto; 89} 90 91.sub{ 92 display: none; 93 position: absolute; 94 background-color: #ffffff; 95 z-index: 1 96 } 97 98.sub li{ 99 clear:both; 100} 101}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/22 12:15