如何使用 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 之类的东西；当您按下按钮时，会切换 class 以更改 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')
});

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

How to make menu to slide right on click using HTML and CSS?

html

css

django

django-templates

css-animations