淘宝导航代码
昨天学习了布局，今天要来实现弹出式导航条。布局选的flex布局。
关于弹出式悬浮菜单总结了下大概是以下几步：
1.鼠标放到一级菜单上时二级菜单显示，鼠标移开二级菜单隐藏。
2.打算为二级菜单设置一个p，不同的一级菜单显示不同的内容。（调试了好久，因为innerHTML）。
3.关于高亮，在一级和二级菜单的区域里一级菜单都要高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
*{
margin:0;
padding:0;
}
header{
background:#777777;
}
footer{
background: #777777;
}
html,body,.container,.middle,.left,.right,#subleft1{
height: 300px;
}
.container{
border: 1px solid #0a1015;
display:flex;
}
.middle{
background: #f0ad4e;
flex-grow:1;
}
.left{
background: #b21f2d;
width: 200px;
order:-1;
text-align: center;
position:relative;
}
.right{
background: #0d47a1;
width: 300px;
}
#subleft1{
position:absolute;
width:500px;
background: #e0f2f1;
text-align: left;
padding-left:5px;
left:200px;
top:0;
display:none;
}
ul,li{
list-style:none;
}
.left ul li span{
position:absolute;
left:180px;
}
#hidden{
display:none;
}
</style>
</head>
<body>
<header>头部</header>
<p class="container">
<p class="middle">中间</p>
<p class="left">
<ul>
<li id="lid1" onmouseover="mouse('lid1','id1',1)" onmouseout="mouse('lid1','id1',0)">
<a href="2.html">女装</a>/
<a href="2.html">男装</a>/
<a href="2.html">内衣</a>
<span> > </span>
</li>
<li id="lid2" onmouseover="mouse('lid2','id2',1)" onmouseout="mouse('lid2','id2',0)">
<a href="2.html">鞋靴</a>/
<a href="2.html">箱包</a>/
<a href="2.html">配件</a>
<span> > </span>
</li>
</ul>
<p id="subleft1" onmouseover="mouse('','',1)" onmouseout="mouse('','',0)">
</p>
<p id="hidden">
<ul>
<li id="id1">
<a href="2.html"><h3>女装</h3></a>
<a href="2.html">羽绒服</a>
<a href="2.html">毛呢外套</a>
<a href="2.html">毛衣</a>
<a href="2.html">针织衫</a>
<a href="2.html">气场外套</a>
<a href="2.html">卫衣</a>
<a href="2.html">衬衫</a>
<a href="2.html">皮衣</a>
<a href="2.html">皮草</a>
</li>
<li id="id2">
<a href="2.html"><h3>女装1</h3></a>
<a href="2.html">羽绒服1</a>
<a href="2.html">毛呢外套1</a>
<a href="2.html">毛衣1</a>
<a href="2.html">针织衫1</a>
<a href="2.html">气场外套1</a>
<a href="2.html">卫衣1</a>
<a href="2.html">衬衫1</a>
<a href="2.html">皮衣1</a>
<a href="2.html">皮草1</a>
</li>
</ul>
</p>
</p>
<p class="right">右边</p>
</p>
<footer>尾部</footer>
<script>
var currentlidli =null;
function mouse(lid,id,flag){
var lidli =document.getelementbyid(lid);
var subleft1 =document.getElementById('subleft1');
var dis=document.getElementById(id);
console.log(lidli);
console.log(currentlidli);
if(flag==1){
subleft1.style.display="block";
if(dis){
subleft1.innerHTML=dis.innerHTML;
lidli.style.backgroundcolor ="#f0ad4e";
currentlidli =lidli;
}
if(!lidli){
currentlidli.style.backgroundColor ="#f0ad4e";
}
}else{
subleft1.style.display="none";
currentlidli.style.backgroundColor ="";
if(lidli){
lidli.style.backgroundColor ="";
}
}
}
</script>
</body>
</html>在实现的时候主要遇到三个问题：
1.因为二级菜单公用一个p，所以要通过innerHTML控制不同一级菜单时候二级菜单的不同内容，一开始我的二级菜单写在
subleft1这个p里面的，在一开始的innerHTML写进去之后，之后不管点哪个一次菜单，p始终是null，所以之后就把二级菜单挪到了一个隐藏的p里就可以了。
2.关于高亮，因为我是通过绑定mouse这个函数实现onmouseover和onmouseout的，在subleft1p绑定的事件我只传了flag，所以在对相应一级菜单设置背景颜色时拿不到目标一级菜单，所以我设置了一个currentlidli 全局变量，把一级菜单的lid赋值给它。
3.关于在绝对定位的p里设置文字距离边框的距离时，该p框的大小也会跟着变，最后是加了box-sizing: border-box;才好的，因为在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
相关阅读
本篇教程将展示如何制作悬浮按钮特效，enjoy~ ^_^一、最终效果二、功能点介绍单击旋转移动条件三、制作过程1. 首先我们来看一下，本
整体效果图 介绍 视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容
本篇教程将展示如何制作悬浮按钮特效，enjoy~ ^_^一、最终效果二、功能点介绍单击旋转移动条件三、制作过程1. 首先我们来看一下，本
option = { tooltip : { // Option config. Can be overwrited by series or data trigger: 'axis',
每个月底的时候，亲们是不是都在觉得流量没了，莫名其妙的就没了，不敢上QQ了，不敢玩空间了，什么都不敢弄了，好无聊啊，都怪自己月头玩的太过