商场分类导航效果

缺乏、安全感 2022-06-10 04:14 185阅读 0赞

门户类网站特点：导航在上方平铺展示。（一级菜单，一般无二级菜单）
    商城类网站特点：纵向列表横向伸缩展示（一级纵向菜单列表，动态展示层展示二级横向菜单列表)

商城分类导航实现（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，以防鼠标移动时二级菜单消失。