门户类网站特点:导航在上方平铺展示。(一级菜单,一般无二级菜单)
商城类网站特点:纵向列表横向伸缩展示(一级纵向菜单列表,动态展示层展示二级横向菜单列表)
商城分类导航实现(CSS版)
1.文字跟左边的距离用padding可能会影响父元素的宽度,如果用text—indent:**px;就不会有什么隐患;
2.背景色和背景图片及图片位置设定可以一句话搞定; background: #**** (这里是背景色) 空格 url(图片路径)空格 no-repeat || repeat-x ||repeat-y (分别是不重复|| x轴方向平铺||y轴方向平铺) 空格 图片水平距离 空格 图片垂直距离
测量边框大小、颜色等可以使用QQ截图;
使用计算机的程序员模式进行进制的转换;
设置元素的长、宽大小与父元素的长宽大小相等,使元素处于长或宽居中,
例:height,line-height(同一个元素设置,使内容垂直居中);
z-index: 3;//设置元素的堆叠顺序
设置一级菜单(li标签)右边的箭头:
background-image:url(1.jpg);//设置图片
background-repeat:no-repeat;//设置不重复
background-position:right;//设置位于右边
鼠标悬浮效果
1.QQ取色:qq截图时按着ctrl就可以得到16进制颜色值
2.兼容性问题:
Firefox: -moz-
Chrome、Safari: -webkit-
Opera: -o-
IE: -ms-
3.box-shadow: h-shadow(水平阴影的位置,必需) v-shadow(垂直阴影的位置,必需) blur(模糊距离,可选) spread(阴影的尺寸,可选) color(阴影的颜色,可选) inset(将外部阴影 (outset) 改为内部阴影,可选);
悬浮层制作
1、给二级a标签,添加Border-right;
2、元素间用margin撑开;
3、右边的submenu加position:absolute;
4、dl加display:block;
商城分类导航实现(JS版)
当给li元素加上lihover类之后,submenu和span作为li的子元素也会套用对应的样式,因此只需要给对应的一级菜单绑定lihover类,即可完成悬浮二级菜单的效果
用js给所有的li加mouseover和mouseout时间。
window.οnlοad=function(){
var lis=document.getElementsbyTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].οnmοuseοver=function(){
this.className="lihover";
}
lis[i].οnmοuseοut=function(){
this.className="";
}
}
优化“导航”代码
1、当悬浮层div的高度过小(div.bottom<li.top)时,将div向下挪:
divBottom = div.top + div.offsetHeight;
if(divBottom < liTop) div.top = liTop;
2、当div高度过大(div.height>window.height)时,将div向上挪:
winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
if(winHeight < div.offsetHeight) div.top = 0;
3、添加div中的图片溢出效果(给div中的img标签设置样式):
position:relative;
bottom: -30px;
right: -30px;
4、给li下添加“推荐导航项”:
给li中再加一个隐藏的div存放“推荐项”,在li:hover的时候显示,同时增加li的高度。
5、鼠标移入时应使用mouseenter事件,以防鼠标在li上移动时重复触发mouseover事件。
该案例应使用mouseover+mouseout或mouseenter+mouseleave,以防鼠标移动时二级菜单消失。