如何使用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);样式时，如this example

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

这是一个基本过渡和基本布局我不确定它是否符合您的要求。 此外，对于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')
});