如何使用HTML和CSS使菜单在单击时向右滑动？

Question

我有一个HTML页面，其中有一个侧边菜单栏，显示使用Django完成的仪表板列表。 我希望此菜单（左侧菜单）在登录时仅显示其中一部分，并在单击后完全显示。

html的代码如下所示：

 <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><span style="color:blue; font-weight:bold;">Dashboards</span></li> {% for Dashboard in dashboards %} <li><a href="{{ Dashboard.d_url }}" target="iframe_a">{{ Dashboard.d_name }}</a></li> {% endfor %} </ul> </div> 

因为我不熟悉jquery，所以我想知道是否有任何方法仅可使用css和javascript来做到这一点。 当我打开html文件时，它看起来像这样 点击图标后

Answer 1

尚不清楚您要做什么，但我知道这就像transition: left 1s; 或transition: transform 1s ； 当您按下按钮时，将切换一个用于left或transform: translateX(value);的类transform: translateX(value); 像这样的样式

但是，您还需要了解该菜单是否可以推送您的其他内容。

这是一个基本的过渡和一个基本的布局，我不确定它是否适合您的要求。 另外，对于IE9和更早版本的浏览器支持，您可能希望使用jQuery或jQuery UI检查动画

Answer 2

查看此javascript代码，它确实需要

 $("#menu-button").bind( "click", function() { $('#mobile-menu').toggleClass('open'); $('#overlay').show(0); }); $("#overlay").bind( "click", function() { $('#mobile-menu').removeClass('open'); $('#overlay').hide(0); //basically so that clicking outside closes the menu; but on mobile I think it's immediately undoing the add class above }); $('#menu-button').click(function(){ $(this).find('span').toggleClass('glyphicon-chevron-right glyphicon-chevron-left') });