フローターナビを作成したのですが、リンク先へ飛びません。
レスポンシブにすると飛べます。
ご教授お願いいたします。
html
1 2<div class="floatingNav"> 3<ul class="floatingNav__list"> 4<li class="floatingNav__item floatingNav--fb"> 5<a href="https://www.facebook.com/" target="_blank"><span>Facebook</span></a> 6</li> 7 8<li class="floatingNav__item floatingNav--tw"> 9<a href="https://twitter.com/" target="_blank"><span>Twitter</span></a> 10</li> 11 12<li class="floatingNav__item @@@"> 13<a href="" target="_blank"><span>あああ</span></a> 14</li> 15 16<li class="floatingNav__item @@@"> 17<a href="" target="_blank"><span>あああ</span></a> 18</li> 19 20<li class="floatingNav__item--last mail"> 21<a href="" target="_blank"><span>メールマガジン</span></a> 22</li> 23</ul> 24</div><!--floatingNav-->
css
1 2 3.floatingNav { 4position: fixed; 5display: block; 6right: 0; 7width: 50px; 8top: 50%; 9height: auto; 10transform: translateY(-50%); 11box-shadow: 0 5px 15px rgba(3,0,0,.1); 12-webkit-box-shadow: 0 5px 15px rgba(3,0,0,.1); 13} 14 15.floatingNav, .floatingNav__list {z-index: 999;} 16 17.floatingNav__list { 18top: 50%; 19width: 50px; 20cursor: pointer; 21} 22 23.floatingNav__item, .floatingNav__item--last { 24display: block; 25width: 50px; 26height: 50px; 27overflow: hidden; 28background-color: #EC6C00; 29border-bottom: solid 1px #EFBD9C; 30background-position: center; 31background-repeat: no-repeat; 32background-size: 30px auto; 33} 34 35.floatingNav__item--last{border-bottom: none;} 36 37.floatingNav--fb{background-image: url(img/fb.png);} 38 39.floatingNav--tw{background-image: url(img/tw.png);} 40 41.mitemo-tv{background-image: url(img/@@@.png);} 42 43.mitemo-hr{background-image: url(img/@@@.png);} 44 45.mail{background-image: url(img/mail.png);} 46 47.floatingNav__item:hover, .floatingNav__item--last:hover{ 48transition: .5s; 49background-color: #f78d3e; 50} 51 52.floatingNav__item a { 53display: block; 54background-repeat: no-repeat; 55background-position: center center; 56transition: background .2s ease-out; 57} 58 59.floatingNav__item a span {display: none;} 60 61.floatingNav__item--last a span {display: none;}
>リンク先へ飛びません。 → どこの部分ですか? また、回答者がコピペして検証できるよう様なコードを提示されると良いかと思います。
回答1件
あなたの回答
tips
プレビュー