导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键,但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人,又不会夺走网站内容的焦点。不幸的是,目前还有很多网站在使用过时的导航菜单方式,这样使网站可用性大打折扣。如果导航菜单过分的依赖图片那会失去一定的用户,比如那些网速慢或浏览器设置关闭读取网页图片功能。但是,并不意味着导航一定要朴素简单才能提高访问性及网站可用性。

1.减少代码量

  结合CSS和XHTML来制作导航菜单会比使用Javascript或图片来实现同样效果更加节省代码(CSS可以结合一些图片来制作导航而且代码量很小,而完全使用图片的导航代码量也要多很多)。代码量晓得网站会更有益于搜索引擎的索引排名,而且读取速度会快很多。

2.亲和力

  基于CSS的导航菜单对用户来说不但更有可用性,而且更有亲和力。如果用户关闭读取图片和(或)CSS的功能,网站仍然可以以简洁的方式浏览,内容结构及网站可用性不会受到影响。有极少数用户使用的旧浏览器虽然不支持CSS,但网站导航菜单却仍然能够访问。

3.无限的设计方案

  使用CSS来设计导航菜单并不会限制你的设计。事实上,CSS会提供更加灵活的导航设计方案,当用CSS来设置背景图时也能实现各种视觉效果。

4.大量的脚本资源

  如果你不想自己从头开始设计基于CSS的导航菜单,那么有大量的免费脚本资源可以拿来使用。但暴风彬彬并不提倡使用这些脚本资源,因为这样的话你会和其它成百上千的网站使用同样的导航菜单。不过有一些菜单可以自定义样式(颜色、字体、尺寸及背景图)来符合你自己的网站风格。下面暴风彬彬推荐几个国外的资源,它们的导航菜单脚本可以算是最棒的:

300+Jquery, CSS, MooTools 和 JS的导航菜单资源(请参考其中CSS菜单部分)
Vandelay Website DesignExploding Boy
Dynamic Drive
CSS Vault
Listamatic
CSS Showcase
Razvan’s Nerve

转载 链接:http://blog.bingo929.com/4-reasons-css-navigation.html

用CSS做导航菜单的4个理由的更多相关文章

  1. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  2. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  3. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  5. 顶 企业站常用css横向导航菜单

    <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  6. CSS 自适应导航菜单

    文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...

  7. css网站导航-菜单

    一个简单的网站导航效果: 效果案例:查看演示 css: ;;;} body{font-family: arial, 宋体, serif;font-size: 12px;} .menu{width:11 ...

  8. CSS自适应导航菜单

    以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...

  9. css之导航菜单的制作

    通过设置<a>的背景改变样式,通过a:hover改变交互效果,改变文字颜色color 纵向 <!DOCTYPE html> <html> <head lang ...

随机推荐

  1. spring--Springmvc中@Autowired注解与@Resource注解的区别

    Spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@PostConstruct以及@PreDestroy. @Resour ...

  2. plsql初次连接oracle报错解决方案

    windows7 64bit Oracle win64 11gR2(两个文件) PL/SQL v9.0 详细错误信息 Initialization error Could not initialize ...

  3. 剑指offer——75不用加减乘除做加法

    题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号.   题解: 使用位运算   class Solution { public: int Add(int num1 ...

  4. vue-cli中进行微信支付代码详解

    最近做微信支付,颇经历一番波折,这里总结一下,便于以后少走弯路: 在进行微信支付,除了需要公众号之外,你还需要一个微信商户.根据商户规则进行商户申请 这是公众号的基本开发配置,这里在微信授权的时候就已 ...

  5. PHP操作XML方法之SimpleXML

    SimpleXML简介 SimpleXML 扩展提供了一个非常简单和易于使用的工具集,能将XML转换成一个带有一般属性选择器和数组迭代器的对象. 举例XML XML结构部分引用自<<深入理 ...

  6. vue中this.$refs可以拿到,但是里面的属性undefind的问题

    1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素 2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$re ...

  7. Codeforces346D. Robot Control

    D. Robot Control time limit per test 6 seconds memory limit per test 256 megabytes input standard in ...

  8. 笔记49 在Spittr应用中整合Hibernate

    在前边构建的Spittr应用中整合Hibernate 由于最近所学的hibernate都是使用xml方式进行配置的,所以在与以Java方式配置的Spittr应用结合时就会出现一些小问题,在此进行总结. ...

  9. Magento获取当前页面URL地址

    Magento获取当前页面URL地址 http://www.sunhaibing.com/?p=1260 在Magento中,可以通过core/url助手类中的getCurrentUrl()方法获取当 ...

  10. hdu第九场多校

    02:线段树两次扫描 #include<bits/stdc++.h> #include<vector> using namespace std; #define maxn 30 ...