Help us understand the problem. What is going on with this article?

ドロワーメニューとアコーディオンメニューを組み合わせてみた

今回は、ドロワーメニューの中にアコーティオンメニューを組み込んでみました。

ドロワーメニューについては、前回やっています。
興味があれば、是非参考にしてくださいね。
ドロワーメニューを作ってみた2

また、アコーディオンメニューについては、次を参考にされてください。
アコーディオンメニューをやってみた2

ソース

では、いつもどおりソースを載せておきますね。

drower_practice.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ドロワーメニュー 練習</title>
    <link rel="stylesheet" type="text/css" href="./css/slide.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="./js/slide.js"></script>
</head>

<body>
    <div class="drower_menu">
        <img src="./img/drower_open.png" alt="drower_open" id="drower_open" class="flag_on">
        <img src="./img/drower_close.png" alt="drower_close" id="drower_close" class="flag_off">
        <nav id="drower_menu_list">
            <ul class="close">
                <div class="accordion">
                    <li><a href="#">メニュー1</a></li>
                    <!-- アコーティオンメニュー -->
                    <ul>
                        <li><a href="#">サブメニュー1.1</a></li>
                        <li><a href="#">サブメニュー1.2</a></li>
                    </ul>
                </div>

                <div class="accordion">
                    <li><a href="#">メニュー2</a></li>
                    <ul>
                        <li><a href="#">サブメニュー2.1</a></li>
                        <li><a href="#">サブメニュー2.2</a></li>
                    </ul>
                </div>

                <div class="accordion">
                    <li><a href="#">メニュー3</a></li>
                    <ul>
                        <li><a href="#">サブメニュー3.1</a></li>
                        <li><a href="#">サブメニュー3.2</a></li>
                    </ul>
                </div>

                <div class="accordion">
                    <li><a href="#">メニュー4</a></li>
                    <ul>
                        <li><a href="#">サブメニュー4.1</a></li>
                        <li><a href="#">サブメニュー5.2</a></li>
                    </ul>
                </div>

                <div class="accordion">
                    <li><a href="#">メニュー5</a></li>
                    <ul>
                        <li><a href="#">サブメニュー5.1</a></li>
                        <li><a href="#">サブメニュー5.2</a></li>
                    </ul>
                </div>
            </ul>
        </nav>
    </div>
</body>

</html>
slide.css
.drower_menu img {
    position: fixed;
    top: 20px;
    right: 20px;
    display: inline-block;
    opacity: 1;
    transform: translateX(0);
    transition: all .5s;
}

.drower_menu img.flag_on {
    z-index: 100;
    opacity: 1;
}

.drower_menu img.flag_on:hover {
    cursor: pointer;
}

.drower_menu img.flag_off {
    z-index: 99;
    opacity: 0;
}

#drower_menu_list {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 0;
    padding-top: 100px;
    background-color: rgb(16, 69, 153, 0.8);
    transform: translateX(250px);
    transition: all .5s;
}

#drower_menu_list ul {
    list-style: none;
}

#drower_menu_list li {
    text-align: left;
    padding: 10px 0;
    list-style: none;
}

#drower_menu_list a {
    color: white;
    text-decoration: none;
}

#drower_menu_list.open {
    transform: translateX(0)
}

.accordion ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.accordion ul li {
  margin: 0;
  margin-left: 30px;
  padding: 0;
}

.accordion a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
slide.js
$(function ($) {

    // ドロワーメニューの三本線をクリックした時、メニューが開く
    $('#drower_open').on('click', function () {
        if ($(this).hasClass('flag_on')) {
            $(this).removeClass('flag_on');
            $(this).addClass('flag_off');
            $('#drower_close').removeClass('flag_off');
            $('#drower_close').addClass('flag_on');
            $('#drower_menu_list').removeClass('close');
            $('#drower_menu_list').addClass('open');
        }
    });

    // ドロワーメニューの×をクリックした時、メニューを閉じる
    $('#drower_close').on('click', function () {
        if ($(this).hasClass('flag_on')) {
            $(this).removeClass('flag_on');
            $(this).addClass('flag_off');
            $('#drower_open').removeClass('flag_off');
            $('#drower_open').addClass('flag_on');
            $('#drower_menu_list').removeClass('open');
            $('#drower_menu_list').addClass('close');
        }
    });

    // ドロワーメニューをクリックした時、サブメニューを開く
    $('.accordion li').click(function () {
        $(this).next('ul').slideToggle();
    });
});

解説

実装方法はドロワーメニューを作ってみた2アコーディオンメニューをやってみた2を組み合わせています。
なので、難しいことはやっていません。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away