CSS+JS实现可伸缩可折叠的左边侧栏项目导航菜单

技术频道 - html技术

CSS+JS实现可伸缩可折叠的左边侧栏项目导航菜单

作者:admin 时间:2023-5-9 0:27:14 浏览:

本文介绍一个左侧导航菜单，这个导航菜单是可折叠的，并且它可以在左侧缩进和伸展。这个导航菜单适合很多应用环境。

效果如图

demo download

示例介绍

本示例由CSS+JavaScript实现。

当点击第一层导航项目时，菜单可折叠或展开。
当点击第二层菜单项目时，我们可以给它一个点击事件，在右侧出现相应的内容。
当点击导航右上角的图标时，菜单向左缩进，最后菜单变成一列文字，其上端是一个按钮图标，当点击该图标时，菜单会向右推出。

HTML代码

<div id="ensconce">
  <h2>
    <img src="static/show.png">
    国内各地景点
  </h2>
</div>

<div id="open">
  <div class="navH">
    国内各地景点
    <span><img class="obscure" src="static/obscure.png"></span>
  </div>
  <div class="navBox">
    <ul>
      <li>
        <h2 class="obtain">北京景点<i></i></h2>
        <div class="secondary">
          <h3>故宫</h3>
          <h3>十三陵</h3>
          <h3>圆明园</h3>
          <h3>长城</h3>
          <h3>雍和宫</h3>
          <h3>天坛公园</h3>
        </div>
      </li>
      <li>
        <h2 class="obtain">南京景点<i></i></h2>
        <div class="secondary">
          <h3>栖霞寺</h3>
          <h3>夫子庙</h3>
          <h3>海底世界</h3>
          <h3>中山陵</h3>
          <h3>乌衣巷</h3>
          <h3>音乐台</h3>
        </div>
      </li>
    </ul>
  </div>
</div>

这个HTML结构比较清晰易理解。有两个并列的外层div，前一个是<div id="ensconce">...</div>，后一个是<div id="open">...</div>，前一个是隐藏菜单后显示的div，后一个是显示菜单后的div。

<h2 class="obtain">...</h2>是菜单项目，点击它后展开或折叠其对应的<div class="secondary">...</div>里面的<h3>...</h3>菜单。

JavaScript

本示例包含两个两个JS文件。

<script src="static/adapter.js"></script>
<script src="static/menu.js"></script>

adapter.js是实现文字和标签的大小随着屏幕的尺寸做变话等比缩放的功能，而menu.js是实现导航菜单的点击事件。具体编程请看程序里的注释文字。

CSS

本示例包含两个CSS文件。

<link rel="stylesheet" href="static/base.css">
<link rel="stylesheet" href="static/menu.css">

base.css是全局样式设置，而menu.css是菜单的样式设置。

#menu{...}是菜单的区域样式设置。这里设置高度（height）是100%，而 float:left; 是设置菜单区域在左侧，user-select:none; 是禁止文本复制粘贴。

#menu {
  overflow: hidden;
  height: 100%;
  float: left;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#menu #ensconce { ... } 是隐藏菜单后显示的div样式，而 #menu #ensconce h2 { ... } 是设置该div区域内文字的样式。

#menu #open { ... } 是设置导航菜单区域div打开的样式。

#menu #open .navH 设置导航菜单的头部位置及文字等样式。

#menu #open .navBox 设置导航菜单项目的区域，包括位置、高宽、文字等样式。

总结

本文介绍了CSS+JS实现可伸缩可折叠的左边侧栏项目导航菜单，这个导航菜单很大众化，并且其界面设计大气不花俏，应用场景很广。喜欢的朋友可直接收藏本页，或直接下载源码保存备用。

相关文章