简单的css效果原理（二）之导航栏的全部服务分类
来源：互联网 发布：淘宝常用名词解释 编辑：程序博客网 时间：2024/05/16 12:57
废话不多说，直接看效果：
今天主要是想讲一下这个全部服务分类的列表及鼠标移入后的效果的实现，但最重要的其实是这个页面html结构以及css的实现。
本着把项目各功能做到最优，复用性更强的原则，我们来分析一下它js后面要实现的功能,然后我们通过js要实现的功能去判断怎样让html的代码结构可以让js更流利。
首先，我们要考虑到的是这个全部服务分类下面的这些分类在其他页面是隐藏的，只有当鼠标移入的时候，它才会显示，所以绝对不能相对定位。
其二，我们要考虑到的是鼠标移入服务分类，他的各分类又显示出来，我之前的做法是让这个子分类相对于分类这个块，却发现子分类会随着分类位置的变化而改变，所以肯定不能这么做。后面我的做法是让分类与子分类都绝对定位，相对于包裹他们和全部服务列表栏目的盒子，这样的话，既不会让子分类随着分类位置的改变而改变，又可以让后面的复用性更强，是个一举多得的办法。之前有篇写列表靠在一起，但是鼠标移入边框变色的那个问题，这个里面核心地一句，Position:relative在这个里面同样也是一个知识点，如果不能加这一句的话，那么鼠标移入分类，分类的边框和子分类的边框就会重叠，所以鼠标移入时，子分类的位置相对了，就自然而然有边框变白色显现出来了。
为了清楚地把上述文字清晰地表述清楚，我依然用一个Demo来说明，具体内容如下：
<style> #boxWrap{position:relative;width:500px;margin:100px auto;} .typeName{width: 150px;height: 30px;font-size:14px;color:#FFF;line-height: 30px;text-align:center;background: #FF7300;} .typeContentWrap{display: none;} .typeList{position: absolute;top:30px;left: 0;width: 150px;} .typeList .subType{float: left;} .typeList .subType .tit{width: 148px;height: 30px;line-height: 30px;text-align:center;border-left:1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;} .typeList .subType>.tit.active{position:relative;z-index:10000;width: 149px;border-top:1px solid #FF7300;border-left:1px solid #FF7300;
border-bottom:1px solid #FF7300;border-right: 1px solid #FFF;} .eachSubTypeWrap{position:absolute;top:0;left:150px;display:none;padding:10px 20px;border:1px solid #FF7300;} .eachSubTypeWrap h3{height:24px;line-height:24px;font-size: 14px;} .subWrap{margin-bottom: 10px;} .subInnerTypeUl{width: 400px;z-index: 999;} .subInnerTypeUl .subInnerType{float: left;margin-right:20px;height: 24px;line-height: 24px;}</style>这是css代码，下面的是html代码：
<div id="boxWrap"> <h1 class="typeName">全部服务分类</h1> <div class="typeContentWrap"> <ul class="typeList cf"> <li class="subType"> <div class="tit">分类一</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类一标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类一标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类一标题3</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类一标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类一标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> <li class="subType"> <div class="tit">分类二</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类二标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类二标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> <li class="subType"> <div class="tit">分类三</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类三标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题3</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类三标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> <li class="subType"> <div class="tit">分类四</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类四标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类四标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类四标题3</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类四标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> <li class="subType"> <div class="tit">分类五</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类五标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题3</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类五标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> <li class="subType"> <div class="tit">分类六</div> <div class="eachSubTypeWrap cf"> <div class="subWrap fl"> <h3>子分类六标题1</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类六标题2</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类六标题3</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类六标题4</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> <div class="subWrap fl"> <h3>子分类六标题5</h3> <ul class="subInnerTypeUl cf"> <li class="subInnerType">西瓜</li> <li class="subInnerType">桃子</li> <li class="subInnerType">橘子</li> <li class="subInnerType">哈密瓜</li> <li class="subInnerType">苹果</li> <li class="subInnerType">香蕉</li> <li class="subInnerType">菠萝</li> <li class="subInnerType">提子</li> <li class="subInnerType">柿子</li> <li class="subInnerType">柚子</li> </ul> </div> </div> </li> </ul> </div></div>然后是效果切换的js,没有什么技术含量，这个简单地看下就好
<script> $(function(){ $("#boxWrap").hover(function(){ $(".typeContentWrap").show(); },function(){ $(".subType").removeClass('active'); $(".typeContentWrap").hide(); }); $(".subType").hover(function(){ $(this).find(".eachSubTypeWrap").show(); $(this).find(".tit").addClass('active').siblings().removeClass('active'); },function(){ $(this).find(".eachSubTypeWrap").hide(); $(".tit").removeClass('active'); }); });</script>
阅读全文
0 0
- 简单的css效果原理（二）之导航栏的全部服务分类
- 简单的css效果原理（一）之边框变色
- 一段css效果的导航栏
- 一段css效果的导航栏
- 一段css效果的导航栏
- 一段CSS效果的导航栏
- 电商网站分类导航效果--CSS实现（二） 二级菜单
- css构建两个简单的导航栏
- 简单的导航分页效果
- 使用CSS开发时髦的导航栏（二）
- 纯css实现分类导航效果
- css实现-商城分类导航效果
- css导航栏选中是有移动下划线的效果
- CSS制作的垂直导航菜单效果
- 一个导航条的效果DIV+CSS
- CSS左侧导航效果的实现
- 一个简单的左侧导航栏滚动时悬浮效果
- 强大和简单的顶部导航栏效果
- python学习笔记--print
- 人工智能: 自动寻路算法实现(三、A*算法)
- Invensys.SimSci.Esscor.DYNSIM.v5.32 1DVD+PRO II
- jQuery学习笔记
- CSV文件保存为utf8编码格式
- 简单的css效果原理（二）之导航栏的全部服务分类
- Windows下Redis集群的配置
- 中间件漏洞整理
- BootStrap时间控件bootstrap-datetimepicker.min.js用法
- 贝塞尔曲线收录：三 CAShapeLayer
- 比特币源码解析(15)
- C++ LUA 获取当前时间并转化为字符串
- Banner简单的使用
- activemq 环境搭建和整合
