前些天加了一个设计群,里面一帮人都在嚷嚷要学css,但是不知道从哪里入手,于是我就在群里随便嘀咕了一句"哈哈,我是高手...." 结果引来骂声无数,虽然我心里不服,不过还是承认自己的css功底不够,除了布局/文字/链接这些简单的处理之外,其他的一些行为基本不会.

　　其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,于是我连夜从网上搜罗了一些关于css滑动门技术的东西,并且自己做了一个滑动门,事实上在学习css滑动门技术之前,我发现我已经做过很多类似的菜单效果,最有代表性的就是搜狗网址导航的搜索框,后来这个效果被广泛运用到搜狗的搜索引擎当中,我在这里总结一下一些css滑动门的知识,希望能给大家对css的学习起到一个帮助作用,另外结合javascript,css可以制作出更多炫目的效果.

　　背景:

　　从我的理解来讲,css滑动门是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥;

　　定义:

　　滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。

　　应用范围:

　　网站导航菜单

　　技术要点:

　　1.用无序列表ul和li组成菜单结构

　　2.给li设置背景(如果有圆角,则设置为右置或左置,背景图片远远超过该子菜单的长度)

　　3.设置li中的a的display为block,并给a加背景属性(如果有圆角,则设置为右置或左置,背景图片只要是一个圆角的宽度就可以了)

　　4.设置当前菜单a的属性(padding-bottom加n个像素,覆盖整个菜单的底边,n根据具体效果决定)

　　5.用js控制鼠标点击以后的效果(先来一个循环把所有的按钮背景重置,然后把改变当前按钮样式)

评论 (0) All

登陆 还没注册？