前提・実現したいこと
ナビメニューに、マウスを合わせるとサブメニューが開くような
ドロップダウンメニューを追加したいが、
思ったような動作ができず、原因がわかりません。
http://www.dcom-web.co.jp/technology/css3_dropdownmenu/
こういったサイトにあるものがイメージに近いです。
スマホサイズで見ても同じ動きをつけたいです。
###codepen
https://codepen.io/karujag/pen/OvWmEa
発生している問題・エラーメッセージ
リロード時に一瞬ドロップダウンメニューが表示されますが、見えなくなってしまいます。
スマホサイトで表示した時は、右端に文字が重なって表示されています。
###試したこと
ドロップダウンメニューを追加したい箇所に
補足:
<ul class="menu"></ul>で囲っている部分は スマホサイトで見たときにメニューが収まるようになっています。ソースコード
HTML
1<div class="navi"> 2 <div class="toggle"> <a href="#">Menu</a> </div> 3 <ul class="menu"> 4 <li> <a href="#">リンク</a> </li> 5 <li> <a href="#">リンク</a><!--親メニュー--> 6 <ul id="link-nav-drop"><!--ドロップダウンメニューを追加したい部分--> 7 <li> <a href="#">リンク</a> </li><!--親メニューの下に表示させたいメニュー--> 8 </ul> 9 </li> 10 <li> <a href="#">リンク</a> </li> 11 <li> <a href="#">リンク</a> </li> 12 <li class="close"> <a href="#">Close</a> </li> 13 </ul> 14</div> 15<script type="text/javascript"> 16$(function(){ 17 $(".toggle").click(function(){ 18 $(this).next().slideToggle(); 19 }); 20 $(".close").click(function(){ 21 $(this).parent().slideToggle(); 22 return false; 23 }); 24 $(window).resize (function(){ 25 var win = $(window).width(); 26 var resp = 767; 27 if(win > resp){ 28 $(".menu").show(); 29 } else { 30 $(".menu").hide(); 31 } 32 }); 33}); 34</script>
CSS
1.clearfix::after { 2 content: ""; 3 display: block; 4 clear: both; 5} 6 7.navi { 8 width: 100%; 9 padding: 0; 10 margin: 0 auto; 11 margin-left: -500%; 12 margin-right: -500%; 13 padding-left: 500%; 14 padding-right: 500%; 15 filter: alpha(opacity=95); 16 -moz-opacity: 0.95; 17 opacity: 0.95; 18 background: #1D3557; 19 text-align: center; 20} 21 22.navi ul { 23 padding: 0; 24 overflow: hidden; 25 list-style-type: none; 26 margin: 0 auto; 27 height: 50px; 28} 29 30.navi li { 31 float: left; 32 text-align: center; 33 width: 20%; 34 margin: 0; 35} 36 37.navi li a { 38 display: block; 39 margin: 0; 40 line-height: 50px; 41 padding: ; 42 color: #fff; 43 font-size: 16px; 44 text-decoration: none; 45 transition: 1s ease; 46} 47 48.navi a:hover { 49 color: #fff; 50 background: #E63946; 51} 52 53.toggle, 54.close { 55 display: none; 56} 57 58.search-form { 59 margin: 0; 60} 61 62.menu #link-nav li { 63 position: relative; 64} 65 66a:hover+#link-nav-drop { 67 display: block; 68} 69 70#link-nav-drop { 71 display: none; 72 position: absolute; 73 right: 0; 74 height: auto; 75 overflow: hidden; 76 width: 100%; 77 background-color: #000; 78} 79 80@media only screen and (min-width: 767px) { 81 .navi>ul { 82 padding: 0; 83 margin: 0; 84 width: 100%; 85 margin-bottom: 30px; 86 display: block; 87 } 88 .navi>ul>li { 89 box-sizing: border-box; 90 width: calc(100% / 5); 91 height: 50px; 92 line-height: 50px; 93 border-left: 1px solid white; 94 color: white; 95 float: left; 96 list-style-type: none; 97 text-align: center; 98 position: relative; 99 transition: box-shadow .3s ease-in-out; 100 } 101 .navi>ul>li:first-child() { 102 border-left: 0; 103 } 104 .navi>ul>li>a { 105 color: white; 106 position: absolute; 107 top: 0; 108 right: 0; 109 bottom: 0; 110 left: 0; 111 } 112} 113 114@media only screen and (max-width: 767px) { 115 .menu { 116 display: none; 117 width: 100%; 118 } 119 .navi li { 120 width: 100%; 121 } 122 .navi-search { 123 display: none; 124 } 125 .menu .inmenu { 126 display: block; 127 padding: 12px 10px; 128 color: #fff; 129 text-decoration: none; 130 } 131 .toggle { 132 display: block; 133 position: relative; 134 width: 100%; 135 } 136 .close { 137 display: block; 138 position: relative; 139 width: 100%; 140 } 141 .toggle a { 142 display: block; 143 padding: 12px 0 10px; 144 color: #fff; 145 text-align: center; 146 text-decoration: none; 147 } 148 .toggle:before { 149 position: absolute; 150 font-family: "blogicon"; 151 content: "\f003"; 152 top: 50%; 153 right: 10px; 154 width: 20px; 155 height: 20px; 156 margin-top: -10px; 157 color: #fff; 158 } 159}
回答2件
あなたの回答
tips
プレビュー