CSS"滑动门"技术

网站的导航条对网站来说举足轻重,导航条的风格各式各样,纯文本的导航栏比起图像导航栏更具有适用性和快速载入的特点,但在硬件和软件飞速进步以及个性彰显的今天,普通简单的导航条已经显得捉襟见肘了,这样的导航设计,也是没有什么意义的!在CSS中,一个称之为“滑动门”技术被广泛采用到导航条设计中,它的特点在于:

1 实用性,能够根据导航条菜单文本长度自动调节宽度;
2 简洁性,它可以用简单背景小图来实现炫彩的导航条风格,大大减少网页载入内容。
3 适用性,可以多层套用,实现双层滑动门炫彩风格,也可以实现网页其他模块的一些特殊效果。

 
                                             图  滑动门导航条效果

   实现这个导航的素材为 两个小图片!
    (under.gif)   左边图片是导航条底部图片,将其横向平铺,就实现了底部背景了!
    (hover.gif) 左边图片是鼠标划过菜单显示图,在上面滑动门导航条图片里,就是用CSS滑动门技术实现的!

实现方法:
首先设置导航条背景,将under.gif图片,横向平铺至600px!
其次设置滑动门的左门,代码如下:

      #menu ul li a:hover{ 
       color:#fff;                                  //设置背景 黑色
       background: url(hover.gif);       //设置背景 图片(此图周边是透明的)
       }                                                //最终的效果使得 背景图片周边透出黑色

预览效果:


        此时当鼠标划过菜单时,玻璃质感的背景已经出现,但是右边被切断了,没有出现hover.gif图片的右边,此时须把菜单设置文字加粗标记<b>,将其作为“右门”来实现,这样可以为它的背景设置一个背景图像,同样用到hover.gif图片,当左右两个门重叠在一起,便实现了滑动门效果了!

第三:
对b标记的属性进行设置,将其设置为块级元素:
        #menu ul li a b{
            display:block;                     //设置为块元素
            padding:0 14px 0 0;           //设置右边距为14像素
         }
    
设置鼠标经过时b的标记样式!
         #menu ul li a:hover b{
            color:#fff;                          //设置背景 黑色
            background: url(hover.gif) no-repeat right top;   //设置背景图片,右对齐
         }



       这样便实现了滑动门导航条了,它会自动调节滑门左右两边的距离,根据菜单文本的长度自适应,真正做到了节省资源的目的。此外可以实现更为复杂的滑动门导航效果,如双层滑动门导航效果,它的实现方法差不多,只不是在原来的基础上,把背景图标也实现了滑动门效果!



本例中,只使用了一个背景图片,




        三个大小相同不同的颜色放在一起,根据对应的菜单状态选择图片中不同的部分,产生出完美的效果,它网站管理更简单,因为不用很多的图片来实现,让浏览器打开网页更迅速,同时鼠标指针划过菜单项时,不会出现文件替换产生的停顿,使得这就是滑动门技术无可替代的优越之处了!

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值