ご質問・お見積り等お気軽にご相談ください
お問い合わせ
お問い合わせ

HTML, CSS, JavaScript/jQueryで、やや手の込んだメニューを３つ作ってみた。

HOME スタッフブログ HTML, CSS, JavaScript/jQueryで、やや手の込んだメニューを３つ作ってみた。

HTML, CSS, JavaScript/jQueryで、やや手の込んだメニューを３つ作ってみた。

投稿日：2023年10月30日 / 更新日：2023年10月30日
ajaxCSSHTMLjavascriptjQueryUX/UI

この度は、株式会社ウェブネーションをご訪問頂き、誠にありがとうございます。

今回は、HTML, CSS, JavaScript/jQueryを使って、やや手の込んだメニューを３つ作ってみましたので、実際に動かした時の動画とそのコードと共に紹介いたします。

最後までお読みいただけますと幸いです。

手の込んだメニューの制作について

執筆者の視点として、コンテンツ制作において、手の込んだ表現を使うことは、多くのコンテンツの利用者から注目が浴びやすくなる点で、多少ながら効果的な方法であると考えています。

例えば、美術館や博物館などの展示施設では、観客としてさまざまな作品を鑑賞すると思います。

その時、面白みのある作品や印象的な作品などが一度目に入ると、たとえそれらの施設を去った後でも、時々記憶として蘇ることはありませんでしょうか？

一度そのような作品に目を向ければ、忘れる確率は低くなると考えます。

今回は、この視覚的なメカニズムを、手の込んだ表現を含むWebサイト制作にも応用すれば、Webサイトの利用者から、多少注目が浴びるのではと思い、作ってみました。

実際のメニューの動作

実際に動かしたときの動画とそのコード（HTML, CSS, JavaScript/jQuery）は、下の通りになります。

実際に動かした時の動画

パターン１

画像

HTML / JavaScript(jQuery)

<div id="content">
	<div class="open-menu-button button001">
		<span>Click Here!</span>
	</div>
	<div class="menu-panel">
		<div class="menu001">
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>A</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>B</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>C</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>D</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>E</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>F</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>G</span>
				</div>
			</div>
			<div class="panel-button-container panel001">
				<div class="panel-button button101">
					<span>H</span>
				</div>
			</div>
			<div class="panel-button-container panel001 close-button">
				<div class="panel-button button101">
					<span>CLOSE</span>
				</div>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<script>
		$(function(){
			$('body').on('click', '.button001', function(){
				$('.mask').css({'display':'block'});
				$('.menu-panel').fadeIn(200);
				$('.menu001').addClass('show');
				$('.panel001').addClass('show');
				$('.menu-panel').addClass('show');
			});
			$(document).on('click', function(e){
				if($(e.target).closest('.mask').length > 0 || $(e.target).closest('.close-button').length > 0){
					$('.panel001').removeClass('show');
					$('.menu001').removeClass('show');
					$('.menu-panel').removeClass('show');
					$('.menu-panel').fadeOut(200);
				}
			});
		});
	</script>
	<script src="commonPjax.js"></script>
</div>
<div class="links">
	<a class="link-button link001" href="./blog20231021_001.html"></a>
	<a class="link-button link002" href="./blog20231021_002.html"></a>
	<a class="link-button link003" href="./blog20231021_003.html"></a>
</div>

CSS

body {
	background-color: #DFDFDF;
}
.open-menu-button {
	cursor: pointer;
	color: #ffffff;
	padding: 10px;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	text-align: center;
	position: absolute;
	height: fit-content;
	align-items: center;
	width: fit-content;
	user-select: none;
	border-radius: 10px;
	z-index: -2;
}
.button001 {
	background-color: #8e5091;
}
.menu-panel {
	display: none;
}
.menu-panel.show {
	display: flex;
}
.menu001, .panel001 {
	transform: scale(0);
	transition: all 0.5s;
}
.menu001.show, .panel001.show {
	transform: scale(1);
}
.panel001.show:nth-child(1) {transition-delay: 0.5s;}
.panel001.show:nth-child(2) {transition-delay: 0.5625s;}
.panel001.show:nth-child(3) {transition-delay: 0.625s;}
.panel001.show:nth-child(4) {transition-delay: 0.6875s;}
.panel001.show:nth-child(5) {transition-delay: 0.75s;}
.panel001.show:nth-child(6) {transition-delay: 0.8125s;}
.panel001.show:nth-child(7) {transition-delay: 0.875s;}
.panel001.show:nth-child(8) {transition-delay: 1.0s;}
.panel001.show:nth-child(9) {transition-delay: 1.0625s;}
.menu001 {
	width: 40%;
	height: fit-content;
	margin: auto;
	display: flex;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding:20px;
	text-align: center;
	position: absolute;
	justify-content: space-between;
	border-radius: 30px;
	flex-wrap: wrap;
}
.menu001 {
	background-color: #ab7bad;
}
.panel-button {
	color: #ffffff;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	margin: 10px;
	display: grid;
	text-align: center;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}
.button101 {
	background-color: #844483;
}
.panel001.close-button {
	height: fit-content;
	background-color: none;
	width: 100%;
	border-radius: 20px;
	padding: 0 10px;
}
.panel001.close-button > .button101 {
	width: 100%;
	height: 50px;
	border-radius: 20px;
	margin: 0;
	background-color: #a04579;
}
.panel001.close-button > .button101:hover {
	transform: scale(1.05);
}
.panel-button:not(.close-button):hover {
	transform: scale(1.2);
	transition: all 0.2s ease-in;
}
.close-button {
	width: 200px;
	height: 200px;
	font-size: 20px;
}
.mask {
	background-color: #000000;
	opacity: 0.5;
	display: none;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
.link-button {
	padding: 20px 15px;
	line-height: 0;
	border-radius: 100%;
	width: 10px;
	display: block;
	position: fixed;
	bottom: 10px;
	margin: 0 auto;
	z-index: -2;
}
.link001 { left: 0; right: 100px; background-color: #8e5091; }
.link002 { left: 0; right: 0; background-color: #505891;}
.link003 { left: 100px; right: 0; background-color: #508491;}

パターン２

画像

HTML / JavaScript(jQuery)

<div id="content">
	<div class="open-menu-button button002">
		<span>Click Here!</span>
	</div>
	<div class="menu-panel">
		<div class="menu002">
			<div class="panel-button panel002 button201 close-button">
				<span>CLOSE</span>
			</div>
			<div class="panel-button-container panel002-2">
				<div class="panel-button button202">
					<span>I</span>
				</div>
			</div>
			<div class="panel-button-container panel002-2">
				<div class="panel-button button202">
					<span>J</span>
				</div>
			</div>
			<div class="panel-button-container panel002-2">
				<div class="panel-button button202">
					<span>K</span>
				</div>
			</div>
			<div class="panel-button-container panel002-2">
				<div class="panel-button button202">
					<span>L</span>
				</div>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<script>
		$(function(){
			$('body').on('click', '.button002', function(){
				$('.mask').css({'display':'block'});
				$('.menu-panel').fadeIn(200);
				$('.menu002').addClass('show');
				$('.panel002').addClass('show');
				$('.panel002-2').addClass('show');
				$('.menu-panel').addClass('show');
			});
			$(document).on('click', function(e){
				if($(e.target).closest('.mask').length > 0 || $(e.target).closest('.close-button').length > 0){
					$('.panel002').removeClass('show');
					$('.panel002-2').removeClass('show');
					$('.menu002').removeClass('show');
					$('.menu-panel').removeClass('show');
					$('.menu-panel').fadeOut(200);
				}
			});
		});
	</script>
	<script src="commonPjax.js"></script>
</div>
<div class="links">
	<a class="link-button link001" href="./blog20231021_001.html"></a>
	<a class="link-button link002" href="./blog20231021_002.html"></a>
	<a class="link-button link003" href="./blog20231021_003.html"></a>
</div>

CSS

body {
	background-color: #DFDFDF;
}
.open-menu-button {
	cursor: pointer;
	color: #ffffff;
	padding: 10px;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	text-align: center;
	position: absolute;
	height: fit-content;
	align-items: center;
	width: fit-content;
	user-select: none;
	border-radius: 10px;
	z-index: -2;
}
.button002 {
	background-color: #505891;
}
.menu-panel {
	display: none;
}
.menu-panel.show {
	display: flex;
}
.menu002, .panel002 {
	transform: scale(0);
	transition: all 0.5s;
}
.menu002.show, .panel002.show {
	transform: scale(1);
}
.menu002 {
	width: 40%;
	height: fit-content;
	margin: auto;
	display: flex;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding:20px;
	text-align: center;
	position: absolute;
	justify-content: space-between;
	border-radius: 30px;
	flex-wrap: wrap;
}
.menu002 {
	width: fit-content;
	border-radius: 100%;
	background: none;
}
.panel-button {
	color: #ffffff;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	margin: 10px;
	display: grid;
	text-align: center;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}
.panel-button:not(.close-button):hover {
	transform: scale(1.2);
	transition: all 0.2s ease-in;
}
.panel-button.button202:hover {
	transform: scale(1.2) rotate(-90deg);
}
.button201.close-button {
	background-color: #464484;
}
.close-button {
	width: 200px;
	height: 200px;
	font-size: 20px;
}
.panel-button-container.panel002-2 {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	display: table;
	transition: all 0.5s;
	transform: rotate(-90deg);
}
.button202 {
	background-color: #3a379e;
	transform: rotate(-90deg);
}
.panel002-2.show:nth-child(2) {transition-delay: 0.5s; transform: rotate(90deg) translate(0px, 200px);}
.panel002-2.show:nth-child(3) {transition-delay: 0.5s; transform: rotate(90deg) translate(200px, 0px);}
.panel002-2.show:nth-child(4) {transition-delay: 0.5s; transform: rotate(90deg) translate(0px, -200px);}
.panel002-2.show:nth-child(5) {transition-delay: 0.5s; transform: rotate(90deg) translate(-200px, 0px);}
.mask {
	background-color: #000000;
	opacity: 0.5;
	display: none;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
.link-button {
	padding: 20px 15px;
	line-height: 0;
	border-radius: 100%;
	width: 10px;
	display: block;
	position: fixed;
	bottom: 10px;
	margin: 0 auto;
	z-index: -2;
}
.link001 { left: 0; right: 100px; background-color: #8e5091; }
.link002 { left: 0; right: 0; background-color: #505891;}
.link003 { left: 100px; right: 0; background-color: #508491;}

パターン３

画像

HTML / JavaScript(jQuery)

<div id="content">
	<div class="open-menu-button button003">
		<span>Click Here!</span>
	</div>
	<div class="menu-panel">
		<div class="menu003">
			<div class="panel003 head003">
				<span>MENU</span>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>M</span>
				</div>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>N</span>
				</div>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>O</span>
				</div>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>P</span>
				</div>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>Q</span>
				</div>
			</div>
			<div class="panel-button-container panel003">
				<div class="panel-button button301">
					<span>R</span>
				</div>
			</div>
			<div class="panel-button-container panel003 close-button">
				<div class="panel-button button301">
					<span>CLOSE</span>
				</div>
			</div>
		</div>
		<div class="mask"></div>
	</div>
	<script>
		$(function(){
			$('body').on('click', '.button003', function(){
				$('.mask').css({'display':'block'});
				$('.menu-panel').fadeIn(200);
				$('.menu003').addClass('show');
				$('.panel003').addClass('show');
				$('.menu-panel').addClass('show');
			});
			$(document).on('click', function(e){
				if($(e.target).closest('.mask').length > 0 || $(e.target).closest('.close-button').length > 0){
					$('.panel003').removeClass('show');
					$('.menu003').removeClass('show');
					$('.menu-panel').removeClass('show');
					$('.menu-panel').fadeOut(200);
				}
			});
		});
	</script>
	<script src="commonPjax.js"></script>
</div>
<div class="links">
	<a class="link-button link001" href="./blog20231021_001.html"></a>
	<a class="link-button link002" href="./blog20231021_002.html"></a>
	<a class="link-button link003" href="./blog20231021_003.html"></a>
</div>

CSS

body {
	background-color: #DFDFDF;
}
.open-menu-button {
	cursor: pointer;
	color: #ffffff;
	padding: 10px;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	text-align: center;
	position: absolute;
	height: fit-content;
	align-items: center;
	width: fit-content;
	user-select: none;
	border-radius: 10px;
	z-index: -2;
}
.button003 {
	background-color: #508491;
}
.menu-panel {
	display: none;
}
.menu-panel.show {
	display: flex;
}
.menu003, .panel003 {
	transform: scale(0);
	transition: all 0.5s;
}
.menu003.show, .panel003.show {
	transform: scale(1);
}
.menu003 {
	width: 40%;
	height: fit-content;
	margin: auto;
	display: flex;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding:20px;
	text-align: center;
	position: absolute;
	justify-content: space-between;
	border-radius: 30px;
	flex-wrap: wrap;
}
.menu003 {
	background-color: #7bad9a;
}
.panel-button {
	color: #ffffff;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	margin: 10px;
	display: grid;
	text-align: center;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}
.close-button {
	width: 200px;
	height: 200px;
	font-size: 20px;
}
.panel003 {
	width: 100%;
	height: fit-content;
}
.panel003.head003 {
	margin: 10px 0;
	color: #ffffff;
}
.panel-button-container.panel003, .panel003.close-button {
	max-height: 0;
	transition: max-height 0.5s ease-out, visibility 0.5s ease-out;
	visibility: hidden;
}
.panel003.show:not(:first-child) {transition-delay: 0.5s; max-height: 100px; visibility: visible;}
.button301 {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	margin: 10px 0;
	padding: 10px 0;
	background-color: #317159;
}
.panel-button.button301:hover {
	transform: scale(1.05);
}
.panel003.close-button.show > .button301 {
	padding: 10px 0;
}
.panel003.close-button > .button301 {
	padding: 0;
	background-color: #4b9a47;
}
.mask {
	background-color: #000000;
	opacity: 0.5;
	display: none;
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
.link-button {
	padding: 20px 15px;
	line-height: 0;
	border-radius: 100%;
	width: 10px;
	display: block;
	position: fixed;
	bottom: 10px;
	margin: 0 auto;
	z-index: -2;
}
.link001 { left: 0; right: 100px; background-color: #8e5091; }
.link002 { left: 0; right: 0; background-color: #505891;}
.link003 { left: 100px; right: 0; background-color: #508491;}

補足

コードの中に、commonPjax.jsというファイル名がありますが、このファイルの詳細については、一度こちらのブログをご覧ください。

最後に

いかがでしたでしょうか？

Webサイト制作において、やや手の込んだメニューを表現するのは、Webサイトの利用者に注目されるようになりますし、記憶に残るという点でも期待できるかもしれませんね。

今回はここまでとさせていただきます。

最後までお読みいただき、誠にありがとうございます。

この記事を書いた人
通りすがりのエンジニアB
通りすがりのエンジニアB（匿名）です。
API BLOG Docker NEWS Node.JS PHP PostgreSQL Python ReactNative Ruby UX/UI Youtube インフラ サービス デザイン ブロックチェーン 広告 技術情報 農業