案例分层导航 / 憋错料

案例分层导航

<!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>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#apDiv1 {
	  position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
      left: auto;
	  top: auto;
	  bottom:auto;
	  width: 237px;
	  height:auto;
	  z-index: 2;
	  margin-top:-8px;
	  margin-left:40px;
	  text-align:center;
	  font-size:16px;
	  font-family:"黑体";
	  color:#965D28;
	  background-image:url(../img/bg.png);
}
#menu{
	display:none;
}
.daohang div{
	height: 30px;
	z-index: 2;
	margin:0 auto;
	text-align:center;
	padding-top:5px;
	overflow:hidden;
	padding-top:10px;
	color:965D28;
}
.daohang div:hover{
	height:30px;
	z-index:2;
	margin:0 auto;
	background-image:url(../img/menu-hover.png);
	text-align:center;
	overflow:visible;
	color:#fff;
}
.daohang li{
	margin-left:237px;
	list-style-type:none;
	background-color:#D3A23A;
	width:160px;
	line-height:30px;
	color:#422B1D;
	position:relative;
	top:-40px;
	background-image:url(../img/bg.jpg);
	border:solid thin;
	border-color:#965D28;
	z-index:1;
}
.daohang li:hover{
	margin-left:237px;
	list-style-type:none;
	background-color:#D3A23A;
	width:160px;
	line-height:50px;
	color:#fff;
	position:relative;
	top:-40px;
	border:solid thin;
	border-color:#965D28;
	background-image:url(../img/bg.png);
	z-index:1;
}
.daohang a:link,a:visited{
	text-decoration:none;
	color:#965D28; }
.daohang a:hover{
	text-decoration:none;
	color:#fff;
}

</style>

</head>

<body>
<script> 　　
function menuvisible()
{ 　　
	$("nav").slideToggle(1500);/*开关*/　　
}
</script>

<div id="apDiv1" >

<nav id="menu">
<div class="daohang" style=" background-color:#630">
<a href="index.html">
<div style=" background-color:#FC0; color:#fff">首页
</div>
</a>
<a href="about us.html" target="_blank"><div>关于我们
</div>
</a>       

<a href="services.html" target="_blank"><div>咖啡文化
</div></a>
<a href="price list.html" target="_blank"><div>价格清单
</div>
</a>
<a href="contact.html" target="_blank"><div>联系我们
</div></a>
</div>
</nav>
<div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
<input style="color:#fff; border:none; width:100%; background-color:#630; font-family:‘黑体‘; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
</div>
<div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
</a>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
咖啡

</body>
</html>

、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）

1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2、插入div（这里我的div是带有锚点效果的，已经用红色标出锚点，定位到了网页顶端，也就是<body>开始的地方写了一句<a name="top">top</a>，如果不给name一个初始值，就写上a href="#"同样有回到顶端的效果）

 1 <div id="apDiv1" ><img src="img/logo.bmp" /> 2   <nav id="menu"> 3   <div class="daohang" style="background-image:url(img/bg.png)"> 4       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5       <a href="about us.html" target="_blank"><div> 6       关于我们</div></a>       7        8       <a href="services.html" target="_blank"><div>咖啡文化</div></a> 9       10       <a href="price list.html" target="_blank"><div>价格清单</div></a>11        12       <a href="contact.html" target="_blank"><div>联系我们</div></a>13       14   </div>15   </nav>16   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">17   <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:‘黑体‘; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>18   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>

3、CSS样式表的制作(一些属性设置换上你们需要的属性就可以了)

 1 /*————导航—————*/ 2 #apDiv1 { 3     position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果
 4     left: auto; 5     top: auto; 6     bottom:auto; 7     width: 237px; 8     height:auto; 9     z-index: 2;10     margin-top:-8px;11     margin-left:40px;12     text-align:center;14     font-size:16px;15     font-family:"黑体";16     color:#965D28;17     background-image:url(../img/bg.png);18     }19 #menu{20     display:none;21 }22 .daohang div{23     height: 30px;24     z-index: 2;25     margin:0 auto;26     text-align:center;27     padding-top:5px;28     overflow:hidden;29     padding-top:10px;30     color:965D28;31 }32 .daohang div:hover{33     height:30px;34     z-index:2;35     margin:0 auto;36     background-image:url(../img/menu-hover.png);37     text-align:center;38     overflow:visible;39     color:#fff;40 }41 42 .daohang li{43     margin-left:237px;44     list-style-type:none;45     background-color:#D3A23A;46     width:160px;47     line-height:30px;48     color:#422B1D;49     position:relative;50     top:-40px;51     background-image:url(../img/bg.jpg);52     border:solid thin;53     border-color:#965D28;54     z-index:1;55     }56 .daohang li:hover{57     margin-left:237px;58     list-style-type:none;59     background-color:#D3A23A;60     width:160px;61     line-height:50px;62     color:#fff;63     position:relative;64     top:-40px;65     border:solid thin;66     border-color:#965D28;67     background-image:url(../img/bg.png);68     z-index:1;69     }70 .daohang a:link,a:visited{71     text-decoration:none;72     color:#965D28;73 }74 .daohang a:hover{75     text-decoration:none;76     color:#fff;77 }

4、鼠标点击事件的触发（写在body里面）

1 <script>2 　　function menuvisible() {3 　　$("nav").toggle();/*开关*/4 　　}    5 </script>

时间： 2024-11-09 00:38:29

案例分层导航的相关文章

分层导航and隐藏导航

一.分层导航 <!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> <script language="j

【iOS开发-76】Private Contacts案例：导航控制器使用、数据传递、第三方类库使用、tableViewCell的添加删除、数据存储等

(1)效果 (2)源代码与第三方类库下载 http://download.csdn.net/detail/wsb200514/8155979 (3)总结 --导航控制器,可以直接用代码的push和pop来控制控制器之间的跳转.也可以使用storyboard的segue来:这里又涉及2种,一种是直接用按钮拖拽到另一个控制器形成segue,这种segue不可拦截,如果点击直接跳转.另一种是从一个控制器拖拽到另一个控制器形成的segue,这种segue没有明确的点击谁来跳转,所以有一个performS

3D案例，导航，导航升级版

/*****************************百度钱包旋转变内容******************************/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度钱包旋转变内容</title> <style> .wallet{ width: 300px; height:300px ; margin:

分层导航

<!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="Content-

jQuery实际案例④——360导航图片效果

如图:①首先使用弹性盒子布局display:flex; flex-wrap:wrap; ②鼠标移上去出现"百度一下,你就知道了",这句话之前带上各个网站的logo:③logo使用的是sprite,需要注意的是background-position使用的是负值(-) 整体代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

悬浮动态分层导航

1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) 1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 2.插入div(这里我的div是带有锚点效果的,已经用红色标出锚点,定位到了网页顶端,也就是<body>开始的地方

课堂笔记----悬浮动态分层导航

分层导航的做法

<!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> <script language="javascri

WP8.1学习系列(第二十二章)——在页面之间导航

在本文中先决条件创建导航应用 Frame 和 Page 类页面模板中的导航支持在页面之间传递信息缓存页面摘要后续步骤相关主题重要的 API Page Frame NavigationCacheMode 本主题将讨论基本的导航概念,并演示如何创建一个在两个页面之间进行导航的应用. 有关为你的应用选择最佳导航模式的帮助,请参阅导航模式. 在操作时请参阅平面导航和分层导航模式,它们是应用功能大全系列的一部分. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visual

案例 分层导航

案例 分层导航的相关文章

案例分层导航

案例分层导航的相关文章