【WordPress】「Arkhe」で「ナビゲーションメニュー」をCSSアニメーションでカスタマイズしてみた！

2023/06/07

「ナビゲーションメニュー」のデザイン一覧

以下の一覧の中から、実際に使ってみたいデザインを選んで、「カスタムCSS」内にペーストすると、レイアウトが反映されるようになります！

気に入っていただけた場合には、ぜひ使ってみてください。

中央から左右にラインが伸びるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a {
	position: relative;
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
	opacity: .7;
}
.c-gnav__li>.c-gnav__a::after {
    content: '';
    position: absolute;
    bottom: .3rem;
    left: 10%;
    width: 80%;
    height: .5px;
    background: var(--ark-color--text);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}
.c-gnav__li.-current a::after,
.c-gnav__li a:hover::after {
    transform: scale(1, 1);
}

左から右にラインが伸びるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a {
 	position: relative;
}
.c-gnav__li>.c-gnav__a::after {
	content: '';
	position: absolute;
	bottom: .3rem;
	left: 10%;
	width: 80%;
	height: .5px;
	background: var(--ark-color--text);
	transition: all .3s;
	transform: scale(0, 1);
	transform-origin: left top;
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--gray);
	opacity: .7;
}
.c-gnav__li.-current a::after,
.c-gnav__li a:hover::after {
	transform: scale(1, 1);
}

項目の下に丸が表示されるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a {
 	position: relative;
	transition: opacity 0.6s ease;
}
.c-gnav__li>.c-gnav__a::after {
	content: '';
	position: absolute;
	display: block;
	width: 7px;
	height: 7px;
	background: var(--ark-color--main);
	border-radius: 50%;
	bottom: 12px;
	left: calc(50% - 5px);
	opacity: 0;
	transition: all 0.6s ease;
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
}
.c-gnav__li.-current a::after,
.c-gnav__li a:hover::after {
	opacity: 1;
}

下線が上に伸びて背景色が変わるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a {
 	position: relative;
	transition: color ease 0.3s;
	margin-right: 10px;
}
.c-gnav__li>.c-gnav__a::after {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: 0;
	background: var(--ark-color--main);
	transition: all ease 0.3s;
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--gray);
}
.c-gnav__li.-current a::after,
.c-gnav__li a:hover::after {
	height: 100%;
}

下線が右へ流れるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a {
	position: relative;
	transition: color ease 0.3s;
	margin-right: 10px;
}
.c-gnav__li>.c-gnav__a::before,
.c-gnav__li>.c-gnav__a::after {
	content: '';
	position: absolute;
	background: var(--ark-color--main);
	z-index: -1;
	height: 2px;
}
.c-gnav__li>.c-gnav__a::before {
	width: 0%;
	left: 0;
	bottom: 0;
	transition: width ease 0.4s;
}
.c-gnav__li>.c-gnav__a::after {
	width: 100%;
	left: 0;
	bottom: 0;
	transition: all ease 0.6s;
}
.c-gnav__li.-current a::before,
.c-gnav__li a:hover::before {
	width: 100%;
}
.c-gnav__li.-current a::after,
.c-gnav__li a:hover::after {
	left: 100%;
	width: 0%;
	transition: all ease 0.2s;
}

左側から下線が2本現れるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a span {
 	position: relative;
	line-height: 2.5;
}
.c-gnav__li>.c-gnav__a span::before,
.c-gnav__li>.c-gnav__a span::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 100%;
	left: 0;
	background: var(--ark-color--main);
	pointer-events: none;
}
.c-gnav__li>.c-gnav__a span::before {
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span::after {
	top: calc(100% + 4px);
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span:hover::before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 2, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
.c-gnav__li>.c-gnav__a span:hover::after {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
}

左右から下線が2本現れるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a span {
 	position: relative;
	line-height: 2.5;
}
.c-gnav__li>.c-gnav__a span::before,
.c-gnav__li>.c-gnav__a span::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 100%;
	left: 0;
	background: var(--ark-color--main);
	pointer-events: none;
}
.c-gnav__li>.c-gnav__a span::before {
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.c-gnav__li>.c-gnav__a span::after {
	top: calc(100% + 4px);
	transform-origin: 0% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.c-gnav__li>.c-gnav__a span:hover::before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
	transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span:hover::after {
	transform-origin: 100% 50%;
	transform: scale3d(1, 1, 1);
	transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
}

左右から下線が1本現れるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a span {
 	position: relative;
	line-height: 2.5;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 100%;
	left: 0;
	background: var(--ark-color--main);
	pointer-events: none;
	transform-origin: 50% 100%;
	transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
	clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}
.c-gnav__li>.c-gnav__a span:hover::before {
	transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
	clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}

.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
}

左側から文字上に棒線が伸びるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a span {
 	position: relative;
	line-height: 2.5;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a::before,
.c-gnav__li.-current::before,
.c-gnav__li.focus::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 1px;
	top: 50%;
	left: 5%;
	background: var(--ark-color--text);
	pointer-events: none;
	transform-origin: 100% 50%;
	transform: scale3d(0, 1, 1);
	transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a:hover::before,
.c-gnav__li.-current::before,
.c-gnav__li.focus::before {
	transform-origin: 0% 50%;
	transform: scale3d(1, 1, 1);
}

下から下線が2本現れるアニメーション

/* ===== ナビゲーションメニュー ===== */
.c-gnav__li {
	height: initial;
}
.c-gnav__li>.c-gnav__a span {
 	position: relative;
	line-height: 2.5;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span::before,
.c-gnav__li>.c-gnav__a span::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 100%;
	left: 0;
	background: var(--ark-color--main);
	pointer-events: none;
	opacity: 0;
	transform-origin: 50% 0%;
	transform: translate3d(0, 3px, 0);
	transition-property: transform, opacity;
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
}
.c-gnav__li>.c-gnav__a span::before,
.c-gnav__li>.c-gnav__a span:hover::after {
    transition-delay: 0.1s;
}
.c-gnav__li>.c-gnav__a span:hover::before {
	transition-delay: 0s;
}
.c-gnav__li>.c-gnav__a span:hover::before,
.c-gnav__li>.c-gnav__a span:hover::after {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
}
.c-gnav__li>.c-gnav__a span::after {
	content: '';
	top: calc(100% + 4px);
	width: 70%;
	left: 15%;
}
.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
	color: var(--ark-color--main);
}