P71-前端基础项目开发-网页导航栏开发首页header头部左侧导航栏

1.概述

在首页header部分现在还有一个左侧的导航栏没有开发，下面就来完成这个导航栏。

2.首页header头部左侧导航栏

2.1.左侧导航栏需求

2.2.创建左侧导航栏结构

左侧的导航栏实际上是全部商品分类的下拉框，因此我们在全部商品分类中添加左侧导航栏内容

      <!-- 创建一个中间导航条的容器 --><div class="nav-wrapper"><!-- 创建导航条 --><ul class="nav clearfix"><li class="all-goods-wrapper" ><a class="all-goods" href="#">全部商品分类</a><!-- 创建一个左侧导航菜单 --><ul class="left-menu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></li>

2.3.未调整样式的效果

2.4.左侧导航栏添加样式

在index.css文件中设置左侧导航栏样式

• 修改header导航条css选择器
  

• 设置为只选择.nav子元素不包含孙子元素
  

• 左侧导航栏不在浮动
  

• 在上面的.nav>li 下面添加左侧导航栏样式内容

/* ##########设置左侧导航条的样式########## */
.all-goods-wrapper {position: relative;/* background-color: red; */
}
/* 设置左侧导航栏容器尺寸 */
.left-menu {width: 234px;height: 420px;line-height: 1;background-color: rgba(0, 0, 0, .6);padding: 20px 0;z-index: 999;/* 参考父级元素.all-goods-wrapper定位 */position: absolute;/* 调整细节位置 */left: -120px;}/* 设置文字尺寸 */
ul .left-menu li a {display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}/* 设置文字hover效果 */
ul .left-menu li a:hover {color: white;background-color: #FF6700;
}/* 设置图标样式 */
.left-menu a i {float: right;line-height: 42px;
}

2.5.首页样式完整代码

/* 主页index.html的样式表 *//* 顶部导航条的容器 */
.topbar-wrapper {/* 设置宽度全屏 */width: 100%;/* 设置高度和行高 */height: 40px;line-height: 40px;/* 设置背景颜色 */background-color: #333;
}/* 设置超链接的颜色 */
.topbar a {font-size: 12px;color: #b0b0b0;display: block;
}/* 设置鼠标放到文字上的hover效果 */
.topbar a:hover {color: #ffffff;
}/* 设置中间分割线 */
.topbar .line {color: #424242;font-size: 12px;margin: 0 8px;
}/* -----------------------设置顶部左侧导航栏浮动----------------------- */
.service, .topbar li {float: left;
}/* 设置下载app的下拉   */
.app .qrcode {width: 124px;/* height: 148px; */background-color: silver;/* display: none; *//* 设置二维码容器绝对定位，让他浮动起来 */position: absolute;/* 调整二维码位置 */left: -40px;background-color: #fff;/* 设置二维码容器阴影效果 */box-shadow: 0 0 10px rgba(0, 0, 0, .3);/* 设置二维码下拉动态效果需要使用height的变化来实现：设置默认高度为0不显示二维码容器 */height: 0px;overflow: hidden;/* transition: 用于为样式设置过渡效果:设置二维码下拉效果 */transition: height 0.3s;/* 设置二维码文字样式 */line-height: 1;text-align: center;}/* 设置二维码图片尺寸 */
.app .qrcode img {width: 90px;margin: 17px;margin-bottom: 10px;
}/* 设置二维码中的文字 */
.app .qrcode span {font-size: 14px;color: #000;
}/* 设置app相对定位 */
.app {position: relative;
}
/* 设置app下的小三角 */
.app::after {content: '';position: absolute;width: 0;height: 0;border: 8px solid transparent;border-top: none;border-bottom-color: #fff;bottom: 0;left: 0;right: 0;margin: auto;/* 设置下拉小三角默认不显示 */display: none;
}/* 设置二维码和下拉三角hover显示效果 */
.app:hover .qrcode,
.app:hover::after {display: block;height: 148px;
}/* -----------------------设置顶部右侧导航栏浮动----------------------- */
.shop-cart, .user-info {float: right;
}/* -----------------------设置购物车样式----------------------- *//* 设置购物车左边距 */
.shop-cart {margin-left: 26px;
}/* 设置购物车文字相关属性 */
.shop-cart a {width: 120px;background-color: #424242;text-align: center;
}/* 设置购物车图标和文字间距 */
.shop-cart i {margin-right: 2px;
}/* 设置购物车hover效果：注意hover要设置在父元素上，否则鼠标移到购物车子菜单会出现hover效果失效。 */
.shop-cart:hover a {background-color: #ffffff;color: #FF6700;
}/* ---------------------------------设置首页header部分样式--------------------------------- */.header-wrapper{/* background-color: red; */position: relative;
}/* 设置首页header部分 */
.header {height: 100px;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: #FF67; */
}/* 设置logo的h1文字 */
.header .logo {float: left;margin-top: 22px;width: 55px;height: 55px;position: relative;/* 设置超出logo宽和高的部分隐藏 */overflow: hidden;text-indent: -100px;
}/* 统一设置logo的超链接 */
.header .logo a {/* 这里需要开启绝对定位，让a标签变为块元素。否则设置的宽高不生效，背景图片将不显示 */position: absolute;width: 55px;height: 55px;/* 设置logo图标默认显示位置左边0px位置 */left: 0px;background-color: #FF6700;background-image: url(../img/mi-logo.png);/* 设置背景图片对齐方式 */background-position: center;/* 设置两个logo图标左右滑动过度效果 */transition: left 0.3s;}
/* 设置home图片 */
.header .logo .home {background-image: url(../img/mi-home.png);/* 设置home图标默认显示在左边55px位置 */left: -55px;
}/* 设置鼠标移入以后两个图标的位置 */
.header .logo:hover .mi {left: 55px;
}.header .logo:hover .home {left: 0;
}/* -------设置header导航栏容器------------- */
.header .nav-wrapper {float: left;margin-left: 7px;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: aqua; */
}/* 设置导航条下的li */
.nav>li {float: left;/* 调试时可以打开查看调试效果，调试完毕将他注释掉 *//* background-color: #888888; */
}/* ##########设置左侧导航条的样式########## */
.all-goods-wrapper {position: relative;/* background-color: red; */
}
/* 设置左侧导航栏容器尺寸 */
.left-menu {width: 234px;height: 420px;line-height: 1;background-color: rgba(0, 0, 0, .6);padding: 20px 0;z-index: 999;/* 参考父级元素.all-goods-wrapper定位 */position: absolute;/* 调整细节位置 */left: -120px;}/* 设置文字尺寸 */
ul .left-menu li a {display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;}/* 设置文字hover效果 */
ul .left-menu li a:hover {color: white;background-color: #FF6700;
}/* 设置图标样式 */
.left-menu a i {float: right;line-height: 42px;
}/* 设置导航条尺寸 */
.header .nav {height: 100px;/* 设置和height一样的高度实现垂直居中显示 */line-height: 100px;padding-left: 58px;
}/* 隐藏全部商品 */
.all-goods {/* 这里不能使用display隐藏，这种隐藏后就不在占据位置。我们希望隐藏后还保留位置。使用visibility: hidden *//* display: none; */visibility: hidden;
}/* 设置导航条a标签的hover效果 */
.nav-wrapper li a:hover {color: #FF6700;
}/* 设置导航栏内容样式 */
.nav-wrapper li a {font-size: 16px;/* 设置文字间距 */margin-right: 20px;/* 设置元素为块元素，使他hover区域辐射到整个a标签的所占的宽高尺寸 */display: block;
}/* 设置中间导航下拉层效果 */
/* 设置中间导航下拉尺寸 */
.nav .goods-info {/* height: 228px; */height: 0px;width: 100%;/* border: 1px red solid; */background-color: #fff;position: absolute;left: 0;top: 100px;/* 设置最高层级不被其他内容遮挡 */z-index: 9999;
}/* 设置下拉hover效果 */
/* 分别设置商品列表.show-goods和下拉框.goods-info两个位置hover效果 */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover {height: 228px;/* 显示上边框 */border-top: 1px solid rgb(224, 224, 224);/* 设置阴影效果 */box-shadow: 0 5px 3px rgba(0, 0, 0, .2)
}/* 设置搜索框样式 */
/* 设置搜索框的容器 */
.search-wrapper {width: 296px;height: 50px;float: right;margin-top: 25px;
}/* 设置input输入框样式 */
.search-wrapper .search-inp {/* 设置盒子模型内容区计算方式 */box-sizing: border-box;width: 224px;height: 50px;border: none;float: left;padding: 0 10px;font-size: 16px;border: 1px solid rgb(224, 224, 224);/* 去除外边框 */outline: none;
}/* 设置input获取焦点后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button {border-color: #FF6700;
}/* 设置搜索按钮样式 */
.search-wrapper .search-btn {float: left;height: 50px;width: 52px;padding: 0;border-color: none;/* 设置按钮背景颜色 */background-color: #fff;/* 设置搜索图标颜色 */color: #616161;font-size: 16px;border: 1px solid rgb(224, 224, 224);border-left: none;
}/* 设置搜索框按钮hover效果 */
.search-wrapper .search-btn:hover {background-color: #FF6700;color: white;border: none;
}

3.首页header头部左侧导航栏效果