• 案例 分层导航

    <!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;      
	   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;     
	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;    
	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; 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; 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      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     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     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>
  • 相关阅读:
    Explicitly configure spring.jpa.open-in-view to disable this warning
    [LeetCode] 982. Triples with Bitwise AND Equal To Zero 按位与为零的三元组
    [LeetCode] 981. Time Based Key-Value Store 基于时间的键值存储
    [LeetCode] 980. Unique Paths III 不同的路径之三
    [LeetCode] 979. Distribute Coins in Binary Tree 在二叉树中分配硬币
    [LeetCode] 978. Longest Turbulent Subarray 最长湍流子数组
    [LeetCode] 976. Largest Perimeter Triangle 最大周长的三角形
    [LeetCode] 977. Squares of a Sorted Array 有序数组的平方值
    [LeetCode] 975. Odd Even Jump 奇偶跳跃
    [LeetCode] 974. Subarray Sums Divisible by K 子数组数字之和可被K整除
  • 原文地址：https://www.cnblogs.com/zoubizhici/p/5487709.html
Copyright © 2020-2023  润新知