Q&A
お問い合わせフォームのスタイルはどのように記述していますか？
それによってはロゴに中央揃えのスタイルを記述しても動かないことがあります。
現状はこんな感じでハンバーガーメニューを出すことが出来たのですが、以下の理想とする形に持っていきたいです。
jsのNavigationを消したら、背景のグレーとハンバーガーメニューが半分消えてしまったりしました。
消したりいじったりしたのですが全然ダメだったので、申し訳ないですが解説お願いします。
特にハンバーガーメニューの場所を設定にはどこをどういじればいいのか分かりませんでした。
【https://harigami.jp/cmp_rs?hsh=d77378a3-b465-42f6-bf90-ee3b22b3d5cb】
↑CSSです。
普段はsassで書いてるのですが、cssに直したら長くなってしまいました。
<!-- ナビゲーション --> <section class="megaMenu"> <div class="menu-container"> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="http://marioloncarek.com">About</a> <ul> <li><a href="#">School</a> <ul> <li><a href="#">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Research</a> <ul> <li><a href="#">Undergraduate research</a></li> <li><a href="#">Masters research</a></li> <li><a href="#">Funding</a></li> </ul> </li> <li><a href="#">Something</a> <ul> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> <li><a href="#">Sub something</a></li> </ul> </li> </ul> </li> <li><a href="#">News</a> <ul> <li><a href="#">Today</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Sport</a></li> </ul> </li> <li><a href="http://marioloncarek.com">Contact</a> <ul> <li><a href="#">School</a> <ul> <li><a href="#">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Empty sub</a></li> </ul> </li> </ul> </div> </div> </section>
/*global $ */ $(document).ready(function() { "use strict"; $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon'); //Checks if li has sub (ul) and adds class for toggle icon - just an UI $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric) $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>"); //Adds menu-mobile class (for mobile toggle menu) before the normal menu //Mobile menu is hidden if width is more then 959px, but normal menu is displayed //Normal menu is hidden if width is below 959px, and jquery adds mobile menu //Done this way so it can be used with wordpress without any trouble $(".menu > ul > li").hover(function(e) { if ($(window).width() > 943) { $(this).children("ul").stop(true, false).fadeToggle(150); e.preventDefault(); } }); //If width is more than 943px dropdowns are displayed on hover $(".menu > ul > li").click(function() { if ($(window).width() <= 943) { $(this).children("ul").fadeToggle(150); } }); //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow) $(".menu-mobile").click(function(e) { $(".menu > ul").toggleClass('show-on-mobile'); e.preventDefault(); }); //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow) });
【追記】
.menu-mobile { display: none; padding: 20px; position: absolute; top:0; left:0; &:after { // ハンバーガーメニューのアイコン content: "\f0c9"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2.5rem; padding: 0; // float: right; position: absolute; top:30px; left:20px; // position: relative; // top: 50%; transform: translateY(-25%); } }
jsのNavigationを消して↑こんな感じにしたらハンバーガーメニューが移動出来ました。
あとはレスポンシブなのですが、ロゴを真ん中におこうとしたのですが、うまくいきませんでした。
※見辛かったのでナビの背景をグレーにしました。
@media only screen and (max-width: 640px) { .header-main .logo { text-align: center; } }
【お問い合わせフォーム】
.header-main { z-index: 100; height: 80px; background-color: black; } .header-main-cover { max-width: 1140px; margin: 0 auto; } .header-main .logo { float: left; } .header-main .logo-img { height: 80px; margin-left: 10px; } .header-main .form { float: right; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #ffcc00), to(#ee8f0b)); background: linear-gradient(to bottom, #ffcc00 50%, #ee8f0b); -webkit-transition: all 0.5s; transition: all 0.5s; width: 200px; border: 2px solid black; border-radius: 8px; } .header-main .form:hover { background-color: #ffcc00; } .header-main .form a { color: rgba(5, 1, 1, 0.842); font-weight: bold; line-height: 60px; display: block; text-align: center; text-decoration: none; }
回答2件
0
css
1.menu-mobile { 2 display: inline-block; 3 font-size: 0; 4}
と追加すると、ハンバーガーが左に行くと思いますので、あとはご調整ください。
投稿2020/09/08 08:59
総合スコア36134
0
自己解決
ロゴを真ん中に移すのは以下で出来ました。
@media only screen and (max-width: 640px) { .header-main { .logo { float: none; text-align: center; } } }
投稿2020/09/08 09:52
総合スコア95
あなたの回答
tips
プレビュー
