Sometimes we don’t want to many contents congest in a web page, or we don’t want to force visitors to see some contents that may not interested to them. A good idea is to let visitors to choose whether to read the contents or not. In this case we can use a jQuery slide down menu. If visitors find some topic interesting, they can click on a menu and then the contents be slide down like a curtain.
The following is the effect of a jQuery slide down menu:
Making this jQuery slide down menu is rather easy. Here’s the file:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Slide Down Menu to Display Web Contents</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("document").ready(function() { // Load web page $("#slideDownMenuContent").load('example-1.html'); $(".loadPage1").click(function() { if ( $(this).is(".loadPage1") ) { // The CSS display property of #slideDownMenuContent is set to none // Show the height to display the content $("#slideDownMenuContent").animate({ height: 'show' }); // Toggle the class $(this).toggleClass("loadPage1 loadPage2") } else { // Hide the height again so that the contents will be hidden $("#slideDownMenuContent").animate({ height: 'hide' }); // Toggle the class $(this).toggleClass("loadPage1 loadPage2") } }); }); </script> </head> <body> <h1>jQuery Slide Down Menu to Display Content</h1> <div id="slideDownMenuContent"></div> <div style="width:302px; text-align: center; margin-bottom:10px; border-top: solid 6px #C00;"> <input type="button" value="Click Here to View/Hide Content" /> </div> <div>This is another block of text here.....</div> </body> </html>
Let’s take a look at the CSS styles of the div layer:
The CSS display property of #slideDownMenuContent div layer is set to none. Therefore this div layer will be hidden.
When the button is clicked, the height of #slideDownMenuContent div layer will be shown.
$(“#slideDownMenuContent”).animate({ height: ‘show’ });
When the button is clicked again, the height of #slideDownMenuContent div layer will be hidden again.
Therefore the #slideDownMenuContent div layer will be slide down and up when the button is clicked.
Leave a Reply