メッセージの編集
お名前
本文
試してみましたが、自前環境では動作しました。 下記で解決しない場合は、ソース表示もhtml採点を試していればついでにされるはずなので試してみてください。 ▼とりあえず気になった点 ・headerのopacity(不透明度指定)の値が0 →header自体完全に透明に指定されています。 そもそもメニューとその開閉のトリガーになるボタン自体見えなくなっているのではないでしょうか。 ・jQuery非対応環境だとメニューが一生開けない →全環境でjQueryが動作するとも限りません。 「jQueryで表示させる要素」を予め非表示にする際はcssではなくjQueryを用いるべきです。 ・広告下げまたは広告隠しの可能性 →本件関係なくて申し訳ないですが、レイアウト的に危険そうなので無料版使用の場合は修正をした方がいいです。 以上を踏まえて自分ならこうする程度ですが ▼全体レイアウト <header> <button type="button" class="button"> <span class="fa fa-bars" title="MENU"></span> </button> <ul id="nav"> <li><a href="#">info</a></li> <li><a href="#">main</a></li> <li><a href="#">date</a></li> <li><a href="#">contact</a></li> </ul> </header> <div class="container"> <div class="logo"> <h1>title</h1> <p><a href="#"></a> <a href="#">ランク</a> <a href="#">ランク</a></p> </div> </div> ▼HEAD内 <link href="グーグルフォントURL"> <script src="フォントアウェサムURL"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style type="text/css"> @charset "UTF-8"; body { position: relative; margin: 0; } body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: -100; display: block; height: 100vh; background-image: url(#mtr数_url#); background-size: cover; background-position: center; } .container { padding: 50vh 0 20px; text-align: center; } .logo h1 { color: #ffff00; font-family: 'Turret Road', cursive; font-size: 15vw; margin: -1em 0 10px; font-weight: 100; letter-spacing: 0.2em; } .logo a { text-decoration: none; font-family: 'Turret Road', cursive; color: #ff00ff; font-size: 18px; } header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; text-align: right; } header #nav { margin: 0; padding: 0; list-style: none; } header a { display: block; padding:15px; color:#ffff00; font-size: 12px; text-decoration: none; font-family: 'Turret Road', cursive; text-align: center; } header a:hover { background-color: rgba(255,255,255,0.3); } header .button { margin-right: 10px; padding: 0; border: none; outline: none; background-image: none; background-color: transparent; font-size: 30px; cursor: pointer; color: #ffff00; } </style> <script> $(function(){ var $nav = $('#nav'); $nav.hide(); $(".button").click(function(){ $nav.slideToggle(); }); }); </script>
編集パス
編集
記事削除
×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -