CSS案例:超酷的网站导航栏按钮

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序


本文1步1步手门把教你打造1个极酷的3层分离出来的规范拖动门导航栏菜单.
前言:本文1步1步手门把教你打造1个极酷的3层分离出来的规范拖动门导航栏菜单,从思路、基本原理、流程,方式可以说“没有无需其极”,就算你是菜鸟,坚信你看了本文后,也能打造出属于自身的非常好看的规范导航栏菜单。本菜单无冗余构造,利于数据信息动态性輸出,十分合适于用在平时的新项目中去。本实例教程中讲到了基础的拖动门基本原理,坚信对那些还在这条路上探求的盆友会有1些协助!自然假如有甚么不正确和难题,也欢迎大伙儿提出来讨论。
本导航栏菜单想做到的理想化总体目标是:
1.好看,有个性化。
2.构造清楚,词义确立,无冗余标识。
3.主要表现、构造、个人行为3层分离出来,无侵入式。
4.有益于后台管理程序流程的数据信息輸出。
5.菜单有3态实际效果的转变。
6.能高亮度纪录点一下后的菜单项。
7.自融入文本的宽度。当文本內容长短转变时按钮能适度转变。
8.适配各大流行访问器。
让大家1步1步的完成这类理想化的菜单吧!
在论坛中常常看到许多盆友在制做菜单,但说真话,并不是构造冗余,便是有形无神,或有神无貌。而大家如今要打造的便是极品菜单。不管您是初学者或老手,在这个实例教程中都应当有一定的获得。
1个理想化的菜单其构造应当是整洁的、无冗余、分离出来的,但是由于种种的缘故,会为它再加很多不经意义的物品,到最终,会离“整洁”愈来愈远。因此在做菜单前,一些标准是在全部制做全过程1直要铭记的,不可以以任何外力所阻扰。
构造篇
在我的印象中,理想化的规范菜单应当具备下面的构造:
<div id="nav">
<ul id="menu">
<li><a href="#none" title="blog园">blog园</a></li>
<li><a href="#none" title="小区">小区</a></li>
<li><a href="#none" title="主页">主页</a></li>
<li><a href="#none" title="新随笔">新随笔</a></li>
<li><a href="#none" title="联络">联络</a></li>
<li><a href="#none" title="管理方法">管理方法</a></li>
<li><a href="#none" title="定阅">定阅</a></li>
<li><a href="#none" title="冰极峰">冰极峰</a></li>
</ul>
</div>
菜单的最初始的构造有了,能够看到这里边是沒有任何不经意义的标识,每一个标识都有各有的词义。大家在访问器中看下,啊哦,的确很简单,便是初始的文本,像甚么,嗯,就像大家在菜馆里点菜用的菜单,将会比那个还简易,而且每一个菜单前面也有1个小圆点!哦,天啦,离大家的好看菜单还差好大1截呢!
款式篇
好吧,它如今还只是1个骨架,大家略微给它清理1下,加点简易的款式,最少应当去掉小圆点吧,而且让它水平排序吧!
好,加点款式:
*{margin:0;padding:0;}/*将它统1成1个样子吧,要不然在各个访问器下,会死得很不好看*/
ul{list-style:none}/*去掉小圆点吧*/
li{float:left;margin-left:10px;}/*水平排序并来点间隔吧,不必把我挤得太紧了。*/
嗯,如今看看,做到小总体目标了。
骨架有了,接下来便是给每一个菜单项穿上好看的衣裳。
要考虑第1项规定,最先要有1个好看的按钮,自已画1个,哦,我并不是工艺美术人员,难!但是,别恢心,互联网之大,无奇不有,说不确定人家早已有做好的,google1下,还真发现了1个,谢谢啊!
有了设计方案好的按钮源代码,省去设计方案的1环,真好。但要做成3态按钮,还必须大家更新改造1下这个按钮。看到第7条总体目标了吗,大家是要做自融入的按钮,因此要对这个按钮做1些生产加工解决。
大家将这3个按钮各自主要表现为电脑鼠标移开、点一下后、电脑鼠标移上时的3种情况,要做拖动门菜单,必须将1个按钮从正中间剖开,左侧图处放在左边,右侧照片放在右边。要融入文本加长的状况,还要将这个涂层宽度拉长1点,但这个照片有很繁杂的黑影殊效,不可以随意拉伸,不然实际效果就不像了。大家就从正中间给它剖开,将右侧照片的左边向前平辅拉伸。如图2所示

图1
因此大家先将它如图哪种切成6片,随后将这6张照片合拼在1起。为何要这样呢?看看css sprites基本原理吧!
图2
上图中第1和第2个照片构成一般菜单款式(默认设置款式),第3、第4个照片构成滚翻款式,第5和第6个照片构成点一下后的菜单项款式。
大家将黑影照片专业提取下来,作成1张很小的情况照片。
图3
该要的图型都提前准备好了,接下来,大家将这个照片加在菜单项上吧。1个按钮要用到两张照片才可以主要表现出来。地球人都了解,1个标识只能装1张照片(假如你发现1个标识能装上两张照片,请立即告知我,我请你吃饭!)。哦!我的菜单构造中每项恰好有两个标识,1个是li,它里边有1个A标识,恰好能够用来装上下两张照片。Li用来装左边的照片,A用来装右边的照片。我真钦佩我自身,这么好的点子都能想得出来,正在得意忘形的自身沉醉中…
别忙,哦,天啦,假如这样来装照片,我的3种电脑鼠标滚翻情况怎样完成?大家都应当了解,现阶段除该死的IE6,其它的访问器都适用li:hover伪类。但是要适配各流行访问器(这是大家的第8新项目标哟,别忘了!),这类方式是行堵塞的。IE6只能在A标识上运用伪类,其它的标识它但是1概没理!
既然IE6只能在A标识上运用hover伪类,那末大家要制做自融入的拖动门菜单,就必须在构造上动手能力脚了,来看只能在A标识中再添加1个标识,那末菜单的构造就会变为下面这个模样了。(留意:这儿就刚开始更改构造了,尽管我1直想竭力防止这类状况的产生,但仿佛要做到规定,这个标识是是非非加不能了。)
<li><a href="#none" title="冰极峰"><span>冰极峰</span></a></li>
大家在A标识中添加了1个span器皿,它将文本內容包含起来了。如今有两个标识,能够装两张照片了。大家将右边照片放在A标识的情况中并向右靠齐,将左边照片放在SPAN标识中并向左靠齐。这样就可以主要表现出1个详细的按钮样子。
还好,虽然多加了1个标识,但它还并不是彻底无词义。
好了,大家的提前准备工作中都类似了,该给菜单穿上新衣服了。
大家要做成自融入宽度的菜单,那末,大家就不可以设定菜单的宽度值,因此大家不可以像平常制做1个水平的有固定不动宽度的菜单的做法那样,设定宽度,随后向左波动。假如这样的话,每一个菜单项的宽度不一样时,要各自界定每项的宽度,那就务必给每一个菜单项界定1个ID或CLASS,而且这类方法也不好后台管理程序流程的动态性循环系统輸出。
大家必须的是像内联元素1样从左到右全自动在1行内排序每一个菜单项,那末大家就必须菜单之内联的方法主要表现出来,OK,大家就用display:inline吧,这是1个十分有效的特性:它分析后的排序方法能做到大家的基础规定:在1行内从左到右全自动排序标识元素,每项宽度能够不一样。
假如用上面这类特性真的能考虑大家必须了,就沒有下面这1段文本內容。
虽然这个特性能考虑大家新项目基础必须,但是它有1个十分致命的弱点:它不可以设定宽度和高宽比值,不信你能够试试。它只主要表现为文本的默认设置高宽比和宽度,超过这个宽高值后就全自动掩藏了。这样1来,我在这里边是有情况照片的,要主要表现出这个照片实际效果,大家必须给定1个宽度和高宽比。这就不可以做出大家的实际效果了,烦闷!还好,也有1个特性:display:inline-block;它的主要表现便是大家必须的。
可是…这个特性也是有致命弱点,它只能被FF3等高級访问器鉴别。其它的访问器只能绕道而行了。啊哦!因此,统1访问器是多么的的关键啊!来看,HACK也是大家迫不得已的1种摆脱方法了。
基本原理大家都掌握了,大家能够依据上面两篇文章内容出示的技能来做1个自融入的菜单了。
大家先写右边照片的款式,它是运用在li元素的子连接点A标识中的。
li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images/button.gif) no-repeat right ⑶6px; text-decoration:none; font-size:12px; color:#fff;}
大家先设定display:inline-block,随后大家再用padding来撑开它的边距,让它有1定的室内空间来装填照片。留意,这里的照片相对路径换为你自身的相对路径。随后设定其它的款式,如去掉下划线,字体样式色调,字体样式尺寸这些。设定照片靠右对齐。
li a span{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; height:36px; line-height:36px; background:url(images/button.gif) no-repeat left top; font-weight:bold;}
按钮左边的照片是放在SPAN元素中的,将它的照片向左对齐,也设定padding来撑开它的宽度和高宽比。
li a,li a span{display:inline;cursor:pointer;}
随后将它们的又设定回inline内联方式,开启IE的haslayout特点。
在上面的编码,大家还看到有1个HACK的运用,*padding-bottom:0;和*padding-top:0;这用来处理IE与FF等访问器不一样实际效果的。不信你删掉后看看会有甚么实际效果,在IE下高宽比屈伸有难题。
好了下面该写电脑鼠标移上时的实际效果了。
li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right ⑴08px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left ⑺2px;font-weight:bold;}
再接下来是电脑鼠标点一下后的实际效果。
li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right ⑴80px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left ⑴44px;font-weight:bold;}
ok,好像大获全胜,在不一样访问器下看看,好像都能做到令人满意的实际效果。下面是截图:

图4
如今纯CSS版的拖动门菜单基础上就做好了。

个人行为篇

上面的实际效果好像离我的理想化情况的菜单又更进了1步。但是也是有暇痴。
1.如我点一下1个菜单后其聚焦点虚线框令人觉得十分反感。
2.也有点一下后不可以高亮度纪录当今选定项。
1步1步来处理吧!
以便去除此虚线框,大家能够在A标识特性中添加onfocus="this.blur();"这句编码,这是是非非常立即见效的方式。那末就必须在构造上加上1些內容,将会就会变为下面这类构造了:
<li><a href="#none" title="冰极峰" onfocus="this.blur();"><span>冰极峰blog</span></a></li>
但是,大家别忘了,要尽可能防止“个人行为”给“构造”导致影响,这是大家在刚开始就提出的规定。因而,这类方式基础上能够否决了。
此外大家想纪录当今选定项菜单,这类制做方式有许多种,纯CSS的做法将会会为每个菜单项建立1个ID,随后用款式表来设定不一样网页页面下启用高亮度菜单的款式。但这类方式又会对构造加上1些标识符。
上面两个处理计划方案都必须在构造中嵌入1些原本该用“姿势”来主要表现的物品,这会导致构造冗余,可读性较差,而且给人觉得网页页面很乱。
我想该是JS摩肩接踵的情况下了...
我想在网页页面1加载时就遍历UL下的全部A标识,全自动给它再加1个款式,这个款式便是li a的款式,大家能够将它改为1个class类,大家取名字为normal吧,便捷JS动态性启用,并将li a:hover也换为1个class类,取名字为over,做为JS动态性启用电脑鼠标移上时的实际效果,而li a:active便是当今选定情况了,取名字为cur,将它们3个都在款式表格中作出改动。
在网页页面加载后,用for循环系统给每一个菜单A标识引入onclick,onmouseover,onmouseout恶性事件,大家便可以革除用a:link,a:hover,a:active来摸拟3态实际效果了,由于这样更便于操纵当今选定菜单的高亮度实际效果。顺带在这个循环系统中去掉反感的虚线框(虽然在FF下只用1句款式便可以搞定,但在IE中明显是不好的!)。随后大家用cookie来纪录选定的菜单项ID,并设定其为5分钟后到期。这样不管你怎样故意刷屏,高亮度菜单還是能记牢。(是不是选用cookie方法来维持高亮度,这能够依据不一样的新项目要求来定。这类方法也是有不太好的地区,有同好者能够沟通交流1下!)
Js中建立了几个基础的涵数,看起来就像下面这样(详尽编码请参看源代码):
var temp;/*菜单ID*/
function getObj(objName){return(document.getElementById(objName));}
window.onload =function() {
var obj=getObj("menu");/*ul的id*/
var obj_a=obj.getElementsByTagName("a");
number=obj_a.length;
for (var i=0,j=obj_a.length;i<j;i ){
obj_a[i].index=i;
obj_a[i].className="normal";
obj_a[i].onclick=function(){click(this)};
obj_a[i].onmouseover=function(){overme(this)};
obj_a[i].onmouseout=function(){outme(this)};
obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虚线框,ff用款式处理*/
}
if (getCookie("show_a") != null) {
obj_a[getCookie("show_a")].className="cur";
temp=getCookie("show_a")
}
else{
var obj=getObj("menu");
var obj_a=obj.getElementsByTagName("a");
obj_a[0].className="cur";
//电脑鼠标滑过实际效果
function overme(o){/*编码略,请看DEMO*/}
//电脑鼠标移开后实际效果
function outme(o){/*编码略,请看DEMO*/}
//电脑鼠标点一下后实际效果
function click(o){/*编码略,请看DEMO*/}
//设定cookie
function setCookie(sName,sValue,expireMinute) {/*编码略,请看DEMO*/}
//获得cookie
function getCookie(sName) {/*编码略,请看DEMO*/}
再加以上的js后,大家操纵了菜单的互动姿势,并精简了菜单的构造,3层分离出来得较为完全。这样构造未矫情何过量的变化,就做到大家理想化的情况。这样的构造在加上后台管理编码时,立即循环系统,只必须在菜单文本项的地区动态性輸出数据信息就可以了,整洁爽利。
如今在各种各样流行访问器中看看你的成效,是不是显示信息得彻底1样呢!
图5
至此,1个极酷的规范的拖动门导航栏菜单就在你手中诞生了!
总结:大家在制做这些实例时,要随时注意自身的构造,让它能维持优良的前后左右屈伸性。尽可能杜决冗余的无词义的标识,这在1个流水线似的工作中自然环境中特别显得关键。给后端开发程序流程带来极大的便捷的另外,也使自身的编码来看较为舒适!
本案例检测的适配性自然环境是:
IE6/IE7/FF3/TT/OPERA9.63/谷歌访问器检测根据,其它的访问器请盆友帮忙检测1下。
免费下载demo
上一篇:W3C规范和XHTML和HTML 返回下一篇:没有了