網站下拉介面的實現

標籤：js   css   html   .net   

      大家在逛網站的時候有沒有遇到過，操作失誤時會從網站頂端出現下拉框的提示，或者在某個網站的首頁單擊

mennu會出現下表單的列表。下面小編帶你一塊兒來學習這是如何做成的。首先大家先看一下效果

    效果展示（1）：

    

    展示效果（2）：

    下面看一下代碼是如何?的。

    html代碼：

<div class="menu"><a href="#" class="right_bt" id="activator"><img src="images/nav_icon.png" alt=""></a><div class="box" id="box">   <div class="box_content_center">   <div class="menu_box_list">   <ul>   <li><a href="index.html">Home</a></li>   <li class="active"><a href="about.html">About</a></li>    <li><a href="blog.html">Blog</a></li>    <li><a href="gallery.html">Gallery</a></li>   <li><a href="contact.html">Contact</a></li>   <li><a href="404.html">404</a></li>   </ul></div><a class="boxclose" id="boxclose"><img src="images/close.png" alt=""></a>  </div>                </div>

    主要CSS樣式：

.box{position:absolute;top:-1200px;width:100%;color:#7F7F7F;margin:auto;padding:0px;z-index:999999;text-align:center;left:0px;}a.boxclose{cursor: pointer;text-align: center;display: block;position: absolute;top: 1.9em;right: 15em;}.boxclose span{width:45px;height:45px;display:inline-block;background: url(../images/image-sprite.png) no-repeat -8px -369px;}.boxclose span:hover{background: url(../images/image-sprite.png) no-repeat -6px -308px;}

    JQuery代碼：

    

<script type="text/javascript">var $ = jQuery.noConflict();$(function() {//介面隱藏在螢幕上方$('#activator').click(function(){$('#box').animate({'top':'0px'},500);});//介面出現在螢幕上$('#boxclose').click(function(){$('#box').animate({'top':'-700px'},500);});});$(document).ready(function(){//Hide (Collapse) the toggle containers on load$(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)$(".trigger").click(function(){//使用滑動效果實現切換$(this).toggleClass("active").next().slideToggle("slow");return false; //Prevent the browser jump to the link anchor});});</script>

         通過前面對BS的學習我們不難發現實現該功能更所用到的技術，html構建基本架構，CSS實現介面的美化，JQuery

讓介面動起來。這裡實現下拉的介面的動態效果就是通過JQuery來實現的，明白了這些做起來就順暢了。

網站下拉介面的實現