html与css经典二级菜单编写2
来源:互联网 发布:淘宝首页html代码示例 编辑:程序博客网 时间:2024/04/26 00:29
图示
其实这些东西的编写不用太多的去参考别人的作品,原理自已分析,自已脑子有了方案就去实现接着动手制作,我在编写这个时也没有看过别人是怎么实现了,经验多了就觉得自已可以去分析原理,自已给出方案,让后制作,遇到问题就找doc,再不行就百度,我写过安卓app,重写其中viewgroup实现slidemenu,写过电脑软件ui,其实归到底很多很多为问题还是利用自已的逻辑以及分析方案的能力加上很基础的知识的拼凑而成的,所以看书练习,练习后看书很重要
<div id="menu-1"><div id="warp-touch"><label class="goods-type">主题市场</label><div id="clothes"><ul><li style="float:left;"><a href="#">女装</a></li><li style="float:left;"><a href="#">男装</a></li><li style="float:left;"><a href="#">箱包</a></li><li style="float:left;"><a href="#">鞋革</a></li></ul> <div style="clear:both"></div></div><div id="uses"><ul><li><a href="#">婴童</a></li><li><a href="#">美装</a></li><li><a href="#">食品</a></li><li><a href="#">珠宝</a></li></ul><div style="clear:both"></div></div><div id="lives"><ul><li><a href="#">装修</a></li><li><a href="#">建材</a></li><li><a href="#">家具</a></li><li><a href="#">百货</a></li></ul><div style="clear:both"></div></div><div id="elet"><ul><li><a href="#">汽车</a></li><li><a href="#">数码</a></li><li><a href="#">家电</a></li><li><a href="#">游戏</a></li></ul><div style="clear:both"></div></div><div id="sports"><ul><li><a href="#">运动</a></li><li><a href="#">户外</a></li><li><a href="#">娱乐</a></li><li><a href="#">花鸟</a></li></ul><div style="clear:both"></div></div><div id="box"><div><h6>Content1</h6><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><div style="clear:both"></div></div><div><h6>Content2</h6><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><div style="clear:both"></div></div><div><h6>Content3</h6><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><div style="clear:both"></div></div><div><h6>Content4</h6><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><div style="clear:both"></div></div></div></div></div>
画个原理图好理解
上面有分开的两个框(右边的我用细线画的)
看看左边的框(左边的框我们简称A框,右边的简称为B框),
1.A框的红色子框就是数据框,一条一条的黑色线表示数据,当鼠标经过时就出现B框
2.A框的绿色框就是B框,当需鼠标经过A红色数据条时就把绿色框从右边的细小的框显示,初始化时我们是看不到绿色框的,因为我们把他hide了
3.我们用一个div把绿色框和红色框隐藏起来
就是上面的<div id="warp-touch">
这里我们就讲讲当鼠标移到数据条时如何把A框的粗绿色框搬到右边的细绿色框里,以及初始化时如何把粗绿色框影藏,不过要注意的是图里有个注意的地方,绿色框移动后还在A框里
为了不画得很乱,所以我们没把前后的绿色框都框在A里
4.
div#menu > div#menu-1 > div#warp-touch {height: 250px;box-shadow: inset 0px 0px 10px 0px rgba(0,240,240,.5);}
这是把A框的大小固定主,免得绿色框出现后,A框的高度有变化,如果你不放心还可以设置overflow:hided,即使绿色狂出现,我们也要他消失!
5.
div#menu > div#menu-1 > div#warp-touch > div#box{position: relative;left: 100%;top: -300px;background-color: #500;display: none;color: #eee;}
这是绿色框的css,主要是我们把他从粗绿色框搬到细绿色框里,需要这里我们用position: relative;使他偏移原来的位子,当是原来的位子还是存在的!所以我们上面把A框的高度设置成A框里的红色框的高度,也就把粗绿色框隐藏了!
接着我们就用js控制B的出现与消失,
消失时我们只需设置A的onmouseleave事件,这样就完美了,还有使用js遍历红色的数据将他们显示在B里,这些很简单,自已分析实现即可
- html与css经典二级菜单编写2
- html与css经典二级菜单编写1
- 横向二级导航菜单(html+css+js)
- 编写一个简单的css二级菜单,鼠标移动二级菜单就消失的问题
- 纯HTML+CSS编写动态下拉菜单
- 不错的二级菜单代码,采用CSS+JS.html
- UL LI结构实现二级导航菜单(HTML+CSS+JS)
- HTML+CSS+JavaScript实现简单的二级菜单
- UL LI结构实现二级导航菜单(HTML+CSS+JS)
- HTML+CSS+JS实现二级菜单的效果
- CSS二级菜单
- CSS二级菜单
- CSS二级菜单
- CSS二级菜单+Javascript
- css 导航二级菜单
- div css 二级菜单
- css实现二级菜单
- CSS实现二级菜单
- Scala练习(十)
- 素数筛选 模版
- 线程 ,生产者. 消费者 互斥锁,条件变量
- 导航控制器---UINavigationController
- 加密算法比较3DES AES RSA ECC MD5 SHA1等
- html与css经典二级菜单编写2
- hdu 1198Farm Irrigation
- 常用的正则表达式大全
- android的camera
- Java基础----一其他类的总结(一)
- Edittext请求输入法无效的解决方案
- IK Analyzer 2012FF_hf1使用
- HDU 题目分类 很有层级 感觉很好
- 一个码农对软件项目基层人员管理的思考——会议篇