一个好的导航菜单不仅要在使用的时候方便直观,还要有良好的视觉体验,如果再利用特效效果,将会是的网站不仅美观,而且灵动。下面学步园小编来讲解下什么是“滑动门”导航菜单?怎样制作“滑动门”效果?
一、什么是“滑动门”导航菜单
1.1“滑动门”处处可见
现在流行的网站设计中,水平导航菜单占据了大壁江山。的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计。而水平导航菜单中,又有绝大多数网站采用“滑动门”设计。
1.2为什么要用滑动门技术
首先需要确定的是,制作滑动门导航菜单效果,不需要使用JavaScript,而仅仅需要使用p+CSS技术即可。这对于很多同学来说,是值得兴奋的。
然后很多同学都会问了,邵老师,这个“门”在哪儿呢?它是怎么“滑动”的啊?为什么叫它“滑动门”啊。这个问题非常的好,解答这个问题,需要从滑动门效果的的技术难点谈起。
所以这就是一个技术难点,直觉上,我们会认为,不能用“定死”的一个图片当做鼠标滑过的时候切换的背景图片。因为我们这是因为文字的个数不一样多。
但是如果为每个栏目按照字数多少,都绘制一个不同长度的背景图片,这也会带来两点问题:
1.将会影响页面的加载速度;
2.需求一旦改变,比如将4个字的栏目名称,变成5个字的栏目,难以及时适应这种改变。
那有没有一种办法,能够满足“用一张背景图片,适应不同字数”的导航条呢?
答案大家已经猜到了,这就是滑动门技术。
1.3滑动门技术的核心原理
“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边框。如下图所示,较深颜色区域表示二者重叠的部分,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些。两个图像可以滑动,重叠的部分的宽度会根据里面的文字的字数而自动调整,就像两扇推拉门一样,因此这种技术就叫做“滑动门”。
二、怎样制作“滑动门”效果
2.1图片准备
制作滑动门效果,需要准备好两张图片,一个是用来做整个菜单的背景色平铺使用的;一个是是当鼠标经过某个菜单项的时候显示出来的。
2.2书写p+CSS设置菜单的整体效果
先搭HTML框架,这里的代码很简单,直接给大家贴出:
利用p+CSS制作滑动门导航菜单原来如此简单
#menu{
font-family:Arial;
font-size:14px;
margin:0auto00;
background:url(bg.png);
}
#menuul{
display:block;
width:500px;
padding:0008px;
margin:0;
list-style:none;
height:47px;
}
#menuulli{
float:left;
}
#menuullia{
display:block;
float:left;
line-height:47px;
color:#ddd;
text-decoration:none;
padding:014px014px;
}
#menuullia:hover{
color:#fff;
background:url(hover.png);
}
#menuulliab{
display:block;
padding:014px00;
}
#menuullia:hoverb{
color:#fff;
background:url(hover.png)no-repeatrighttop;
}
首页
北京校区
上海校区
网页平面学科
每一个链接都是一个列表项目的标签,并且设置了它们的左浮动,来让各列表项横向排列而不是默认的竖直排列。并且值得注意的一点是,要将a元素设置成为块级元素,这样整个矩形的范围内都会响应鼠标事件。我们还要设置行高line-height属性,设置行高可以是文字竖直方向居中排列。
利用a:hover伪类选择器来为它添加鼠标悬停之后的效果。
2.3制作另一个“钩子”
我们在每个标签中设置一个文字加粗标记。基本思想就是把标记作为“钩子”来设置CSS样式,这个图片采用的就是hover.png文件,不过不同的在于,这个图片的背景图片是从右向左展开,这样就可以出现右边的边框了。具体代码如下:
#menuulliab{
display:block;
padding:014px00;
}
#menuullia:hoverb{
color:#fff;
background:url(hover.png)no-repeatrighttop;
}
HTML部分:
首页
北京校区
上海校区
网页平面学科
这样,我们非常巧妙的就为滑动门设置好了第二个门。在浏览器中浏览,发现效果良好。
至此,效果全部完成,完整代码如下:
利用p+CSS制作滑动门导航菜单原来如此简单
#menu{
font-family:Arial;
font-size:14px;
margin:0auto00;
background:url(bg.png);
}
#menuul{
display:block;
width:500px;
padding:0008px;
margin:0;
list-style:none;
height:47px;
}
#menuulli{
float:left;
}
#menuullia{
display:block;
float:left;
line-height:47px;
color:#ddd;
text-decoration:none;
padding:014px014px;
}
#menuullia:hover{
color:#fff;
background:url(hover.png);
}
#menuulliab{
display:block;
padding:014px00;
}
#menuullia:hoverb{
color:#fff;
background:url(hover.png)no-repeatrighttop;
}
首页
北京校区
上海校区
网页平面学科
本文作者是邵阳老师。
以上就是关于“什么是“滑动门”导航菜单?怎样制作“滑动门”效果”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!一个好的导航菜单不仅要在使用的时候方便直观,还要有良好的视觉体验,如果再利用特效效果,将会是的网站不仅美观,而且灵动。下面学步园小编来讲解下什么是“滑动门”导航菜单?怎样制作“滑动门”效果?
一、什么是“滑动门”导航菜单
1.1“滑动门”处处可见
现在流行的网站设计中,水平导航菜单占据了大壁江山。的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计。而水平导航菜单中,又有绝大多数网站采用“滑动门”设计。
1.2为什么要用滑动门技术
首先需要确定的是,制作滑动门导航菜单效果,不需要使用JavaScript,而仅仅需要使用p+CSS技术即可。这对于很多同学来说,是值得兴奋的。
然后很多同学都会问了,邵老师,这个“门”在哪儿呢?它是怎么“滑动”的啊?为什么叫它“滑动门”啊。这个问题非常的好,解答这个问题,需要从滑动门效果的的技术难点谈起。
所以这就是一个技术难点,直觉上,我们会认为,不能用“定死”的一个图片当做鼠标滑过的时候切换的背景图片。因为我们这是因为文字的个数不一样多。
但是如果为每个栏目按照字数多少,都绘制一个不同长度的背景图片,这也会带来两点问题:
1.将会影响页面的加载速度;
2.需求一旦改变,比如将4个字的栏目名称,变成5个字的栏目,难以及时适应这种改变。
那有没有一种办法,能够满足“用一张背景图片,适应不同字数”的导航条呢?
答案大家已经猜到了,这就是滑动门技术。
1.3滑动门技术的核心原理
“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边框。如下图所示,较深颜色区域表示二者重叠的部分,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些。两个图像可以滑动,重叠的部分的宽度会根据里面的文字的字数而自动调整,就像两扇推拉门一样,因此这种技术就叫做“滑动门”。
二、怎样制作“滑动门”效果
2.1图片准备
制作滑动门效果,需要准备好两张图片,一个是用来做整个菜单的背景色平铺使用的;一个是是当鼠标经过某个菜单项的时候显示出来的。
2.2书写p+CSS设置菜单的整体效果
先搭HTML框架,这里的代码很简单,直接给大家贴出:
- 首页
- 北京校区
- 上海校区
- 网页平面学科