Implementing Slide Effect

Implementing Slide Effect




A slide effect can be used to produce a sliding  effect on the selected elements. There are three slide functions , slideDown(), slideUp(), and slideToggle () which can be applied on the selected elements.
These functions apply a gradual modification on the height of the selected elements to create the slide animation  effect on a Web page.

...................................................................................................................................................................Function
slideDown()

Description
Produces the effect of the sliding selected elements in the downward direction.

Syntax
$(selector).slideDown(speed)

...................................................................................................................................................................
Function
slideUp()

Description
Produces the effect of the sliding selected elements in the upward direction.

Syntax
$(selector).slideUp(speed)

...................................................................................................................................................................
Function
slideToggle()

Description
Proforms the slideup and slidedown functions, respectively, or alternate clicks.

Syntax
$(selector).slideToggle(speed)

...................................................................................................................................................................
Consider the following code to implement the slide effect.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$(".flipbut").click(function){
$(".thought").slideToggle();
});
});
</SCRIPT>
<STYLE type="text/css">
div.thought,.flipbut{/*stylizing the div element with the class attribute specified as"thought", and the button with the class attribute specified as "flipbut"*/}
margin:0px;
padding:5px;
text-align:center;
background:beige;
border:solid 1px;
}
div.thought
{
height:120px;
display:none;
}
</STYLE>
</HEAD>
<BODY>
<BR><BR>
<BUTTON style="background-color:beige" class="flipbut" text-align"center" >Show/Hide the thought of the Day</BUTTON>
<DIV class="thought">
<P>The thought of the Day is:</P>
<P>Where there is a will, there is a way!</P>
</DIV>
</BODY>
</HTML>
In the preceding code , when the Show/Hide the thought of the day button is clicked, toggle functionality is implemented between slide up and slide down on the <DIV> element  along with the thought class.
For the online shopping website, ShopForYou.com the menu and submenu must be sliding . When a user clicks a product category, the detailed products for that category should be displayed by using the slide toggle effect.

To implement this functionality in the ShopForYou.com website you need to write the following code in a file and save the file as menu.html:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){
$('#menu ul').hide();
$('#menu li a').mouseenter(function(){
$(this).next().slideToggle('slow');
}
);
});
</SCRIPT>
<STYLE type="text/css">
body{
background-image:url('background.jpg');
}
li a
{
display:inline;
}
body{
font-family: Arial, sans -serif;
font-size: 0.9em;
background-color:silver;
}
P
{
line-height: 1.5em;
}
#menu, ul#menu ul{/* stylizing the menu  and the list nested in the menu*/
list-style-type:none;
margin:0px;
padding:0px;
width:10em;
}
ul#menu a{/* stylizing the <a> elements nested in the menu*/
display:inline;
text-decoration:none;
}
ul#menu li{/*stylizing the list items  nested in the menu*/
margin-top: 1px;
}
ul#menu li a {*/stylizing the <a> elements nested in the list items  of the menu*/
background: darkcyan;
color: #fff;
padding: 0.5em;
}
ul#menu li a :hover{*/stylizing the <a> elements nested in the list items of the menu  when mouse is placed or move over them*/
background: black;
}
ul#menu li ul li a {
background: grey;
color: white;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background : #aaa;
color: white;
border-left: 5px grey solid;
padding-left: 15px;
}
.st
{
display: inline;
}
</STYLE>
</HEAD>
<BODY>
<H3> Product Categories</H3>
<UL ID="menu">
<LI class=".st"><A>Computers</A>
<UL>
<LI><A href="">e- book Readers</A></LI>
<LI><A href="">Tablet and I pads</A></LI>
<LI><A href="">Laptops</A></LI>
</UL>
</LI>
<LI class=".st"><A> Entertainment</A>
<UL>
<LI><A href="">Led-TVs</A></LI>
<LI><A href="">Lcd-TVs</A></LI>
</UL>
</LI>
<LI class=".st"><A>Cameras</A>
<UL>
<LI><A href="">Digital Cameras</A></LI>
<LI><A href="">Digital SLR Cameras</A></LI>
</UL>
</LI>
</UL>
</BODY>
</HTML>

In the preceding code, a menu that display the Computers, Entertainment and Cameras product categories is created and  stylized by  using CSS. A product categories contains different products items under it. All product items are hidden and only the Computers, Entertainment, and Cameras product categories are visible ,



When a product categories is clicked , the product items that belong to that specific product category appear to slide down by using the slide toggle effect provided by jQuery. After clicking the Entertainment product category, a submenu is displayed


About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment