html - 如何使用 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 检查动画。