css3 Tab Menus Without Javascript

時間 2019-12-19

標籤 css3 css tab menus javascript 欄目 CSS 简体版

原文原文鏈接

css3對ie沒效果。其餘瀏覽器能夠運行css

<!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">
<head>
<title>CSS3 jQuery style menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

* { margin:0;
	padding:0;
}

html {height: 100%;}

body{
	position: relative;
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));

}

.navbox {
	position: relative;
	float: left;
}

ul.nav {
	list-style: none;
	display: block;
	width: 200px;
	position: relative;
	top: 100px;
	left: 100px;
	padding: 60px 0 60px 0;
	background: url(shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}

li {
	margin: 5px 0 0 0;
}

ul.nav li a {
	-webkit-transition: all 0.3s ease-out;
	background: #cbcbcb url(border.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
 	-webkit-border-bottom-right-radius: 10px;
	width: 100px;
	display: block;
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
	background: #ebebeb url(border.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}

</style>

</head>

<body>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</div>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>

</body>
</html>

效果圖html

1. Android : Menus Part 3: Alternative Menus
2. 47 Amazing CSS3 Animation Demos
3. Android--Menus
4. tab頁
5. Use blocks and menus
6. ZK: Ajax without the Javascript Framework
7. HTML5 + CSS3 + JavaScript
8. Failed to create Anaconda Menus
9. Owner Draw Menus in C#
10. Javascript 實現Tab選項卡
更多相關文章...
• JavaScript 指南 - 網站建設指南
• ionic tab(選項卡) - ionic 教程
• YAML 入門教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解

相關標籤/搜索

html5+css3+javascript

css3

javascript

html5&css3&javascript&php&mysql

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。