html与css经典二级菜单编写2

图示

其实这些东西的编写不用太多的去参考别人的作品,原理自已分析,自已脑子有了方案就去实现接着动手制作,我在编写这个时也没有看过别人是怎么实现了,经验多了就觉得自已可以去分析原理,自已给出方案,让后制作,遇到问题就找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里,这些很简单,自已分析实现即可