zoukankan      html  css  js  c++  java
  • 【荐】jQuery+Css打造位于网页顶部漂亮黄色下拉导航

    代码简介:

    一款jquery制作的下拉风格导航,用在网页的顶部,大气又不占地方,值得推荐给您,单击运行,您就能看见效果。

    代码内容:

    <!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-Type" content="text/html; charset=gbk" />
    <title>【荐】jQuery+Css打造位于网页顶部漂亮黄色下拉导航_网页代码站(www.webdm.cn)</title>
    
    <script type="text/javascript" src="http://www.webdm.cn/images/20091029/jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    	$(".btn-slide").click(function(){
    		$("#panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    	});
    	
    	 
    });
    </script>
    
    <style type="text/css">
    body {
    	margin: 0 auto;
    	padding: 0;
    	 570px;
    	font: 75%/120% Arial, Helvetica, sans-serif;
    }
    a:focus {
    	outline: none;
    }
    #panel {
    	background: #754c24;
    	height: 200px;
    	display: none;
    }
    .slide {
    	margin: 0;
    	padding: 0;
    	border-top: solid 4px #422410;
    	background: url(http://www.webdm.cn/images/20091029/btn-slide.gif) no-repeat center top;
    }
    .btn-slide {
    	background: url(http://www.webdm.cn/images/20091029/white-arrow.gif) no-repeat right -50px;
    	text-align: center;
    	 144px;
    	height: 31px;
    	padding: 10px 10px 0 0;
    	margin: 0 auto;
    	display: block;
    	font: bold 120%/100% Arial, Helvetica, sans-serif;
    	color: #fff;
    	text-decoration: none;
    }
    .active {
    	background-position: right 12px;
    }
    </style>
    </head>
    
    <body>
    
    <div id="panel">
    	<p style="margin: 5px;color: #fff;line-height:20px;">网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br>网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!<br></p>
    </div>
    
    <p class="slide"><a href="#" class="btn-slide">网页代码站</a></p>
    
    <p>看不到效果请您刷新本页面</p>
    
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/d4bd35ce-46c7-45e5-b584-14f962f46ba0.html

  • 相关阅读:
    Java基础知识强化97:final、finally、finally区别
    Java基础知识强化之集合框架笔记02:集合的继承体系图解
    Java基础知识强化之集合框架笔记01:集合的由来与数组的区别
    Java基础知识强化96:Calendar类之获取任意年份的2月有多少天的案例
    Java基础知识强化95:Calendar类之Calendar类的add()和set()方法
    Gym
    Gym
    Good Bye 2015 B. New Year and Old Property —— dfs 数学
    HDU1873 看病要排队 —— 优先队列(STL)
    HDU5877 Weak Pair dfs + 线段树/树状数组 + 离散化
  • 原文地址:https://www.cnblogs.com/webdm/p/2033282.html
Copyright © 2011-2022 走看看