无图片制作带有 45 度斜角的导航菜单

带斜角的菜单通常是用图片来实现,而且往往需要避免重叠,本文介绍的是一个不用图片的解决方案,带斜角又不用图片,是不是很不可想象,没错,不用图片也可以做带斜角的导航菜单,赶快看看吧!

无图片制作带有 45 度斜角的导航菜单 – 示例

 
<style type="text/css">
 
/* for this demo only */
#slant {border-top:25px solid #fff; border-bottom:125px solid #fff;}
 
 
/* the stylesheet */
#slant {padding:0; margin:0; list-style:none;}
#slant li {float:left; text-align:center; margin-right:-20px;} 
#slant a {display:block; text-decoration:none;}
#slant a em {font-style:normal; display:block; padding:0 15px; height:25px; background:#363; float:left; cursor:pointer; color:#beb; line-height:24px;}
 
#slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#363;}
 
#slant a span {height:0; border-top:25px solid #363; border-right:25px solid #fff;}
 
#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top:5px solid #fff; border-right:5px solid #363;}
 
#slant a b.p1 {height:0; margin-top:20px;}
#slant a b.p2 {height:5px; margin-top:15px;}
#slant a b.p3 {height:10px; margin-top:10px;}
#slant a b.p4 {height:15px; margin-top:5px;}
#slant a b.p5 {height:20px;}
 
#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom:5px solid #fff; border-left:5px solid #363;}
 
#slant a b.p6 {height:20px;}
#slant a b.p7 {height:15px;}
#slant a b.p8 {height:10px;}
#slant a b.p9 {height:5px;}
#slant a b.p10 {height:0;}
 
#slant a:hover {background:#696;}
 
#slant a:hover em {color:#030; background:#696;}
 
#slant a:hover b.p1,
#slant a:hover b.p2,
#slant a:hover b.p3,
#slant a:hover b.p4,
#slant a:hover b.p5 {border-right-color:#696; background: #696;}
 
#slant a:hover b.p6,
#slant a:hover b.p7,
#slant a:hover b.p8,
#slant a:hover b.p9,
#slant a:hover b.p10 {border-left-color:#696; background: #696;}
 
#slant a:hover span {border-top-color:#696;}
 
</style>
 
<ul id="slant">
 
	<li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item One</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item Two</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Longer Item Three</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
 
</ul>

如此创意也许只有 Stu Nicholls 才会有,也许你看过之后会认为完全没有技术难度,但是为什么我们却没有第一个做出来?也许,我们什么都不缺,除了想象力。。。

CSSplay 本站已经多次强烈推荐,如果你的英文够好,可以通过下面的链接阅读原文:
http://www.cssplay.co.uk/menus/slanty.html

本站发布此代码已经通过原作者授权,如果您想转载或者用于其他用途,请直接和原作者联系!

用 Javascript 制作可折叠式导航菜单

当栏目级别较多时,很多人都会考虑使用可折叠式导航菜单,既方便点击又节省空间,本文介绍的是对可折叠式导航菜单的简单实现,希望对新手有帮助。

用 Javascript 制作可折叠式导航菜单 – 示例

 
<script type="text/javascript">
// 说明:用 Javascript 制作可折叠式导航菜单
// 整理:http://www.CodeBit.cn

// curr_id : 当前id ; total_num 总共有几个菜单
function switchMenu(curr_id, total_num)
{
	for(var i=0; i<total_num; i++)
	{
		//二级菜单
		var el = document.getElementById('menu_sub_'+i);

		if(!el) return;

		//一级菜单前面的图片
		var img = document.getElementById('menu_master_'+i);

		if(i == curr_id)
		{
			el.style.display = "block";
			img.src = "img/open.gif";
		}
		else
		{
			el.style.display = "none";
			img.src = "img/close.gif";
		}
	}
}
</script>
 
<style type="text/css">
<!--
#warp {
	width:200px;
	margin:100px auto;
}
.menu_master {
	border:1px solid #ccc;
	padding:5px 10px;
	margin-bottom:2px;
	cursor:pointer;
	font-weight:bold;
	color:#666;
}
.menu_master img { vertical-align:middle; }
.sub_menu { display:none; }
.sub_menu ul, .sub_menu ul li {
	margin:0;
	padding:0;
	list-style:none;
}
.sub_menu ul li a {
	margin:0 0 3px 10px;
	padding:3px 0 2px 25px;
	background:url('img/fw.gif') no-repeat 5px center;
	display:block;
	height:18px;
	border-bottom:1px solid #eee;
	color:#666;
	text-decoration:none;
}
-->
</style>


<div id="warp">

	<div class="menu_master" onclick="javascript:switchMenu(0, 4);">
		<img src="close.gif" alt="close" id="menu_master_0" /> PHP/MySQL
	</div>
	<div id="menu_sub_0" class="sub_menu">
		<ul>
			<li><a href="http://www.codebit.cn/pub/html/php_mysql/tutorial/" title="PHP/MySQL教程">PHP/MySQL教程</a></li>
			<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/" title="PHP/MySQL小技巧">PHP/MySQL小技巧</a></li>
			<li><a href="http://www.codebit.cn/pub/html/php_mysql/problem/" title="PHP/MySQL常见问题">PHP/MySQL常见问题</a></li>
		</ul>
	</div>

	<div class="menu_master" onclick="javascript:switchMenu(1, 4);">
		<img src="close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS
	</div>
	<div id="menu_sub_1" class="sub_menu">
		<ul>
			<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程</a></li>
			<li><a href="http://www.codebit.cn/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧</a></li>
		</ul>
	</div>

	<div class="menu_master" onclick="javascript:switchMenu(2, 4);">
		<img src="close.gif" alt="close" id="menu_master_2" /> Ajax
	</div>
	<div id="menu_sub_2" class="sub_menu">
		<ul>
			<li><a href="http://www.codebit.cn/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程</a></li>
			<li><a href="http://www.codebit.cn/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧</a></li>
		</ul>
	</div>

	<div class="menu_master" onclick="javascript:switchMenu(3, 4);">
		<img src="close.gif" alt="close" id="menu_master_3" /> Javascript
	</div>
	<div id="menu_sub_3" class="sub_menu">
		<ul>
			<li><a href="http://www.codebit.cn/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程</a></li>
			<li><a href="http://www.codebit.cn/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧</a></li>
		</ul>
	</div>

</div>

用 UL 制作的纵向导航菜单效果

导航菜单可以说是网站制作中最常见的工作,当然,由于他的重要性(基本上整个网站所有页面都会显示),所以,有不少设计师在上面花费了很多心血。本文介绍的是对纵向导航菜单的最简单的实现,相信明白了实现原理后,你可以制作出属于自己的精彩的导航效果,到时,可别忘了和大家共享哟!

用 UL 制作的纵向导航菜单效果 – 示例

 
<style type="text/css">
#navsite {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	font-weight: bold;
	width: 12em; 
	border-right: 1px solid #666; 
	padding: 0; 
	margin-bottom: 1em; 
	background-color: #9cc; 
	color: #333; 
}
#navsite ul {
	list-style: none; 
	margin: 0; 
	padding: 0; 
}
#navsite ul li {
	margin: 0; 
	border-top: 1px solid #003;
}
#navsite ul li a {
	display: block; 
	padding: 2px 2px 2px 0.5em; 
	border-left: 10px solid #369; 
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #036; 
	color: #fff; 
	text-decoration: none; 
	width: 100%; 
}
html>body #navsite ul li a { 
	width: auto; 
}
#navsite ul li a:hover {
	border-left: 10px solid #036;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369; 
	background-color: #69f; 
	color: #fff; 
}
 
</style>
 
<div id="navsite">
	<ul>
		<li><a href="http://www.codebit.cn">首页</a></li>
		<li><a href="http://www.codebit.cn/pub/article.php">技术文章</a></li> 
		<li><a href="http://www.codebit.cn/pub/contact.php">联系我们</a></li>
		<li><a href="http://www.codebit.cn/pub/submit.php">提交文章</a></li>
		<li><a href="http://feeds.feedburner.com/codebit">RSS 订阅</a></li>
	</ul>
</div>

用 UL 实现的“当前位置”导航效果

许多网站(特别是分类、栏目较多的网站),都会在页面醒目处放置一个“当前位置”的导航条,方便用户快速跳转,本文介绍的是用 UL 实现的类似效果。

用 UL 实现的“当前位置”导航效果 – 示例

 
<style type="text/css">
#crumbs {
	background-color: #eee;
	padding: 4px;
}
#crumbs ul {
	display: inline;
	padding-left: 0;
	margin-left: 0;
}
#crumbs ul li {
	display: inline;
}
#crumbs ul li a:link {
	padding: .2em;
}
#crumbs ul ul li{
	background-image: url('caret-r.gif');
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 12px;
}
</style>
 
<div id="crumbs">
	<ul>
		<li><a href="http://www.codebit.cn">首页</a>
		<ul>
			<li><a href="http://www.codebit.cn/pub/article.php">文章</a>
			<ul>
				<li><a href="http://www.codebit.cn/pub/html/php_mysql/">PHP/MySQL</a>
				<ul>
					<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/">PHP/MySQL Tip</a>
					<ul>
						<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/data/">数据类型</a></li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
			</li>
		</ul>
		</li>
	</ul>
</div>

用背景图实现的 tab 标签页导航菜单效果

本文介绍的是一个非常不错的CSS tab 标签页导航菜单效果,代码简洁,兼容各种浏览器,最关键的是:通过学习实例里面的思路,我们很容易做出各种漂亮的 tab 效果,希望对初学者有帮助!

先看看抓图:

用背景图实现的 tab 标签页导航菜单效果 – 示例

 
<style type="text/css">
<!--
body {
	margin:0;
	padding:0;
	font: bold 11px/1.5em Verdana;
}
img {
	border: none;
}
 
/*- Menu Tabs 1--------------------------- */
#tabs1 {
	float:left;
	width:100%;
	background:#F4F7FB;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #BCD2E6;
}
#tabs1 ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
}
#tabs1 li {
	display:inline;
	margin:0;
	padding:0;
}
#tabs1 a {
	float:left;
	background:url("tableft1.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
#tabs1 a span {
	float:left;
	display:block;
	background:url("tabright1.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#627EB7;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs1 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
	color:#627EB7;
}
#tabs1 a:hover {
	background-position:0% -42px;
}
#tabs1 a:hover span {
	background-position:100% -42px;
}
#tabs1 #current a {
	background-position:0% -42px;
}
#tabs1 #current a span {
	background-position:100% -42px;
}
-->
</style>
 
<div id="tabs1">
	<ul>
		<li id="current"><a href="Home.html"><span>Home</span></a></li>
		<li><a href="Products.html"><span>Products</span></a></li>
		<li><a href="Services.html"><span>Services</span></a></li>
		<li><a href="Support.html"><span>Support</span></a></li>
		<li><a href="Order.html"><span>Order</span></a></li>
		<li><a href="News.html"><span>News</span></a></li>
		<li><a href="About.html"><span>About</span></a></li>
	</ul>
</div>

背景图片:

代码简洁,又兼容各种浏览器,仔细读读代码,相信会有很大收获!如果您原创或者收集到更漂亮的效果,记得共享哟!

CSS Beauty 风格的分类列表导航样式

这是一个典型的用<ul>和<li>的方法制作的栏目导航样式,摘自CSS Beauty, 风格完全由 CSS 控制, 可以方便的修改其代码以统一到自己网站的整体风格之中, 可用于栏目导航和分类列表等应用.

CSS Beauty 风格的分类列表导航样式 – 示例

先看看效果:

CSS Beauty 风格的分类列表导航样式

CSS 部分的代码:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}
h2 {
	font-size: 1.1em;
	margin:0;
	line-height: 1;
}
#categories {
	width: 170px;
	float: left;
	margin: 0 5px 10px 5px;
}
#categories ul {
	font-size: 1.0em;
	margin:0;
	padding:0;
	list-style: none;
}
#categories li {
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #BBE0EB;
}
#categories a {
	display: block;
	text-decoration: none;
	padding: 3px 5px 3px 10px;
	height: 17px;
	color: #4896AC;
}

#categories a:hover { background:#F0FDE2; }

#categories h2 {
	padding: 10px 0 10px 0;
	clear: both;
	margin: 0;
	color: #83CDE1;
}

.clear { clear: both; }

-->
</style>

HTML 部分的代码:

 
<div id="categories">
	<h2>Categories</h2>
	<ul>
		<li><a href="#">Business</a></li>
				
		<li><a href="#">Entertainment</a></li>
				
		<li><a href="#">Other</a></li>
				
		<li><a href="#">Personal</a></li>
				
		<li><a href="#">Photography</a></li>
				
		<li><a href="#">Portal / Magazine</a></li>
				
		<li><a href="#">Sports</a></li>
				
	</ul>
</div>

本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.

用 UL 制作的横向导航菜单效果

导航菜单可以说是网站制作中最常见的工作,当然,由于他的重要性(基本上整个网站所有页面都会显示),所以,有不少设计师在上面花费了很多心血。本文介绍的是对横向导航菜单的最简单的实现,相信明白了实现原理后,你可以制作出属于自己的精彩的导航效果,到时,可别忘了和大家共享哟!

用 UL 制作的横向导航菜单效果 – 示例

 
<style type="text/css">
#navsite h5 {
	display: none;
}
#navsite ul {
	padding: 3px 0; 
	margin-left: 0; 
	border-bottom: 1px solid #778; 
	font: bold 12px Verdana, sans-serif; 
}
 
#navsite ul li {
	list-style: none;
	margin: 0; 
	display: inline; 
}
 
#navsite ul li a {
	padding: 3px 0.5em; 
	margin-left: 3px; 
	border: 1px solid #778;
	border-bottom: none;
	background: #DDE;
	text-decoration: none;
}
 
#navsite ul li a:link {
	color: #448;
}
 
#navsite ul li a:visited {
	color: #667;
}
 
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
	color: #000;
	background: #AAE;
	border-color: #227;
}
 
#navsite ul li a#current {
	background: white; 
	border-bottom: 1px solid white;
}
</style>
 
<div id="navsite">
	<h5>Site navigation:</h5>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">关于</a></li> 
		<li><a href="#">档案</a></li>
		<li><a href="#">作品</a></li>
		<li><a href="#" id="current">演讲</a></li> 
		<li><a href="#">联系</a></li>
	</ul>
</div>

可见,用这种方式做的导航,结构清晰,HTML代码简洁,改版时更是方便,根据本文的内容,相信您很容易做出符合自己网站风格的导航。

一个效果不错的 TAB 样式

本文介绍一种将 <ul> 和 <li> 修饰成 TAB 风格的 CSS 样式。

先看看最终效果:

css tab

一个效果不错的 TAB 样式 – 示例

现在我们可以结合效果来看看代码。

先看看 CSS 部分 :

 
<style type="text/css">

body {
	font-family:verdana,arial,sans-serif,"宋体";
	font-size:12px;
	margin:0px;
	padding:0px;
	background:#aaa;
}

a {
	color: #003499; 
	text-decoration: none;
}

a:hover {
	color: #000000; 
	text-decoration: underline;
}

#tabnav {
	background:#d5d5d5;
	border-bottom:1px solid #333;
	padding-bottom:3px;
}

#tabnav ul {
	padding:15px 0px 5px 0px;
	margin:5px 0px 5px 0px;
	list-style:none;
	background:#f1f1f1;
	border-bottom:1px solid #999;
}

#tabnav ul li {
	display:inline;
	margin-left:10px;
}

#tabnav ul li a {
	background:#fff;	
	padding:5px 10px 5px 10px;
	border:1px solid #999;
}

#tabnav ul li a:hover {
	background:#ccc;	
}

#tabnav ul li a.here {
	background:#d5d5d5;
	padding:5px 10px 5px 10px;
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #999;
	border-bottom:1px solid #d5d5d5;
}

#tabnav ul li a.here:hover {
	background:#d5d5d5;
}
	
</style>

代码中首先定义了整个文档的字体、文字大小及背景等信息,还定义了默认的链接样式。关键部分从 #tabnav 开始, #tabnav 就是要定义的 <ul> 的父元素,然后逐层定义 <li> <a> 等样式。

参照效果图我们可以看到:#tabnav ul li a.here 定义的是当前选中的链接样式。

对照着 (X)HTML 看看:

 
<div id="tabnav">
<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#" class="here">技术文章</a></li>
	<li><a href="#">提交文章</a></li>
	<li><a href="#">联系我们</a></li>
</ul>
</div>

通过修改 CSS 我们可以很容易的改变整个 TAB 的显示风格。