Web site drop-down interface implementation

everyone in the site when you have encountered, the operation error will appear from the top of the site drop-down box prompts, or on a site's first page click

Mennu a list of the following forms appears. Here is a small series to take you to learn how this is done. First of all, let's look at the effect

Effect Show (1):

Display effect (2):

Let's look at how the code is implemented.

HTML code:

<div class= "menu" ><a href= "#" class= "RIGHT_BT" id= "Activator" ></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" ></a>  </div>                </div>

main CSS styles:

. 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 Code:

<script type= "Text/javascript" >var $ = jquery.noconflict (); $ (function () {//interface is hidden above the screen $ (' #activator '). Click ( Function () {$ (' #box '). Animate ({' top ': ' 0px '},500);}); /interface appears on the screen $ (' #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 () {// Use the sliding effect to switch $ (this). Toggleclass ("active"). Next (). Slidetoggle ("slow"); return false; Prevent the browser jump to the link anchor}); </script>

through the pre-facing BS of learning we can not find the implementation of this feature more use of technology, HTML Building Basic framework, CSS implementation of the interface beautification, JQuery

Let the interface move up. The dynamic effect of the pull-down interface here is achieved through jquery, which makes it easier to do.

Web site drop-down interface implementation