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

【问题标题】：How to make menu to slide right on click using HTML and CSS?如何使用 HTML 和 CSS 使菜单在单击时向右滑动？
【发布时间】：2015-06-03 00:29:55
【问题描述】：

我有一个 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 文件时，它看起来像这样点击图标后

【问题讨论】：

您能否显示 html 输出而不是模板代码和到目前为止的 css。此外，一个 jsfiddle 会很有用，并且可以更详细地描述“单击时向右滑动”的含义
我无法在此处添加快照，因为声誉问题

标签： html css django django-templates css-animations

【解决方案1】：

不是很清楚你要做什么，但我知道这类似于transition: left 1s; 或transition: transform 1s；当您按下按钮时，会切换一个用于更改 left 或 transform: translateX(value); 样式的类，例如 this example

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

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

【讨论】：

我正在寻找您发布的答案。但它对我不起作用，当我将代码复制粘贴到 plunker 并在那里运行时。
请更新一个 plunk 否则我们不知道你在做什么。并请删除您的问题不需要的所有代码
你能看到我更新的代码吗，我在这里只提到了充当侧边栏的 div。我需要这个侧边栏在点击时进出
可能是因为我使用 django 和 html 无法正常工作。是吗？？
对不起，您并不清楚您需要做什么，您只留下一个html并说您需要滑动菜单。我只能理解您需要在 .sidebar 元素上添加效果，在这种情况下，我已经编写的示例应该可以正常工作，使用 position: absolute, left: 0; 并固定 width 用于显示状态并使用 transform: translateX(-100%); 用于隐藏状态

【解决方案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')
});

【讨论】：