简单的侧边导航栏制作

最新推荐文章于 2025-05-09 18:24:41 发布

一粟102

最新推荐文章于 2025-05-09 18:24:41 发布

阅读量343

点赞数 2

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/2302_78593467/article/details/134477184

版权

## 1.案例需求

制作一个简单的侧边导航栏

## 2.编程思路

先看好实例图，想好大致的框架，然后就可以一步步的完善和做好

## 3.案例源码

说明：我在上面添加了注释，大家可以看看。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/text.css" />
    <style>
 .nav2 {
    width: 264px;
    height: 578px;
    background-color:#9f9d9d;//设置背景颜色
    overflow: hidden;//用于解决父级容器的高度塌陷问题
    position: relative/absolute;//调整导航栏在浏览器中的位置,相对定位与绝对定位任意选用
    top:0;
    left:0;
  }
 .nav2 ul{
    list-style: none;//去除无序列表前面自带的小圆点
  }
  .nav2 li {
    padding-left:33px;//导航栏内字体与上边框，左边框的距离
    padding-top:8px;
    height: 55px;
    line-height:2;//用于导航栏内的字体垂直居中
  }
  .nav2 li a {
    color: #fff;
    text-decoration: none;//去除下划线
    display: block;
  }
  .nav2 li div{
    //调整右侧指向箭头的位置,相对定位与绝对定位任意选用，大家自己任意调整（我默认写0）
    width: 50px;
    height: 50px;
    text-align: center;
    position: relative/absolute;
    top: 0;
    left: 0;
  }
  .nav2 li:hover {
    //鼠标触发事件，碰到触发颜色改变和手势出现
    background-color:#f36501;
    cursor: pointer;
  }
        
    </style>
  </head>
  <body>
<div class="nav2">
      <ul>
        <li>
          <a href="#"
            >手机
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >电视
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >家电
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >笔记本 平板
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >出行 穿戴
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >耳机 音箱
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >健康 儿童
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >生活 箱包
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >智能 路由器
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
        <li>
          <a href="#"
            >电影 配件
            <div><img src="images/jiantou-r.png" alt="" /></div
          ></a>
        </li>
      </ul>
    </div>
</body>
</html>

为了更加方便清楚的显示样式，我采用了内部样式。

##3图片展示

说明：截图的时候，鼠标触发手势没有出来，在自己电脑上操作能出来。

## 4.技术细节
` 提示:这里采用的是无序列表的方式，导航栏右侧的箭头指向图标是在阿里巴巴矢量图标库里面找的，然后添加进去的。

阿里巴巴矢量图标库网址：iconfont-阿里巴巴矢量图标库

##5.总结

最后大家如果有不懂的地方，可以留言讨论。