码上快乐

相关内容   简体   繁体

用DIV+CSS制作滑动门导航菜单 原来如此简单

本文转载自  查看原文  2015-03-05 18:12  5972    html+css

http://bbs.itcast.cn/thread-17158-1-1.html

一、什么是“滑动门”导航菜单

1.1 “滑动门”处处可见

现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。什么是滑动门呢？来看下图，是笔者任教的学校的官方主页：

 

从图中可见，这是一个蓝色背景的导航条，各个栏目的名称依次排列。浏览者当前所在的栏目会有一种“玻璃材质”的3D 凸起的效果。与此相同的，用户用鼠标滑过的链接，也有这样的效果。
这就是“滑动门”技术，它被广泛的应用在各种网站的设计中。

1.2  为什么要用滑动门技术

首先需要确定的是，制作滑动门导航菜单效果，不需要使用 JavaScript ，而仅仅需要使用 DIV+CSS 技术即可。这对于很多同学来说，是值得兴奋的。
然后很多同学都会问了，邵老师，这个“门”在哪儿呢？它是怎么“滑动”的啊？为什么叫它“滑动门”啊。这个问题非常的好，解答这个问题，需要从滑动门效果的的技术难点谈起。
“滑动门”效果的难点在于，每个导航栏目的文字个数不一样多，有的长，有的短，如下图所示：

 

 2个文字  4个文字  6个文字
 
所以这就是一个技术难点，直觉上，我们会认为，不能用“定死”的一个图片当做鼠标滑过的时候切换的背景图片。因为我们这是因为文字的个数不一样多，如果“定死”一个图片，那不就会出现下图的问题么？
背景图片被重复绘制，产生了错误
但是如果为每个栏目按照字数多少，都绘制一个不同长度的背景图片，这也会带来两点问题：
1. 将会影响页面的加载速度；
2. 需求一旦改变，比如将 4 个字的栏目名称，变成 5 个字的栏目，难以及时适应这种改变。
那有没有一种办法，能够满足“用一张背景图片，适应不同字数”的导航条呢？
答案大家已经猜到了，这就是滑动门技术。

1.3  滑动门技术的核心原理

“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，较深颜色区域表示二者重叠的部分，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠的部分的宽度会根据里面的文字的字数而自动调整，就像两扇推拉门一样，因此这种技术就叫做“滑动门”。


二、制作“滑动门”效果
2.1  图片准备

制作滑动门效果，需要准备好两张图片，一个是用来做整个菜单的背景色平铺使用的；一个是是当鼠标经过某个菜单项的时候显示出来的。

2.2  书写DIV+CSS设置菜单的整体效果

先搭 HTML 框架，这里的代码很简单，直接给大家贴出：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>利用DIV+CSS制作滑动门导航菜单 原来如此简单</title>
  6. <style>
  7. #menu {
  8.   font-family:Arial;
  9.   font-size:14px;
  10.   margin:0 auto 0 0;
  11.   background:url(bg.png);
  12. }
  14. #menu ul {
  15.   display:block;
  16.   width:500px;
  17.              padding:0 0 0 8px; 
  18.               margin:0; 
  19.           list-style:none; 
  20.           height:47px; 
  21.         }
  22.   
  23.     #menu ul li {
  24.   float:left;
  25. }
  26.     #menu ul li a{
  27.   display:block;
  28.   float:left; 
  29.              line-height:47px; 
  30.   color:#ddd;
  31.   text-decoration:none;
  32.   padding:0 14px 0 14px;
  33. }
  34. #menu ul li a:hover{
  35.   color:#fff; 
  36.               background: url(hover.png);
  37.             }
  38.   
  39. #menu ul li a b{
  40.   display:block;
  41.   padding:0 14px 0 0;
  42.             }
  43.   
  44.           #menu ul li a:hover b{
  45.   color:#fff; 
  46.               background: url(hover.png) no-repeat right top;
  47.             }
  48.            </style>
  49. </head>
  50. <body>
  51.     <div id="menu">
  52. <ul>
  53.    <li><a href="#"><b> 首页 </b></a></li>
  54.        <li><a href="#"><b> 北京校区 </b></a></li>
  55.        <li><a href="#"><b> 上海校区 </b></a></li>
  56.        <li><a href="#"><b>网页平面学科  </b></a></li>
  57. </ul>
  58.     </div>
  59. </body>
  60. </html>
复制代码
每一个链接都是一个列表项目的 <li> 标签，并且设置了它们的左浮动，来让各列表项横向排列而不是默认的竖直排列。并且值得注意的一点是，要将 a 元素设置成为块级元素，这样整个矩形的范围内都会响应鼠标事件。我们还要设置行高 line-height 属性，设置行高可以是文字竖直方向居中排列。
利用 a:hover 伪类选择器来为它添加鼠标悬停之后的效果。

2.3  制作另一个“钩子”

我们在每个 <li> 标签中设置一个文字加粗标记 <b> 。基本思想就是把 <b> 标记作为“钩子”来设置 CSS 样式，这个图片采用的就是 hover.png 文件，不过不同的在于，这个图片的背景图片是从右向左展开，这样就可以出现右边的边框了。具体代码如下：
  1. #menu ul li a b{
  2.   display:block;
  3.   padding:0 14px 0 0;
  4. }
  5.   
  6. #menu ul li a:hover b{
  7.   color:#fff; 
  8.               background: url(hover.png) no-repeat right top;
  9. }
  10. HTML部分：
  11. <ul>
  12.    <li><a href="#"><b> 首页 </b></a></li>
  13.        <li><a href="#"><b> 北京校区 </b></a></li>
  14.        <li><a href="#"><b> 上海校区 </b></a></li>
  15.        <li><a href="#"><b> 网页平面学科  </b></a></li>
  16. </ul>
复制代码

 

这样，我们非常巧妙的就为滑动门设置好了第二个门。在浏览器中浏览，发现效果良好。
至此，效果全部完成，完整代码如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>利用DIV+CSS制作滑动门导航菜单 原来如此简单</title>
  6. <style>
  7. #menu {
  8.   font-family:Arial;
  9.   font-size:14px;
  10.   margin:0 auto 0 0;
  11.   background:url(bg.png);
  12. }
  14. #menu ul {
  15.   display:block;
  16.   width:500px;
  17.              padding:0 0 0 8px; 
  18.               margin:0; 
  19.           list-style:none; 
  20.           height:47px; 
  21.         }
  22.   
  23.     #menu ul li {
  24.   float:left;
  25. }
  26.     #menu ul li a{
  27.   display:block;
  28.   float:left; 
  29.              line-height:47px; 
  30.   color:#ddd;
  31.   text-decoration:none;
  32.   padding:0 14px 0 14px;
  33. }
  34. #menu ul li a:hover{
  35.   color:#fff; 
  36.               background: url(hover.png);
  37.             }
  38.   
  39. #menu ul li a b{
  40.   display:block;
  41.   padding:0 14px 0 0;
  42.             }
  43.   
  44.           #menu ul li a:hover b{
  45.   color:#fff; 
  46.               background: url(hover.png) no-repeat right top;
  47.             }
  48.            </style>
  49. </head>
  50. <body>
  51.     <div id="menu">
  52. <ul>
  53.    <li><a href="#"><b> 首页 </b></a></li>
  54.        <li><a href="#"><b> 北京校区 </b></a></li>
  55.        <li><a href="#"><b> 上海校区 </b></a></li>
  56.        <li><a href="#"><b> 网页平面学科 </b></a></li>
  57. </ul>
  58.     </div>
  59. </body>
  60. </html>
复制代码
同学们可以发现，真正的难点在于原理，而不是代码的实现。这就给我们提了个醒，多去总结有经验的前端开发工程师解决问题的办法，总结的多了，你自然而然就能举一反三了。
我非常愿意回答同学们的提问，邵老师的邮箱是 shaosh@itcast.cn  。源代码在本帖的附件。


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 CSS - 滑动门技术 DIV+CSS制作二级横向弹出菜单，略简单 HTML+CSS技术实现网页滑动门效果 [div+css]竖排菜单 div+css制作表格 js实现简单的滑动门和tab选项卡 纯CSS滑动门页面切换效果 CSS基础(滑动门，雪碧图，网页布局） 使用 jQuery 和 CSS3 制作滑动导航菜单 DIV+CSS布局之用li标签做网页导航菜单
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM