WEBサイト制作
Q&A
Closed
解決したいこと
990px以上でナビゲーションを横並べにしたいのですが、方法がわかりません。
該当するソースコード
index.html
<div class="openbtn">
<span></span>
<span>MENU</span>
<span></span>
</div>
<!-- openbtn -->
<div id="main-nav">
<nav id="g-nav">
<div id="g-nav-list">
<ul>
<li class="current">
<a href="#">
トップ
</a>
</li>
<!-- current -->
<li><a href="#">お品書き</a></li>
<li><a href="#">こだわり</a></li>
<li><a href="#">交通アクセス</a></li>
</ul>
</div>
<!-- #g-nav-list -->
</nav>
<!-- #g-nav -->
<dl>
<dt>ご予約・お問い合わせ</dt>
<dd><a href="#">03-1234-5678</a></dd>
</dl>
<div class="circle-bg"></div>
</div>
style.css
/*=================================================
クリックしたら円形背景が拡大（下から）
=================================================*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav.panelactive {
width: 100%;
height: 100vh;
}
/*丸の拡大*/
.circle-bg {
position: fixed;
z-index: 3;
/*丸の形*/
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #3e2058;
/*丸のスタート位置と形状*/
left: calc(50% - 50px); /*50%から円の半径を引いた値*/
bottom: -50px;
transform: scale(0); /*scaleをはじめは0に*/
transition: all 0.6s; /*0.6秒かけてアニメーション*/
}
@media(min-width: 990px) {
.circle-bg {
display: none;
}
}
.circle-bg.circleactive {
transform: scale(50); /*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list {
display: none; /*はじめは表示なし*/
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list {
display: block; /*クラスが付与されたら出現*/
}
/*ナビゲーション*/
#g-nav ul {
opacity: 0; /*はじめは透過0*/
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
}
@media(min-width: 990px) {
#g-nav ul {
display: flex;
opacity: 1;
}
}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
opacity: 1;
}
/* 背景が出現後にナビゲーション li を表示 */
#g-nav.panelactive ul li {
animation-name: gnaviAnime;
animation-duration: 1s;
animation-delay: 0.2s; /*0.2 秒遅らせて出現*/
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes gnaviAnime {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@media(min-width: 990px) {
#g-nav.panelactive ul li {
animation: none;
opacity: 1;
}
}
/*リストのレイアウト設定*/
#g-nav ul li {
text-align: center;
}
#g-nav ul li a {
display: block;
position: relative;
color: #fff;
transition: all 0.3s;
padding: 15px;
}
@media(min-width: 990px) {
#g-nav ul li a {
color: #333;
padding: 34px 25px;
}
}
#g-nav ul li.current a::before,
#g-nav ul li a:hover::before {
content: '';
/*描画位置*/
position: absolute;
top: 48%;
left: 0;
/*線の形状*/
width: 10px;
height: 1px;
color: #6a2e9e;
background-color: #fff;
}
@media(min-width: 990px) {
#g-nav ul li.current a::before,
#g-nav ul li a:hover::before {
/*描画位置*/
top: 0;
left: 50%;
/*線の形状*/
width: 1px;
height: 20px;
background-color: #000;
/*線の動き1.4秒かけて動く。永遠にループ*/
animation-name: gnavipathmove;
animation-duration: 2.4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
opacity: 0;
}
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes gnavipathmove {
0% {
top: 0;
height: 0;
opacity: 0;
}
30% {
height: 20px;
opacity: 1;
}
100% {
top: 30px;
height: 0;
opacity: 0;
}
}
@media(min-width: 990px) {
#main-nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
#main-nav dl {
display: none;
}
@media(min-width: 990px) {
#main-nav dl {
display: block;
color: #fff;
text-align: center;
background-color: #3e2058;
padding: 20px 40px;
}
}
#main-nav dl dt {
font-size: 0.8rem;
}
#main-nav dl a {
color: #fff;
font-size: 1.2rem;
}
@media(min-width: 990px) {
#main-nav dl a {
font-size: 1.5vw;
}
}
#main-nav dl.telactive {
display: block;
position: fixed;
z-index: 9999;
left: 5%;
bottom: 30px;
width: 90%;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
animation-name: UpAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@media(min-width: 420px) {
#main-nav dl.telactive {
left: 20%;
width: 60%;
}
}
@media(min-width: 990px) {
#main-nav dl.telactive {
display: none;
}
}
script.js
/*===========================================================*/
/*クリックしたら円形背景が拡大（下から）*/
/*===========================================================*/
$(".openbtn").click(function () { //ボタンがクリックされたら
$(this).toggleClass('active'); //ボタン自身に activeクラスを付与し
$("#g-nav").toggleClass('panelactive'); //ナビゲーションにpanelactiveクラスを付与
$(".circle-bg").toggleClass('circleactive'); //丸背景にcircleactiveクラスを付与
$("#main-nav dl").toggleClass('telactive'); //電話エリアにtelactiveクラスを付与
});
$("#g-nav a").click(function () { //ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active'); //ボタンの activeクラスを除去し
$("#g-nav").removeClass('panelactive'); //ナビゲーションのpanelactiveクラスを除去
$(".circle-bg").removeClass('circleactive'); //丸背景のcircleactiveクラスを除去
$("#main-nav dl").removeClass('telactive'); //電話エリアのtelactiveクラスを除去
});
サイトデータ添付
1
