zoukankan      html  css  js  c++  java
  • 简约漂亮的JS下拉风格的导航条

    代码简介:简约漂亮的JS下拉风格的导航条,颜色搭配很好,效果也不错。

    代码内容:

    <!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>
    <title>简约漂亮的JS下拉风格的导航条_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	margin:10px;
    }
    
    #basic-accordian{
    	border:5px solid #EEE;
    	padding:5px;
    	350px;
    	position:absolute;
    	left:50%;
    	top:50%;
    	margin-left:-175px;
    	z-index:2;
    	margin-top:-100px;
    }
    
    .accordion_headings{
    	padding:5px;
    	background:#99CC00;
    	color:#FFFFFF;
    	border:1px solid #FFF;
    	cursor:pointer;
    	font-weight:bold;
    }
    
    .accordion_headings:hover{
    	background:#00CCFF;
    }
    
    .accordion_child{
    	padding:15px;
    	background:#EEE;
    }
    
    .header_highlight{
    	background:#00CCFF;
    }
    
    </style>
    <script type="text/javascript" src="http://www.webdm.cn/images/20100917/accordian.pack.js"></script>
    </head>
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    
    
    <div id="basic-accordian" ><!--Parent of the Accordion-->
    <!--Start of each accordion item-->
      <div id="test-header" class="accordion_headings header_highlight" >Home</div><!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child">
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut 
    
    blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque 
    
    rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
        
      </div>
    <!--End of each accordion item--> 
    <!--Start of each accordion item-->
      <div id="test1-header" class="accordion_headings" >About Us</div><!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test1-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child">
        	Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        </div>
        
      </div>
    <!--End of each accordion item--> 
    <!--Start of each accordion item-->
      <div id="test2-header" class="accordion_headings" >Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
      
      <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
      
      <div id="test2-content"><!--DIV which show/hide on click of header-->
      
      	<!--This DIV is for inline styling like padding...-->
        <div class="accordion_child">
        	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut 
    
    blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
        </div>
        
      </div>
    <!--End of each accordion item-->
    </div><!--End of accordion parent-->
    <table width="812" height="35" border="0" align="center" cellpadding="0">
      <tr>
        <td width="160" bgcolor="#99CC00"><div align="center"><a href="index.html">Index.html</a></div></td>
        <td width="160" bgcolor="#99CC00"><div align="center"><a href="common_content.html">common_content.html</a></div></td>
        <td width="160" bgcolor="#99CC00"><div align="center"><a href="left_navigation.html">left_navigation.html</a></div></td>
        <td width="160" bgcolor="#99CC00"><div align="center"><a href="right_navigation.html">right_navigation.html</a></div></td>
        <td width="160" bgcolor="#99CC00"><div align="center"><a href="tab_system.html">tab_system.html</a></div></td>
      </tr>
    </table>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/5ba48927-b4bd-4332-b78a-8c68cb2d5575.html

  • 相关阅读:
    让Div居中的方法
    创建对象的几种方式
    [Gport]2014移动互联网趋势——100名CEO的一句话解读
    专访腾讯云陈磊:微信云助力企业转型把握O2O时代价值
    Head First Python 学习笔记(第二章:分享你的代码)
    Head First Python 学习笔记(第一章:使用IDLE来帮助学习Python)
    《写给大家看的设计书》学习笔记
    用TreeView以递归显示选择磁盘上文件夹中全部文件夹和文件
    WebBrowser实现:自动填充网页上的用户名和密码并点击登录按钮
    C#调用免费天气预报WebService
  • 原文地址:https://www.cnblogs.com/webdm/p/2084985.html
Copyright © 2011-2022 走看看