Q&A
前提・実現したいこと
メニューバーを中央に寄せたい
発生している問題・エラーメッセージ
jqueryでのcssが上書きされてしまうために、htmlでのcssが適用されません。
該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="./css/style.css"> <!-- favicon --> <link rel="shortcut icon" href="./img/favicon.ico"> <!-- FIXME:適応する画像がありません。画像の追加待ち <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> --> <!-- script files --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./js/jquery.meanmenu.min.js"></script> </head> <body> <!-- header --> <header> <div class="logo"> <a href="index.html"> <img src="./img/logo.png" alt="ChiePro"> </a> </div> <!-- global navigation menu --> <div class="nav_wrap"> <div class="nav_menu"> <nav> <ul> <a href="index.html"> <li> <span>ホーム</span> <span>home</span> </li> </a> <a href="index.html"> <li> <span>学習内容</span> <span>learning</span> </li> </a> <a href="index.html"> <li> <span>メンバー</span> <span>member</span> </li> </a> <a href="index.html"> <li> <span>アクセス</span> <span>access</span> </li> </a> <a href="index.html"> <li> <span>お問い合わせ</span> <span>contact</span> </li> </a> </ul> </nav> </div> </div> </header> <!-- image slider --> <div class="image_slider layout_margin_b"> <img src="#" alt="画像"> <p>画像</p> </div> <div id="site_box"> <!-- container --> <div class="layout_margin_b"> <p>container</p> </div> <!--left right frame--> <div class="l_r_container layout_margin_b"> <!-- left container --> <div class="left_container"> <p>left-container</p> </div> <!-- right container --> <div class="right_container"> <p>tight-centainer</p> </div> </div> </div> <!-- footer --> <footer> <p>footer</p> </footer> <script> $(function() { $('.nav_menu').meanmenu({ meanMenuClose: "x", // クローズボタン meanMenuCloseSize: "18rem", // クローズボタンのフォントサイズ meanMenuOpen: "<span /><span /><span />", // 通常ボタン meanRevealPosition: "right", // 表示位置 meanScreenWidth: "768", // 表示させるウィンドウサイズ(ブレイクポイント) }); }); </script> </body> </html> /** * nav css files */ .nav_menu{ display: table; height: 100%; } .nav_wrap{ width: 80%; float: left; } nav{ width: auto; display: table-cell; /* navigationをセンター寄せ */ vertical-align: middle; } .nav_menu ul li{ font-size: 1rem; padding: 1vh 3vw; float: left; border-right: 1px solid #383838; } .nav_menu span{ display: block; text-align: center; padding: .2vh; letter-spacing: 1px; color: #1a1a1a; } /* カーソルが乗っている時のスタイル */ .nav_menu li:hover{ color: #383838; background: #c4c4c4; transition: all .8s; }
回答2件
0
CSSは効いていると思います。レイアウトの崩れはfloatによる「解除ミス」では無いでしょうか？
※HTMLとCSSのコードは分けて提示されるか、<head>部に記述してください。このままコピペでは検証できません。
投稿2018/06/27 03:50
総合スコア3523
0
こんにちは。
style.cssにスタイルを入れて、jquery.meanmenu.min.jsの非圧縮版を使ってみました。
スタイルは有効のように見えます。（たとえば、メニューの項目をhoverすると、背景色が#c4c4c4に変わる）
ピントがずれていたら申し訳ないのですが、
ロゴ画像の高さが97pxくらい
nav_wrapの高さが、私の環境ですと、82px
この２つの高さを揃えるとどうでしょうか？
nav_wrapの高さを、上と下に余白をいれることで（上に余白を入れるだけでそろうかもしれません）
センターが揃わないでしょうか？
投稿2018/06/27 00:54
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。