垂直导航栏JS版

原创已于 2022-04-02 23:31:54 修改 · 1.9k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

于 2021-04-14 16:20:35 首次发布

html+css 专栏收录该内容

44 篇文章

订阅专栏

1.概述

对于该案例静态部分主要利用了无序列表、自定义列表以及定位

第一部分：

首先定义一个容器，为其父类
其次书写内容部分，使得内容的总高度为100%，也就是与父元素的高度相等
再者利用百分比来平均分配，使每个小的子类的高度总和为100%，这样设计的目的也就是为了更好的、更灵活的平均分配父类的高度
最后关于里面的小图标就利用定位来实现；样式在这里就不去叙述了
接下来直接上代码，看结果

<div class="wrapper">
  <nav class="side-nav" id="side-nav">
    <!-- 左一级导航开始 -->
    <ul id="side-nav-ul">
      <!-- 第一部分 -->
      <li class="hot" data-t="hot">
        <dl>
          <dt>热门出发地</dt>
          <dd>
            <em>北京</em>
            <em>上海</em>
            <em>广深</em>
            <em>西南</em>
            <em>国内其他</em>
          </dd>
        </dl>
      </li>

      <!-- 第二部分 -->
      <li class="hk" data-t="hk">
          <dl>
              <dt>港澳台 国内</dt>
              <dd>
                  <em>香港</em>
                  <em>澳门</em>
                  <em>台湾</em>
                  <em>国内其他</em>
              </dd>
          </dl>
      </li>

      <!-- 第三部分 -->
      <li class="jp" data-t="jp">
          <dl>
              <dt>日本 韩国</dt>
              <dd>
                  <em>东京</em>
                  <em>大阪</em>
                  <em>冲绳</em>
                  <em>北海道</em>
                  <em>福冈</em>
              </dd>
          </dl>
      </li>

      <!-- 第四部分 -->
      <li class="as" data-t="as">
          <dl>
              <dt>东南亚南亚</dt>
              <dd>
                  <em>泰国</em>
                  <em>新加坡</em>
                  <em>印尼</em>
                  <em>马来西亚</em>
                  <em>越南</em>
              </dd>
          </dl>
      </li>

      <!-- 第五部分 -->
      <li class="eu" data-t="eu">
          <dl>
              <dt>欧洲 美洲</dt>
              <dd>
                  <em>英国</em>
                  <em>法国</em>
                  <em>美国</em>
                  <em>加拿大</em>
              </dd>
          </dl>
      </li>

      <!-- 第六部分 -->
      <li class="au" data-t="au">
          <dl>
              <dt>澳新 中东非</dt>
              <dd>
                  <em>澳大利亚</em>
                  <em>新西兰</em>
                  <em>迪拜</em>
              </dd>
          </dl>
      </li>
    </ul>
  </nav>
</div>

<style>
.wrapper {
  height: 467px;
  background-color: skyblue;
}

.side-nav {
  /* 这里设置高度为100%，也就是继承父元素的高度，父元素有多高它就有多高 */
  height: 100%;
  width: 652px;
  position: relative;
}

.side-nav>ul {
  /* 注意，这里的100%也非常重要，因为如果省略了，它的height就是0  */
  /* 那么它的子盒子设置16.6%就没有意义了  */
  height: 100%;
}


.side-nav>ul>li {
  height: 16.66%;
  width: 296px;
  background-color: rgba(0,0,0,.45);
  position: relative;
  border-bottom: 1px solid #9e9e9e;
  /* box-sizing:border-box 怪异盒模型
  属性的作用就是让height属性是盒子的总高度，
  这种情况：在盒子的高度是百分比写的，但是盒子有边框的时候 */
  /* 此时就要让盒子的边框涵盖在height里面，就要使用box-sizing属性 */
  box-sizing: border-box;
}

.side-nav>ul>li:last-child {
  border-bottom: none;
}


.side-nav>ul>li dl {
  position: absolute;
  height: 48px;
  top: 50%;
  margin-top: -24px;
  left: 42px;
  color: #fff;
}

.side-nav>ul>li dl dt {
  font-size: 18px;
  height: 26px;
  line-height: 26px;
}


.side-nav>ul>li dl dd {
  font-size: 16px;
  height: 22px;
  line-height: 22px;
}

/*引入精灵图开始*/
.side-nav>ul>li::before {
  content: '';
  position: absolute;
  background-image: url(images/icons.png);
  top: 50%;
  left: 10px;
  /* background-color: #f40; */
}

.side-nav>ul>li.hot::before {
  width: 22px;
  height: 18px;
  background-position: -29px -399px;
  margin-top: -9px;
}


.side-nav>ul>li.hk::before {
  width: 18px;
  height: 21px;
  background-position: -28px -217px;
  margin-top: -10.5px;
  left: 13px;
}

.side-nav>ul>li.jp::before{
  width: 24px;
  height: 19px;
  background-position: -25px -171px;
  margin-top: -9.5px;
}

.side-nav>ul>li.as::before{
  width: 18px;
  height: 19px;
  background-position: -28px -262px;
  margin-top: -9.5px;
  left: 12px;
}

.side-nav>ul>li.eu::before{
  width: 20px;
  height: 14px;
  background-position: -29px -351px;
  margin-top: -7px;
  left: 11px;
}

.side-nav>ul>li.au::before{
  width: 18px;
  height: 17px;
  background-position: -28px -305px;
  margin-top: -8.5px;
  left: 12px;
}

.side-nav>ul>li.current {
  background-color: rgba(0, 0, 0, .63);
}
/*引入精灵图结束*/
</style>

最后效果如下：
在这里插入图片描述

第二部分

该部分的书写和第一部分几乎一致，只不过在该部分我们对其父元素利用了定位，使其能够与第一部分对齐
其代码如下：

<nav>
	<div>
<!-- 左二级导航开始 -->
    <div class="menus-box">
      <!-- 第一部分 -->
      <div class="menu" data-t="hot">
          <dl>
              <dt>港澳台</dt>
              <dd>
                  <a href="">香港</a>
                  <a href="">澳门</a>
                  <a href="">台北</a>
                  <a href="">高雄</a>
                  <a href="">香港迪士尼</a>
                  <a href="">香港海洋公园</a>
                  <a href="">交通接驳</a>
                  <a href="">澳门</a>
                  <a href="">塔新濠天地水舞间</a>
                  <a href="">澳门豪华自助 台北101</a>
                  <a href="">台湾美食</a>
              </dd>
          </dl>
          <dl>
              <dt>国内热门城市</dt>
              <dd>
                  <a href="">三亚</a>
                  <a href="">东北雪乡</a>
                  <a href="">大理</a>
                  <a href="">丽江</a>
                  <a href="">昆明</a>
                  <a href="">西双版纳</a>
                  <a href="">拉萨</a>
                  <a href="">成都</a>
                  <a href="">重庆</a>
                  <a href="">长白山</a>
                  <a href="">厦门</a>
                  <a href="">长沙</a>
                  <a href="">桂林北京</a>
                  <a href="">西安</a>
                  <a href="">敦煌</a>
                  <a href="">杭州</a>
                  <a href="">上海</a>
                  <a href="">无锡</a>
                  <a href="">南京</a>
                  <a href="">广州</a>
                  <a href="">黄山</a>
                  <a href="">莫干山</a>
                  <a href="">新疆</a>
                  <a href="">北海</a>
                  <a href="">九华山</a>
                  <a href="">太原</a>
                  <a href="">张家口</a>
              </dd>
          </dl>
          <dl>
              <dt>热门景点</dt>
              <dd>
                  <a href="">北京故宫</a>
                  <a href="">东北滑雪</a>
                  <a href="">恭王府</a>
                  <a href="">长城</a>
                  <a href="">青城山大熊猫基地</a>
                  <a href="">峨眉山</a>
                  <a href="">都江堰</a>
                  <a href="">长恨歌表演</a>
                  <a href="">兵马俑</a>
                  <a href="">大唐芙蓉园</a>
                  <a href="">三亚日游</a>
                  <a href="">厦门鼓浪屿</a>
                  <a href="">千岛湖</a>
                  <a href="">呼伦贝尔草原</a>
                  <a href="">希拉穆仁草原</a>
                  <a href="">大理日游</a>
                  <a href="">杭州</a>
                  <a href="">重庆两江夜游船票</a>
              </dd>
          </dl>
      </div>

      <!-- 第二部分 -->
      <div class="menu" data-t="hk">
          <dl>
              <dt>港澳台</dt>
              <dd>
                  <a href="#">香港</a>
                  <a href="#">澳门</a>
                  <a href="#">台北</a>
                  <a href="#">高雄</a>
                  <a href="#">香港迪士尼</a>
                  <a href="#">香港海洋公园</a>
                  <a href="#">交通接驳</a>
                  <a href="#">澳门塔</a>
                  <a href="#">新濠天地水舞间</a>
                  <a href="#">澳门豪华自助</a>
                  <a href="#">台北101</a>
                  <a href="#">台湾美食</a>
              </dd>
          </dl>
      </div>

      <!-- 第三部分 -->
      <div class="menu" data-t="jp">
          <dl>
              <dt>日本</dt>
              <dd>
                  <a href="#">东京</a>
                  <a href="#">大阪</a>
                  <a href="#">冲绳</a>
                  <a href="#">北海道</a>
                  <a href="#">札幌</a>
                  <a href="#">京都</a>
                  <a href="#">名古屋</a>
                  <a href="#">福冈</a>
                  <a href="#">长崎</a>
                  <a href="#">鹿儿岛</a>
                  <a href="#">JR</a>
                  <a href="#">Pass</a>
                  <a href="#">米其林餐厅</a>
                  <a href="#">东京迪士尼</a>
                  <a href="#">大阪环球影城</a>
                  <a href="#">冲绳一日游</a>
                  <a href="#">City</a>
                  <a href="#">Walk</a>
                  <a href="#">西瓜卡</a>
                  <a href="#">京都日游</a>
                  <a href="#">和服体验</a>
                  <a href="#">包车服务</a>
                  <a href="#">富士山日游</a>
              </dd>
          </dl>
      </div>

      <!-- 第四部分 -->
      <div class="menu" data-t="as">
          <dl>
              <dt>泰新马</dt>
              <dd>
                  <a href="#">普吉岛</a>
                  <a href="#">清迈</a>
                  <a href="#">曼谷</a>
                  <a href="#">苏梅岛</a>
                  <a href="#">甲米</a>
                  <a href="#">芭堤雅</a>
                  <a href="#">拜县</a>
                  <a href="#">新加坡</a>
                  <a href="#">马来西亚</a>
                  <a href="#">沙巴</a>
                  <a href="#">吉隆坡</a>
                  <a href="#">皇帝岛</a>
                  <a href="#">泰国人妖</a>
                  <a href="#">泰国丛林飞跃</a>
                  <a href="#">泰国spa按摩</a>
                  <a href="#">清迈夜间动物园</a>
                  <a href="#">泰拳表演清莱一日游</a>
                  <a href="#">新加坡环球影城</a>
                  <a href="#">新加坡日游</a>
                  <a href="#">新加坡滨海湾花园</a>
                  <a href="#">沙巴美人鱼岛</a>
                  <a href="#">沙巴红树林萤火虫</a>
              </dd>
          </dl>
          <dl>
              <dt>东南亚</dt>
              <dd>
                  <a href="#">巴厘岛</a>
                  <a href="#">长滩岛</a>
                  <a href="#">马尼拉</a>
                  <a href="#">薄荷岛</a>
                  <a href="#">美娜多芽庄</a>
                  <a href="#">岘港</a>
                  <a href="#">富国岛</a>
                  <a href="#">柬埔寨</a>
                  <a href="#">缅甸</a>
                  <a href="#">老挝</a>
                  <a href="#">文莱</a>
                  <a href="#">蓝梦岛</a>
                  <a href="#">巴厘岛SPA</a>
                  <a href="#">网红漂浮下午茶</a>
                  <a href="#">珍珠岛游乐园</a>
                  <a href="#">富国岛浮潜海钓</a>
                  <a href="#">吴哥窟</a>
                  <a href="#">西哈努克</a>
              </dd>
          </dl>
          <dl>
              <dt>西亚</dt>
              <dd>
                  <a href="#">马尔代夫</a>
                  <a href="#">斯里兰卡</a>
                  <a href="#">印度</a>
                  <a href="#">尼泊尔</a>
                  <a href="#">格鲁吉亚阿塞拜疆</a>
                  <a href="#">亚美尼亚</a>
              </dd>
          </dl>
      </div>

      <!-- 第五部分 -->
      <div class="menu" data-t="eu">
          <dl>
              <dt>欧洲</dt>
              <dd>
                  <a href="#">法国</a>
                  <a href="#">意大利</a>
                  <a href="#">土耳其</a>
                  <a href="#">俄罗斯</a>
                  <a href="#">西班牙</a>
                  <a href="#">瑞士</a>
                  <a href="#">英国</a>
                  <a href="#">希腊</a>
                  <a href="#">荷兰</a>
                  <a href="#">德国</a>
                  <a href="#">捷克</a>
                  <a href="#">葡萄牙</a>
                  <a href="#">奥地利</a>
                  <a href="#">瑞典</a>
                  <a href="#">丹麦</a>
                  <a href="#">挪威</a>
                  <a href="#">冰岛</a>
                  <a href="#">芬兰</a>
                  <a href="#">罗瓦涅米</a>
                  <a href="#">奥斯陆</a>
                  <a href="#">雷克雅未克</a>
                  <a href="#">因特拉肯</a>
                  <a href="#">巴塞罗那</a>
                  <a href="#">伦敦</a>
                  <a href="#">巴黎</a>
                  <a href="#">塞纳河</a>
                  <a href="#">慕尼黑</a>
                  <a href="#">普罗旺斯</a>
                  <a href="#">温莎日游</a>
                  <a href="#">巴黎迪斯尼</a>
                  <a href="#">伊斯坦布</a>
                  <a href="#">尔阿尔罕布拉宫</a>
                  <a href="#">唐顿庄园</a>
                  <a href="#">埃菲尔铁塔</a>
                  <a href="#">凡尔赛宫</a>
                  <a href="#">北欧破冰船</a>
                  <a href="#">极光之旅</a>
                  <a href="#">英国天空岛</a>
              </dd>
          </dl>
          <dl>
              <dt>美洲</dt>
              <dd>
                  <a href="#">美国</a>
                  <a href="#">加拿大</a>
                  <a href="#">墨西哥</a>
                  <a href="#">巴西</a>
                  <a href="#">阿根廷</a>
                  <a href="#">智利</a>
                  <a href="#">秘鲁</a>
                  <a href="#">玻利维亚</a>
                  <a href="#">洛杉矶</a>
                  <a href="#">纽约</a>
                  <a href="#">拉斯维加斯</a>
                  <a href="#">旧金山</a>
                  <a href="#">圣地亚哥芝加哥</a>
                  <a href="#">西雅图</a>
                  <a href="#">华盛顿</a>
                  <a href="#">奥兰多</a>
                  <a href="#">夏威夷</a>
                  <a href="#">塞班岛</a>
                  <a href="#">关岛</a>
                  <a href="#">环球影城</a>
                  <a href="#">迪士尼</a>
                  <a href="#">演出票</a>
                  <a href="#">尼亚加拉大瀑布</a>
                  <a href="#">帝国大厦</a>
                  <a href="#">奥特莱斯</a>
                  <a href="#">黄石国家公园</a>
                  <a href="#">纽约大都会博物馆</a>
                  <a href="#">美国大峡谷西峡</a>
                  <a href="#">拉斯维加斯摩天轮</a>
                  <a href="#">羚羊峡谷</a>
                  <a href="#">马蹄湾</a>
              </dd>
          </dl>
      </div>

      <!-- 第六部分 -->
      <div class="menu" data-t="au">
          <dl>
              <dt>澳新 南太平洋</dt>
              <dd>
                  <a href="#">墨尔本</a>
                  <a href="#">悉尼</a>
                  <a href="#">黄金海岸</a>
                  <a href="#">凯恩斯</a>
                  <a href="#">布里斯班奥克兰</a>
                  <a href="#">斐济</a>
                  <a href="#">珀斯</a>
                  <a href="#">圣灵群岛</a>
                  <a href="#">大堡礁</a>
                  <a href="#">墨尔本之星</a>
                  <a href="#">悉尼热气球</a>
                  <a href="#">水上飞机</a>
                  <a href="#">海港大桥</a>
                  <a href="#">皇后镇霍比特人村</a>
                  <a href="#">怀托莫萤火虫洞</a>
                  <a href="#">米尔福德峡湾</a>
                  <a href="#">新西兰滑雪</a>
                  <a href="#">瓦纳卡</a>
                  <a href="#"></a>
              </dd>
          </dl>
          <dl>
              <dt>中东非</dt>
              <dd>
                  <a href="#">迪拜</a>
                  <a href="#">摩洛哥</a>
                  <a href="#">毛里求斯</a>
                  <a href="#">埃及</a>
                  <a href="#">塞舌尔</a>
                  <a href="#">马达加斯加</a>
                  <a href="#">以色列</a>
                  <a href="#">肯尼亚</a>
                  <a href="#">南非</a>
                  <a href="#">伊朗</a>
                  <a href="#">约旦</a>
                  <a href="#">突尼斯</a>
                  <a href="#">迪拜</a>
                  <a href="#">塔法拉利主题公园</a>
                  <a href="#">迪拜七星帆船酒店用餐</a>
                  <a href="#">夜游迪拜河</a>
                  <a href="#">亚特兰蒂斯水上乐园</a>
                  <a href="#">动物大迁徙</a>
                  <a href="#">撒哈拉沙漠</a>
                  <a href="#">金字塔</a>
                  <a href="#">纳米比亚</a>
                  <a href="#"></a>
              </dd>
          </dl>
      </div>
      <!-- 左二级导航结束 -->
    </div>
  </nav>
</div>

<style>
	.side-nav .menus-box .menu {
  display: none;
  position: absolute;
  left: 296px;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, .63);
  color: #fff;
  padding: 16px;
  box-sizing: border-box;
  z-index: 999;
}

.side-nav .menus-box .menu a {
  color: #fff;
}

.side-nav .menus-box .menu a:hover {
  color: #20BD9A;
}

.side-nav .menus-box .menu a:active {
  color: #f40;
}

.side-nav .menus-box .menu dl {
  margin-bottom: 16px;
}

.side-nav .menus-box .menu dl dt {
  line-height: 30px;
  font-size: 18px;
}

.side-nav .menus-box .menu dl dd {
  line-height: 22px;
  font-size: 15px;
}

.side-nav .menus-box .menu.current {
  display: block;
}

</style>

效果如下：
在这里插入图片描述

第三部分

这一部分主要实现当鼠标移动到 “热门出发地”或者“东南亚南亚”等区域时，其对应的子菜单自动展开
当鼠标移出整个菜单区域时，则恢复到默认状态，也就是只显示第一部分的内容，第二部分区域的子菜单默认处于隐藏状态

//利用IIFE(也就是立即执行函数来做)
(function(){

  //获得元素
  var sideNavUl = document.getElementById('side-nav-ul');
  var sideNav = document.getElementById('side-nav');
  var sideNavLis = document.querySelectorAll('#side-nav-ul li');

  // 寻找所有menu
  var menus = document.querySelectorAll('.menus-box .menu');

  //事件委托
  //onmouseover与onmouseenter的区别就是，前者会冒泡，后者不会冒泡
  //因此在这里需要使用onmouseover
  sideNavUl.onmouseover = function (e) {

    //判断触发事件的这个元素的标签名小写过后是不是li标签
    //因为有的浏览器的标签名是小写有的是大写，因此在这里进行统一
    if(e.target.tagName.toLowerCase() == 'li'){

      // getAttribute--得到鼠标所触碰到的当前元素的属性值
      // 在这里也就是得到触碰到的li元素身上的data-t属性
        var t = e.target.getAttribute('data-t');

        // 排他操作--让所有的li都去掉current类名
        for(var j = 0; j < sideNavLis.length; j++){
          sideNavLis[j].className = sideNavLis[j].getAttribute('data-t');
        }

        //当前碰到的这个li，要加current类
        e.target.className += ' current';

        //寻找匹配的menu
        var themenu = document.querySelector('.menus-box .menu[data-t = ' + t + ']');

        //进行排他操作--让所有的menu都去掉 .current 类名
        for(var i = 0; i < menus.length; i++){
          menus[i].className = 'menu';
        }

        //而让鼠标移上去的对应的menu加上 .current 类名
        //当鼠标移到到相应的li标签上时，其对应的menu便会自动加上 .current 最后对应的display的属性值便为block
        themenu.className = 'menu current';
    }
  };

  // 当鼠标离开大盒子时，菜单要关闭
  sideNav.onmouseleave = function () {
    for(var i = 0; i < sideNavLis.length; i++){
      sideNavLis[i].className = sideNavLis[i].getAttribute('data-t');
      menus[i].className = 'menu';
    }
  };


})();