用CSS开发时髦的导航栏图例教程
制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域。制作导航条的老方法倾向于依赖大量的图片、嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性。如果你的站点不能在一个不支持Javascript的设备上被导航，那么你不仅阻止了关闭Javascript的用户，同时你也阻止了只支持文本的设备，比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引。就算你的客户不在乎无障碍性，告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名！
CSS允许你创造具有吸引力的导航栏，采用CSS的优势在于不仅仅它在外观上非常美观，实际上它还是文本 – 是一种采用特殊方法标注的文本，它能够让所有那些物理上没法看到你的设计但是又想得到你的内容的人或者设备无障碍和容易理解地访问你的站点。在本文中，我们将看看各种各样建立基于CSS的导航栏解决方案。其中有一些适合在已有站点实施，以便使这些站点引导更迅速，并且通过替换古板的、基于图片的导航栏来促进它的无障碍性。另外一些更适合集成于纯粹的CSS站点布局中。
如何把一个结构化的列表样式化为导航栏菜单？
对于新设计的网站，你可能会尝试避免使用表格来做布局，或者只是在绝对必要的地方才使用表格。因此，一个不涉及到表格的导航栏解决方案是有用的，同时，通过杜绝表格元素的使用，你会发现你的页面将包含更少的标记符号。
解决方案
导航栏系统是用户在这个站点能够访问的地点的列表。因此，一个无序的列表是标记你的导航栏的理想方式。象你看到的，在图1中的导航栏的实现是采用CSS样式化的一个列表。
图1：样式化列表的导航栏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
讨论
为了创建一个基于无序列表的导航栏，首先建立你的列表，把每个导航链接放入li元素，就象下面这样：
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
接着,选择一个适合的ID把列表包含在一个div中：
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
象下面图2看到的，这个标记在浏览器的缺省样式下面看上相当普通。
图2：没有样式化的基础列表
我们需要做的第一件事情是样式化导航栏存在的容器 – 在这里是 #navigation ：
#navigation {
width: 200px;
}
在这里我简单的给了#navigation一个宽度。如果这个导航系统是CSS页面布局的一部分，我可能还会给这个ID添加一些位置信息。
下面，我们样式化列表：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
象图3展示的，上面的规则移除了缺省状态下浏览器显示一个列表时出现的前置符号和缩进。
图3 移除缩进和前置符的列表
下一步是使用#navigation样式化li元素，给它们一个底边：
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
最后，我们样式化link：
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
到此大多数工作已经做好。我们建立的这个CSS规则包括增加左右边界，移除下划线等等。在这个规则中第一个属性定义把显示属性设为block，这使得那些链接显示为块元素，这样的话当你光标划过这些导航“按钮”时，显示的效果和使用图片导航一模一样。
相关推荐
-
css实现会折叠、展开的菜单导航栏效果
function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.backg
-
又一个漂亮的导航栏的下拉菜单
网上收集整合出来的,算是剽窃吧,IE6下用过,其他的没试. SHARE BODY { MARGIN: 0px; } A.notes { FONT-SIZE: 12px; COLOR: #ffffff; TEXT-DECORATION: none } .MS_link0 { BORDER-RIGHT: #1e77d3 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #1e77d3 1px solid; PADDING-LEFT: 4px; FONT-SIZE:
-
JQuery 浮动导航栏实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q
-
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手. 图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改. 界面: 使用方法: 1.将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用. 2.引用JQuery框架. 3.修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明. 复制代码 代码如下: var NodeTreeMenu = [ //id:节
-
用CSS开发时髦的导航栏第二篇
解决方案 在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表.这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS. 为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色.边界和链接属性: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <ht
-
用CSS开发时髦的导航栏图例教程
制作容易的站点导航栏是CSS真正展现自己特有能力的一个领域.制作导航条的老方法倾向于依赖大量的图片.嵌套表格和Javascript脚本 – 所有这些都会严重影响站点的可用性和无障碍性.如果你的站点不能在一个不支持Javascript的设备上被导航,那么你不仅阻止了关闭Javascript的用户,同时你也阻止了只支持文本的设备,比如屏幕阅读器已经搜索引擎的机器人程序 – 它们将永远无法从你的首页得到网站内容的索引.就算你的客户不在乎无障碍性,告诉他们笨重的菜单阻止他们得到一个体面的搜索引擎排名!
-
iOS开发之隐藏导航栏线的简单代码
去除navigationBar上那条线: ///隐藏navigationBar导航栏线(直接写在UINavigationController-viewDidLoad方法里面即可) UIView *backgroundView = [self.navigationBar subviews].firstObject; _lineView = backgroundView.subviews.firstObject; _lineView.hidden = YES; 去除前(效果图): 去除后(效果图):
-
微信小程序 开发之顶部导航栏实例代码
微信小程序 开发之顶部导航栏 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
-
uniapp开发微信小程序自定义顶部导航栏功能实例
目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText
-
一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>
-
jquery+css实现侧边导航栏效果
最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a
-
Android开发基于ScrollView实现的渐变导航栏效果示例
本文实例讲述了Android开发基于ScrollView实现的渐变导航栏效果.分享给大家供大家参考,具体如下: 前些日子项目要在原来的页面上加入渐变导航栏的功能,查了很多资料,很多资源都是监听到listview的高度来实现渐变导航栏的效果,可是项目里面很多的界面都是使用ScrollView来实现滑动效果. 实在没办法,就自己写了一个test来实现这个效果. 话不多说,马上看一下思路吧,其实渐变导航栏无非就是改变导航栏的透明度也就是可以设定一个高度,根据这个高度,监听ScrollView滑动的距离
-
iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例
一.好多App都有上下滑动UIScrollview隐藏或者显示导航栏,在这里我说说我觉得有用的几种方法: 1.iOS8之后系统有一个属性hidesBarsOnSwipe Objective-C代码如下 self.navigationController.hidesBarsOnSwipe = YES; swift代码如下 self.navigationController?.hidesBarsOnSwipe = true 当使用以上代码时,可以达到效果 2.使用UIScrollViewDelega
-
Android开发之判断有无虚拟按键(导航栏)的实例
判断有无虚拟按键(导航栏) 现在很大一部分手机没有虚拟按键,一部分有.我们在做适配的时候可能会用到这方面的知识. 例如:屏幕填充整个屏幕的时候,没办法只能连导航栏一起填充了,但是这个不是我们想要的,我们要给布局试着paddingbottom,这个时候我们就要判断有么有导航栏,导航栏高度是多少了. /** * 获取是否存在NavigationBar * @param context * @return */ public boolean checkDeviceHasNavigationBar(Co