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

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 インフラ サービス デザイン ブロックチェーン 広告 技術情報 農業