仓酷云

标题: 来讲讲：CSS实例:超酷的网站导航按钮 [打印本页]
作者: 蒙在股里    时间: 2015-1-15 23:59
标题: 来讲讲：CSS实例:超酷的网站导航按钮
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
破洛洛文章简介：本文一步一步手把手教你打造一个极酷的三层分别的尺度滑动门导航菜单.
导言：本文一步一步手把手教你打造一个极酷的三层分别的尺度滑动门导航菜单，从思绪、道理、步骤，手腕可谓“无所不必其极”，即使你是菜鸟，信任你看了本文后，也能打造出属于本人的超等大度的尺度导航菜单。本菜单无冗余布局，利于数据静态输入，十分合适于用在寻常的项目中往。本教程中讲到了基础的滑动门道理，信任对那些还在这条路上探索的伴侣会有一些匡助！固然假如有甚么毛病和成绩，也接待人人提出来切磋。
本导航菜单想到达的幻想方针是：
1.大度，有本性。
2.布局明晰，语义明白，无冗余标签。
3.体现、布局、举动三层分别，无侵进式。
4.有益于背景程序的数据输入。
5.菜单有三态效果的变更。
6.能高亮纪录点击后的菜单项。
7.自顺应笔墨的宽度。当笔墨内容是非变更时按钮能合时变更。
8.兼容各年夜支流扫瞄器。
让我们一步一步的完成这类幻想的菜单吧！
在论坛中常常看到良多伴侣在制造菜单，但说假话，不是布局冗余，就是无形无神，或有神无貌。而我们如今要打造的就是极品菜单。不管您是老手或内行，在这个教程中都应当有所劳绩。
一个幻想的菜单其布局应当是洁净的、无冗余、分别的，但是由于各种的缘故原由，会为它加上很多偶然义的器材，到最初，会离“洁净”愈来愈远。以是在做菜单前，有些准绳是在全部制造历程一向要切记的，不克不及以任何外力所阻扰。
布局篇
在我的印象中，幻想的尺度菜单应当具有上面的布局：
<divid="nav">
<ulid="menu">
<li><ahref="#none"title="博客园">博客园</a></li>
<li><ahref="#none"title="社区">社区</a></li>
<li><ahref="#none"title="首页">首页</a></li>
<li><ahref="#none"title="新漫笔">新漫笔</a></li>
<li><ahref="#none"title="接洽">接洽</a></li>
<li><ahref="#none"title="办理">办理</a></li>
<li><ahref="#none"title="定阅">定阅</a></li>
<li><ahref="#none"title="冰山顶颠峰">冰山顶颠峰</a></li>
</ul>
</div>
菜单的最原始的布局有了，能够看到这内里是没有任何偶然义的标签，每一个标签都有各自的语义。我们在扫瞄器中看下，啊哦，的确很大略，就是原始的笔墨，像甚么，嗯，就像我们在菜馆里点菜用的菜单，大概比谁人还复杂，而且每一个菜单后面另有一个小圆点！哦，天啦，离我们的大度菜单还差好年夜一截呢！
款式篇
好吧，它如今还只是一个骨架，我们略微给它丑化一下，加点复杂的款式，最少应当往失落小圆点吧，而且让它程度分列吧！
好，加点款式：
*{margin:0;padding:0;}/*将它一致成一个容貌吧，否则在各个扫瞄器下，会逝世得很丢脸*/
ul{list-style:none}/*往失落小圆点吧*/
li{float:left;margin-left:10px;}/*程度分列并来点间距吧，不要把我挤得太紧了。*/
嗯，如今看看，到达小方针了。
骨架有了，接上去就是给每一个菜单项穿上大度的衣裳。
要满意第一项请求，起首要有一个大度的按钮，自已画一个，哦，我不是美术职员，难！不外，别恢心，收集之年夜，无奇不有，说不定人家已有做好的，google一下，还真发明了一个，感激啊！
有了计划好的按钮源码，省往计划的一环，真好。但要做成三态按钮，还必要我们改革一下这个按钮。看到第七条方针了吗，我们是要做自顺应的按钮，以是要对这个按钮做一些加工处置。
我们将这三个按钮分离体现为鼠标移开、点击后、鼠标移上时的三种形态，要做滑动门菜单，必要将一个按钮从两头剖开，右边图处放在左边，右侧图片放在右边。要顺应笔墨加长的情形，还要将这个图层宽度拉长一点，但这个图片有很庞大的暗影殊效，不克不及任意拉伸，不然效果就不像了。我们就从两头给它剖开，将右侧图片的左边向前平辅拉伸。如图二所示
来讲讲：CSS实例:超酷的网站导航按钮
登录/注册后可看大图


图一

以是我们先将它如图哪样切成六片，然后将这六张图片兼并在一同。为何要如许呢？看看csssprites道理吧！
来讲讲：CSS实例:超酷的网站导航按钮
登录/注册后可看大图

图二

上图中第一和第二个图片构成一般菜单款式（默许款式），第3、第四个图片构成翻腾款式，第五和第六个图片构成点击后的菜单项款式。
我们将暗影图片专门提掏出来，作成一张很小的背景图片。
来讲讲：CSS实例:超酷的网站导航按钮
登录/注册后可看大图

图三

该要的图形都筹办好了，接上去，我们将这个图片加在菜单项上吧。一个按钮要用到两张图片才干体现出来。地球人都晓得，一个标签只能装一张图片（假如你发明一个标签能装上两张图片，请实时告知我，我请你用饭！）。哦！我的菜单布局中每项恰好有两个标签，一个是li，它内里有一个A标签，恰好能够用来装摆布两张图片。Li用来装左边的图片，A用来装右边的图片。我真信服我本人，这么好的点子都能想得出来，正在志得意满的自我沉醉中…
别忙，哦，天啦，假如如许来装图片，我的三种鼠标翻腾形态怎样完成？我们都应当晓得，今朝除活该的IE6，别的的扫瞄器都撑持li:hover伪类。但是要兼容各支流扫瞄器（这是我们的第8项方针哟，别忘了！），这类办法是行欠亨的。IE6只能在A标签上使用伪类，别的的标签它但是一概不睬！
既然IE6只能在A标签上使用hover伪类，那末我们要制造自顺应的滑动门菜单，就必要在布局上下手脚了，看来只能在A标签中再到场一个标签，那末菜单的布局就会酿成上面这个模样了。（注重：这儿就入手下手改动布局了，固然我一向想尽力制止这类情形的产生，但仿佛要到达请求，这个标签长短加不成了。）
<li><ahref="#none"title="冰山顶颠峰"><span>冰山顶颠峰</span></a></li>
我们在A标签中到场了一个span容器，它将笔墨内容包含起来了。如今有两个标签，能够装两张图片了。我们将右边图片放在A标签的背景中并向右靠齐，将左边图片放在SPAN标签中并向左靠齐。如许就可以体现出一个完全的按钮外形。
还好，虽然说多加了一个标签，但它还不是完整无语义。
好了，我们的筹办事情都差未几了，该给菜单穿上新衣服了。
我们要做成自顺应宽度的菜单，那末，我们就不克不及设置菜单的宽度值，以是我们不克不及像平常制造一个程度的有流动宽度的菜单的做法那样，设置宽度，然后向左浮动。假如如许的话，每一个菜单项的宽度分歧时，要分离界说每项的宽度，那就必需给每一个菜单项界说一个ID或CLASS,而且这类体例也倒霉背景程序的静态轮回输入。
我们必要的是像内联元素一样从左到右主动在一行内分列每一个菜单项，那末我们就必要菜单之内联的体例体现出来，OK,我们就用display:inline吧，这是一个十分有效的属性：它剖析后的分列体例能到达我们的基础请求：在一行内从左到右主动分列标签元素，每项宽度能够分歧。
假如用下面这类属性真的能满意我们必要了，就没有上面这一段笔墨内容。
虽然说这个属功能满意我们项目基础必要，但是它有一个十分致命的缺点：它不克不及设置宽度和高度值，不信你能够尝尝。它只体现为笔墨的默许高度和宽度，超越这个宽高值后就主动埋没了。如许一来，我在这内里是有背景图片的，要体现出这个图片效果，我们必要给定一个宽度和高度。这就不克不及做出我们的效果了，忧郁！还好，另有一个属性：display:inline-block;它的体现就是我们必要的。
可是…这个属性也有致命缺点，它只能被FF3等初级扫瞄器辨认。别的的扫瞄器只能绕道而行了。啊哦！以是，一致扫瞄器是何等的主要啊！看来，HACK也是我们必不得以的一种摆脱体例了。
道理我们都懂得了，我们能够依据下面两篇文章供应的技能来做一个自顺应的菜单了。
我们先写右边图片的款式，它是使用在li元素的子节点A标签中的。
lia{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-repeatright-36px;text-decoration:none;font-size:12px;color:#fff;}
我们先设置display:inline-block,然后我们再用padding来撑开它的边距，让它有必定的空间来装填图片。注重，这里的图片路径换成你本人的路径。然后设置别的的款式，如往失落下划线，字体色彩，字体巨细等等。设置图片靠右对齐。
liaspan{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-repeatlefttop;font-weight:bold;}
按钮左边的图片是放在SPAN元素中的，将它的图片向左对齐，也设置padding来撑开它的宽度和高度。
lia,liaspan{display:inline;cursor:pointer;}
然后将它们的又设置回inline内联形式，触发IE的haslayout特征。
在下面的代码，我们还看到有一个HACK的使用，*padding-bottom：0;和*padding-top：0;这用来办理IE与FF等扫瞄器分歧效果的。不信你删除后看看会有甚么效果，在IE下高度舒展有成绩。
好了上面该写鼠标移上时的效果了。
lia:hover{padding-right:30px;background:url(images/button.gif)no-repeatright-108px;}
lia:hoverspan{padding-left:30px;background:url(images/button.gif)no-repeatleft-72px;font-weight:bold;}
再接上去是鼠标点击后的效果。
lia:active{padding-right:30px;background:url(images/button.gif)no-repeatright-180px;}
lia:activespan{padding-left:30px;background:url(images/button.gif)no-repeatleft-144px;font-weight:bold;}
ok,仿佛半途而废，在分歧扫瞄器下看看，仿佛都能到达中意的效果。上面是截图：
来讲讲：CSS实例:超酷的网站导航按钮
登录/注册后可看大图


图四

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

举动篇


下面的效果仿佛离我的幻想形态的菜单又更进了一步。不外也有暇痴。
1.如我点击一个菜单后其核心虚线框让人感应十分厌恶。
2.另有点击后不克不及高亮纪录以后选中项。
一步一步来办理吧！
为了撤除此虚线框，我们能够在A标签属性中到场onfocus="this.blur();"这句代码，这长短常吹糠见米的办法。那末就必要在布局上增加一些内容，大概就会酿成上面这类布局了：
<li><ahref="#none"title="冰山顶颠峰"onfocus="this.blur();"><span>冰山顶颠峰博客</span></a></li>
但是，我们别忘了，要只管制止“举动”给“布局”形成搅扰，这是我们在入手下手就提出的请求。因而，这类办法基础上能够反对了。
别的我们想纪录以后选中项菜单，这类制造办法有良多种，纯CSS的做法大概会为每个菜单项创立一个ID，然后用款式表来设置分歧页面下挪用高亮菜单的款式。但这类办法又会对布局增加一些字符。
下面两个办理计划都必要在布局中嵌进一些原本该用“举措”来体现的器材，这会形成布局冗余，可读性较差，而且给人感到页面很乱。
我想该是JS袍笏登场的时分了...
我想在页面一载进时就遍历UL下的一切A标签，主动给它加上一个款式，这个款式就是lia的款式，我们能够将它改成一个class类，我们取名为normal吧，便利JS静态挪用，并将lia:hover也换成一个class类，取名为over，作为JS静态挪用鼠标移上时的效果，而lia:active就是以后选中形态了,取名为cur，将它们三个都在款式表中作出修正。
在页面载进后，用for轮回给每一个菜单A标签注进onclick，onmou搜索引擎优化ver，onmou搜索引擎优化ut事务，我们就能够摒弃用a:link，a:hover，a:active来摸拟三态效果了，由于如许更便于把持以后选中菜单的高亮效果。特地在这个轮回中往失落厌恶的虚线框（虽然说在FF下只用一句款式就能够弄定，但在IE中明显是不可的！）。然后我们用cookie来纪录选中的菜单项ID，并设置其为5分钟后过时。如许不管你怎样歹意刷屏，高亮菜单仍是能记着。（是不是接纳cookie体例来坚持高亮，这能够依据分歧的项目需求来定。这类体例也有欠好的中央，有同好者能够交换一下！）
Js中创立了几个基础的函数，看起来就像上面如许（具体代码请参看源码）：
vartemp;/*菜单ID*/
functiongetObj(objName){return(document.getElementById(objName));}
window.onload=function(){
varobj=getObj("menu");/*ul的id*/
varobj_a=obj.getElementsByTagName("a");
number=obj_a.length;
for(vari=0,j=obj_a.length;i<j;i++){
obj_a.index=i;
obj_a.className="normal";
obj_a.onclick=function(){click(this)};
obj_a.onmou搜索引擎优化ver=function(){overme(this)};
obj_a.onmou搜索引擎优化ut=function(){outme(this)};
obj_a.onfocus=function(){this.blur()};/*往失落IE下的虚线框，ff用款式办理*/
}
if(getCookie("show_a")!=null){
obj_a[getCookie("show_a")].className="cur";
temp=getCookie("show_a")
}
else{
varobj=getObj("menu");
varobj_a=obj.getElementsByTagName("a");
obj_a[0].className="cur";
//鼠标滑过效果
functionoverme(o){/*代码略，请看DEMO*/}
//鼠标移开后效果
functionoutme(o){/*代码略，请看DEMO*/}
//鼠标点击后效果
functionclick(o){/*代码略，请看DEMO*/}
//设置cookie
functionsetCookie(sName,sValue,expireMinute){/*代码略，请看DEMO*/}
//猎取cookie
functiongetCookie(sName){/*代码略，请看DEMO*/}
加上以上的js后，我们把持了菜单的交互举措，并精简了菜单的布局，三层分别得对照完全。如许布局未自然何过量的变化，就到达我们幻想的形态。如许的布局在增加背景代码时，间接轮回，只必要在菜单笔墨项的中央静态输入数据就好了，洁净拖拉。
如今在各类支流扫瞄器中看看你的功效，是不是显现得完整一样呢！
图五

至此，一个极酷的尺度的滑动门导航菜单就在你手中出生了！
总结：我们在制造这些案例时，要随时寄望本人的布局，让它能坚持优秀的前后舒展性。只管杜决冗余的无语义的标签，这在一个流水线似的事情情况中特别显得主要。给后端程序带来伟大的便利的同时，也使本人的代码看来对照恬逸！
本实例测试的兼容性情况是：
IE6/IE7/FF3/TT/OPERA9.63/谷歌扫瞄器测试经由过程，别的的扫瞄器请伴侣协助测试一下。
下载demo

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
作者: 仓酷云    时间: 2015-1-17 23:51
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
作者: 若相依    时间: 2015-1-22 07:28
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
作者: 不帅    时间: 2015-1-30 23:44
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 爱飞    时间: 2015-2-17 18:53
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
作者: 小妖女    时间: 2015-3-5 22:13
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
作者: 深爱那片海    时间: 2015-3-12 16:35
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者: 愤怒的大鸟    时间: 2015-3-20 00:14
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2