精彩导航条大集合

导航条在各个网站上几乎都是随处可见。

立体飘带状菜单 ( 上凸 )

  • HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8' />
		<title>Start - Li</title>
		<!-- 全局通用样式表 -->
		<link href="./general.css" rel="stylesheet">
		<!-- 引入导航条样式表 -->
		<link href="./navigation_bars.css" rel="stylesheet">
	</head>
	<body>
		<div class='navigation_bars'>
			<a href='#'><span>Home</span></a>
			<a href='#'><span>Blog</span></a>
			<a href='#'><span>Resume</span></a>
			<a href='#'><span>About</span></a>
			<a href='#'><span>Contact</span></a>
		</div>
	</body>
</html>
  • CSS:

    • navigation_bars.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
	/* 导航条样式控制 -- 	立体飘带状菜单(上凸) */
	
	.navigation_bars {
		display:inline-block;
	}

	/*  导航条左右样式控制 */
	.navigation_bars:after, .navigation_bars:before {
		margin-top:0.5em;
		content: "";
		float:left;
		border:1.5em solid #65BA99;
	}

	.navigation_bars:after {
		border-right-color:transparent;
	}

	.navigation_bars:before {
		border-left-color:transparent;
	}

	.navigation_bars a:link, .navigation_bars a:visited { 
		color:#000;    /* 导航条字体颜色 */
		text-decoration:none;
		float:left;
		height:3.5em;
		overflow:hidden;
	}

	.navigation_bars span {
		background:#65BA99 ;    /* 导航条字体背景颜色 */
		display:inline-block;
		line-height:3em;
		padding:0 1em;
		margin-top:0.5em;
		position:relative;
		text-transform : capitalize;
		font-family : 'Georgia';
		font-size : 16px;
		letter-spacing : 1px;
		/* 不同浏览器的过渡效果 */ 
		-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
		-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
		-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
		-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
		transition: background-color 0.2s, margin-top 0.2s;
	}

	.navigation_bars a:hover span {
		background:#8CC152; /* 导航条选项鼠标选中背景颜色 */
		margin-top:0;
	}

	.navigation_bars span:before {
		content: "";
		position:absolute;
		top:3em;
		left:0;
		border-right:0.5em solid #59A386;
		border-bottom:0.5em solid #65BA99;    /* 控制选中导航选项后 底部左边 的颜色 */
	}

	.navigation_bars span:after {
		content: "";
		position:absolute;
		top:3em;
		right:0;
		border-left:0.5em solid #59A386;
		border-bottom:0.5em solid #65BA99;    /* 控制选中导航选项后 底部右边 的颜色 */
	}
	
  • general.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	/* 全局通用样式控制 -- <body> */

	* { 
	/* Basic CSS reset */
	margin:0; 
	padding:0;
	}

	body {
		/* 期待合适的图片以供使用 */
		/* background:url(??.png) 0 0 repeat; */
		background-color : #59A386;
		padding:35px 0 0;
		margin:auto;
		text-align:center;
	}
	

面包屑导航 ( 配合 Font Awesome )

现在最流行的就是面包屑导航了,既美观,也对搜索引擎友好,本人的个人主页也使用了面包屑 ( 不是 Bootstrap 的 )。

说明

Font Awesome 的 font 文件夹下的字体下载:Font Awesome v4.4.0

  • HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>breadcrumb</title>
  <link rel="stylesheet" href="css/breadcrumb.css" media="screen" type="text/css" />
  <!--[if lt IE 9]>
	 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>

<body>
  <link href="css/font-awesome.css" rel="stylesheet">
<h1>我的联系方式和网络足迹</h1>
<ul class="breadcrumb">
  <li>
    <a href="#">
      <span class="icon icon-envelope-alt"></span>
      <span class="text">Contact</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-user-md"></span>
      <span class="text">Resume</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-exclamation-sign"></span>
      <span class="text">About</span>
    </a>
  </li>
  <li>
    <a href="index.html">
      <span class="icon icon-github-alt"></span>
	  <span class="text">GitHub</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-edit"></span>
      <span class="text">Blog</span>
    </a>
  </li>
  <li>
    <a href="index.html">
      <span class="icon icon-home"></span>
	  <span class="text">Start</span>
    </a>
  </li>
</ul>
</body>
</html>
  • CSS:breadcrumb.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 0 50px;
  background-color: #59a386;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

ul.breadcrumb {
  margin-left: 50px;    /* 改变字体图标组与浏览器左边间距 */
  display: inline-block;
  list-style: none;
}
ul.breadcrumb li {
  float: right;
  padding: 10px;      /* 改变字体图标左右间距 */
  background-color: #59a386;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  margin-left: -50px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  margin-top: 3px;
}
ul.breadcrumb li a {
  overflow: hidden;    /* 决定字符图标说明文字的隐藏与否 */
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-decoration: none;
  height: 50px;     /* 改变字符图标的高度 */
  color: #509378;   /* 改变字符图标的颜色 */
  background-color: #65ba99;    /* 改变字符图标的背景颜色 */
  text-align: center;
  min-width: 50px;   /* 改变每个图标的横向间距 */
  display: block;
  line-height: 50px;    /* 改变图标的垂直位置 */
  padding-left: 52px;
  padding-right: 33.33333px;
  width: 50px;    /* 改变图标的宽度 */
}
ul.breadcrumb li a .icon {
  display: inline-block;
}
ul.breadcrumb li a .text {
  display: none;
  opacity: 0;
}
ul.breadcrumb li a:hover {
  width: 200px;     /* 改变每个图标展开后的横向宽度 */
  background-color: #77c2a5;
}
ul.breadcrumb li a:hover .text {
  display: inline-block;
  opacity: 1;
}
ul.breadcrumb li:last-child a {
  padding: 0;
}
ul.breadcrumb li:last-child:hover {
  padding: 3px;    /* 控制第一个字符图标的上下 padding */
  margin-top: 0;
}
ul.breadcrumb li:last-child:hover a {
  width: 60px;     /* 控制第一个字符图标当鼠标停留时展开的宽度 */
  height: 60px;     /* 控制第一个字符图标当鼠标停留时展开的高度 */
  line-height: 60px;
}

本文最后修改时间: 2015年08月23日19:57:13 (完) CC BY-NC-ND 3.0

若您发现文章中的错误,并愿告知于我,或想与我交流,我的联系方式在: Contacts


上一篇 WAMP 环境常见问题

All The Best

下一篇 社交网络分享模板