仿苹果MAC机桌面导航菜单：Css Dock Menu

最新推荐文章于 2024-07-29 11:53:27 发布

yue2008

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量949

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yue2008/article/details/84172724

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

菜单在顶部：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="interface.js"></script>
	<style type="text/css">
		.dock {
			position: relative; 
			height: 50px; 
			text-align: center;
		}
		.dock-container {
			position: absolute;
			height: 50px;
			background: url(images/dock-bg2.gif);
			padding-left: 20px;
		}
		a.dock-item {
			display: block;
			width: 40px;
			color: #000;
			position: absolute;
			top: 0px;
			text-align: center;
			text-decoration: none;
			font: bold 12px Arial, Helvetica, sans-serif;
		}
		.dock-item img {
			border: none; 
			margin: 5px 10px 0px; 
			width: 100%; 
		}
		.dock-item span {
			display: none; 
			padding-left: 20px;
		}
	</style>
</head>

<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>
	<div id="dock2" class="dock">
		<div class="dock-container2">
			<a class="dock-item2" href="#"><span>11</span><img src="11.gif" alt="011"/></a> 
			<a class="dock-item2" href="#"><span>12</span><img src="12.gif" alt="012"/></a> 
			<a class="dock-item2" href="#"><span>13</span><img src="13.gif" alt="013"/></a> 
			<a class="dock-item2" href="#"><span>14</span><img src="14.gif" alt="014"/></a> 
			<a class="dock-item2" href="#"><span>15</span><img src="15.gif" alt="015"/></a>
			<a class="dock-item2" href="#"><span>16</span><img src="16.gif" alt="016"/></a>
			<a class="dock-item2" href="#"><span>17</span><img src="17.gif" alt="017"/></a>   
		</div> 
	</div>

	<script language="javascript">
		jQuery(document).ready(function(){
			jQuery("#dock").Fisheye({
				maxWidth: 50,
				items: 'a',
				itemsText: 'span',
				container: '.dock-container',
				itemWidth: 45,
				proximity: 90,
				halign: 'center'
			});
		});
	</script>
</body>
</html>

2、菜单在底部

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="interface.js"></script>
	<style type="text/css">
		#dock2 {
			width: 100%;
			bottom: 0px;
			position: absolute;
			left: 0px;
		}
		.dock-container2 {
			position: absolute;
			height: 50px;
			background: url(images/dock-bg.gif);
			padding-left: 20px;
		}
		a.dock-item2 {
			display: block; 
			font: bold 12px Arial, Helvetica, sans-serif;
			width: 40px; 
			color: #000; 
			bottom: 0px; 
			position: absolute;
			text-align: center;
			text-decoration: none;
		}
		.dock-item2 span {
			display: none;
			padding-left: 20px;
		}
		.dock-item2 img {
			border: none; 
			margin: 5px 10px 0px; 
			width: 100%; 
		}
	</style>
</head>

<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>
	<div id="dock2" class="dock">
		<div class="dock-container2">
			<a class="dock-item2" href="#"><span>11</span><img src="11.gif" alt="011"/></a> 
			<a class="dock-item2" href="#"><span>12</span><img src="12.gif" alt="012"/></a> 
			<a class="dock-item2" href="#"><span>13</span><img src="13.gif" alt="013"/></a> 
			<a class="dock-item2" href="#"><span>14</span><img src="14.gif" alt="014"/></a> 
			<a class="dock-item2" href="#"><span>15</span><img src="15.gif" alt="015"/></a>
			<a class="dock-item2" href="#"><span>16</span><img src="16.gif" alt="016"/></a>
			<a class="dock-item2" href="#"><span>17</span><img src="17.gif" alt="017"/></a>   
		</div> 
	</div>

	<script language="javascript">
		jQuery(document).ready(function(){
			jQuery("#dock2").Fisheye({
				maxWidth: 50,
				items: 'a',
				itemsText: 'span',
				container: '.dock-container2',
				itemWidth: 45,
				proximity: 90,
				alignment: 'left',
				valign: 'bottom',
				halign: 'center'
			});
		});
	</script>
</body>
</html>

yue2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿苹果MAC机桌面导航菜单：Css Dock Menu

菜单在顶部：&lt;!doctype html public "-//w3c//dtd html 4.0 transitional//en"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt; new document &lt;/title&gt; &lt;meta http-equiv="content-type" content
复制链接

扫一扫

专栏目录