0

DEMOのようなトグル メニューを作成します。メニュー ボタンをクリックして非表示および表示メニューに csstransition 効果を追加したいのですが、どうすればよいですか?

コードは次のとおりです。

<!DOCTYPE html>
<html class="" lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Menu Demo</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <header">
        <nav id="site-navigation" class="navigation main-navigation" role="navigation">
            <h3 class="menu-toggle">Menu</h3>
            <div class="nav-menu">
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                </ul>
            </div>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, consequuntur, nemo exercitationem in eum adipisci non eligendi sed ratione delectus nam quisquam ipsa debitis molestiae assumenda facere odit laborum officiis!</p>
        </div>
</body>
</html>
4

1 に答える 1