グローバルメニューの表示方法
解決したいこと
レスポンシブル対応時に限定して、ページトップの位置でも、ナビゲーションメニューを表示できるようにしたいです。
最終的に実現したい画面は、上記の画像のものになります。
PC表示では、ヘッダー内で内容を通常表示、レスポンシブル対応時では、ヘッダーからスクロールすると、実現したい画面を表示できています。
しかし、ヘッダー表示時になると、開閉ボタンを押しても、上手く表示されません。
初心者のため、お力添えいただけると助かります。
よろしくお願いします。
HTML
<header id="header">
<h1 class="site-title"><a href="index.html"><img src="img/logo.png" alt="company-logo"></a></h1>
<nav id="g-navi">
<ul>
<li><a href="plan.html">HP制作</a></li>
<li><a href="coaching.html">ITコーチング</a></li>
<li><a href="food-support.html">飲食店支援</a></li>
<li><a href="about.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<div class="openbtn"><span></span><span></span><span></span></div>
CSS
#header {
display: flex;
max-width: 3500px;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0 2%;
height: 90px;
background-color: #141622e3;
}
#header .site-title {
line-height: 1px;
width: 90px;
}
#header ul {
display: flex;
}
#header li {
font-size: 1.1rem;
margin-left: 15px;
}
#header li a {
color: whitesmoke;
font-weight: bold;
font-size: 1.1em;
transition: all 0.3s ease;
filter: drop-shadow(1px 1px 2px #121212);
}
#header li a:hover {
opacity: 0.8;
color: #d192be;
}
/*スクロール時に切り替え*/
/*ボタン全体の形状*/
.openbtn{
display: none;
/*ボタンの位置*/
position:fixed;
top:10px;
right: 10px;
z-index: 500;
/*ボタンの形状*/
background:#616161;
cursor: pointer;
width: 50px;
height:50px;
border-radius: 4px;
}
/*ボタンのアイコン設定*/
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top:15px;
}
.openbtn span:nth-of-type(2) {
top:23px;
}
.openbtn span:nth-of-type(3) {
top:31px;
}
/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
animation-name: fadeDownAnime;
animation-duration: 0.7s;
animation-fill-mode: forwards;
opacity: 0;
display: block;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*========= ヘッダーナビゲーションのためのCSS ===============*/
/*.doneクラスがついたヘッダー*/
#header.dnone {
opacity: 0;/*透過0にして非表示に*/
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#header.dnone.panelactive {
opacity: 1;/*不透明にして出現*/
}
/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
#header.dnone #g-navi{
/*固定位置にして最背面に*/
position:fixed;
top: 0;
left: 0;
z-index: -1;
/*高さと幅*/
width:100%;
height: 100vh;
/*天地中央＆テキスト中央揃え*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
/*はじめは透過0に*/
opacity: 0;
transition: all 0.4s;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/
#header.dnone.panelactive #g-navi{
opacity: 1;/*不透明に*/
z-index:3;/*最前面に*/
background-color:#141622e3;
}
#header.dnone.panelactive #g-navi ul{
display:block;/*flexの横並びをblockにして縦並びに*/
}
/*リストの形状*/
#header.dnone.panelactive #g-navi li a{
color: whitesmoke;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
transition:all 0.3s;
text-align: left;
}
section{
position: relative;
z-index: 1;
}
#header.dnone.panelactive #g-navi li a:hover {
opacity: 0.8;
color: #d192be;
}
CSS（レスポンシブル対応）
@media screen and (max-width: 610px) {
#header {
height: 75px;
}
#header #g-navi {
display: none;
}
.openbtn {
display: block;
}
}
CSS（レスポンシブル対応）
//スクロールをするとハンバーガーメニューに変化するための設定を関数でまとめる
function FixedAnime() {
//ヘッダーの高さを取得
var headerH = $('#header').outerHeight(true);
var scroll = $(window).scrollTop();
if (scroll >= headerH){//ヘッダーの高さ以上までスクロールしたら
$('.openbtn').addClass('fadeDown');//.openbtnにfadeDownというクラス名を付与して
$('#header').addClass('dnone');//#headerにdnoneというクラス名を付与
}else{//それ以外は
$('.openbtn').removeClass('fadeDown');//fadeDownというクラス名を除き
$('#header').removeClass('dnone');//dnoneというクラス名を除く
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
FixedAnime();//スクロールをするとハンバーガーメニューに変化するための関数を呼ぶ
});
//ボタンをクリックした際のアニメーションの設定
$(".openbtn").click(function () {//ボタンがクリックされたら
$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
$("#header").toggleClass('panelactive');//ヘッダーにpanelactiveクラスを付与
});
$("#g-navi li a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
$("#header").removeClass('panelactive');//ヘッダーのpanelactiveクラスも除去
});
//リンク先のidまでスムーススクロール
//※ページ内リンクを行わない場合は不必要なので削除してください
$('#g-navi li a').click(function () {
var elmHash = $(this).attr('href');
var pos = $(elmHash).offset().top-0;
$('body,html').animate({scrollTop: pos}, 1000);
return false;
});
0 likes