0

モバイル対応メニューを作成しようとしていますが、主な問題は、クリックしてもナビゲーション ボタンが切り替わらないことです。これが私がこれまでに思いついたものです。HTML + JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function) {
        $('span.nav-btn').click(function() {
            $('ul.nav').slideToggle();
        });
    });
    </script>
</head>
<body>
    <header>
        <h1>Hamburger MENU</h1>
    </header>
        <nav>
            <span class="nav-btn"></span>
            <ul class="hamburger">
                <li><a href="#">Desktop 1</a></li>
                <li><a href="#">Desktop 2</a></li>
                <li><a href="#">Desktop 3</a></li>
                <li><a href="#">Desktop 4</a></li>
            </ul>
        </nav>

これはCSSです：

header {
background-color: #23DA43;
}

h1 {
width: 100%;
text-align: center;
padding: 10px 0 10px 0;
}

.hamburger {
background-color: #333;
color: #fff;
margin: 0;
list-style: none;
text-align: center;
}

.hamburger li {
display: inline-block;
}

.hamburger li a {
text-decoration: none;
font-size: 40px;
color: #fff;
}


@media screen and (max-width: 900px) {

.hamburger {
    text-align: left;
    display: none;
}

.hamburger li {
    display: block;
}

.nav-btn {
    display: block;
    background-color: #333;
    color: #fff;
    font-size: 40px;
    text-align: center;
    cursor: pointer;
}

.nav-btn:before {
    content: "Menu";
}

}

ご協力いただきありがとうございます。アレッサンドロ

4

2 に答える 2