在线制作CSS导航菜单以及资源汇总
本篇文章主要内容包括在线制作CSS导航菜单以及关于CSS导航条、菜单、下拉菜单、水平菜单、垂直菜单等进行有效的汇总,网络没有设计的,本文章粗略的谈谈,一些经典的,本站做个链接,导航一下。
以前我不懂HTML,也不知道还有什么系统的东西,因为我是学经济的,所以制作起网站来很幼稚,起初只是用静态的HTML语言做,那个时候只会用表格来布局,至于菜单,那是相当的简陋,当然,那个时候包括一些门户网站也在使用表格布局。现在CSS+DIV布局的优势越来越明显,因此也越来越流行起来。记得那个时候为了学它,还专门买了一本《DIV+CSS布局实录》来看,那个书不错,让我学到很多东西。
整体布局,网站的导航条是关键,也是一个制作亮点和难点,会做的人,三下五除二的搞定,不会做的,你瞎摆弄半天,也学在IE7下可以显示正常,摆放到火狐、Google chorme等别的浏览器下就不可能了。
文章分两部分,第一是介绍在线制作CSS导航菜单;第二部分收集一些网络流行的CSS菜单。
? ?
在线制作CSS导航菜单
1.cssmenumaker
cssmenumaker是一个在线制作CSS导航菜单的网站,尽管是国外的网站,但是在操作方面你完全不用担心,按着图形点击就可以了。该站分为三大类:CSS下拉菜单制作、CSS水平菜单制作、CSS垂直菜单制作。这几个分类明确,制作相当傻瓜式。
CSS下拉菜单演示
当你选择一项,比如下拉菜单(DROP-MENU)进入该项制作,选择那个黄色的导航条(即你喜欢的样式),便出现你喜欢的样式,在线可以观看测试样式,你复制代码就可以了。上面的选框的代码是网页代码(即你放入到HTML、PHP、ASP里面的代码),下面的选框是CSS代码。如果你不懂,建议你去学学CSS+DIV布局,网上很多教程的。
CSS横向菜单演示
如果你觉得上面默认的四个导航分类不够你或者你不满意,你可以在线定制,这个按钮在右侧Customize ,这样你就进入了在线制作导航的区域,输入你的分类,比如挖酷网的列表,然后写出URL地址:http://www.waacoo.com等等,这些你自己来操作。(支持中文)
CSS垂直菜单演示
进入该站:http://www.cssmenumaker.com
?
2、CSS Menu Builder
CSS Menu Builder 也是一个在线制作CSS导航菜单的网站,同样这个网站也提供下拉菜单、水平菜单以及垂直菜单的在线制作,为你解决了不少烦恼。当然CSS Menu Builder 的功能比cssmenumaker完善的多。而且它还提供面包屑菜单(即形象的所在位置菜单)。
首先,我们来展示一些CSS Menu Builder所提供的菜单样式:
CSS横向菜单演示
CSS垂直菜单样式
面包屑菜单
其次,我们在利用它制作菜单的时候,可以有更加丰富的选择,例如,可以选择菜单各个子类的背景、可以选择背景颜色鼠标接触时的背景、可以选择字体的颜色、可以选择菜单制作时内部符号的指向问题等等,相当不错。
最后,当你制作完成以后,你可以分类一目了然的下载你所需要的HTML文件、CSS文件、背景图片以及所有的文件,是不是很酷?