Css 关于单击事件的CSTranslation效果_Css

Css 关于单击事件的CSTranslation效果

css

Css 关于单击事件的CSTranslation效果,css,Css,我创建了一个切换菜单，比如，我想通过单击菜单按钮在隐藏和显示菜单上添加CSTranslation效果，那么我该怎么做呢代码如下： <!DOCTYPE html> <html class="" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta char

我创建了一个切换菜单，比如，我想通过单击菜单按钮在隐藏和显示菜单上添加CSTranslation效果，那么我该怎么做呢

代码如下：

<!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>


菜单演示
正如我看到的，您在ul上使用了display:none


如果要使用jquery转换，如滑动切换
或fadein
淡出，
这很好，但是如果你想使用css转换，你需要另一种方法。

您应该将其设置为高度
和/或宽度
到0（取决于您喜欢的效果），
然后创建另一个这样的类，每次单击都可以使用switchClass
（使用jqueryui）或addClass/removeClass
。然后将过渡设置为宽度/高度


你能发布你尝试过的代码吗？阅读转换文档（函数（$）{/***为小屏幕启用菜单切换。*/（函数（{var nav=$（'#站点导航'），按钮，菜单；if（！nav）return；button=nav.find（'.menu toggle'）；menu=nav.find（'.nav menu'）；if（！button）return；//如果菜单缺失或为空，则隐藏按钮。如果（！menu | |！menu.children（）.length）{button.Hide（）；return；}$（'.menu toggle'）。打开（'click'，function（）{nav.toggleClass（'toggled'）；}）；}）（；}）（jQuery）；//这是我忘记的JS代码！：将overflow:hidden
添加到第一个类中，这样它就不会在宽度/高度0上显示内容，并且不要忘记接受答案