Scribd
Upload
50 views

Jquirycode

The document contains code for creating animated menus using jQuery. It defines CSS styles and JavaScript functions to toggle menu item styles on mouseenter and mouseleave events, animating the style changes with jQuery's switchClass method. Examples are provided for both horizontal and vertical menu layouts. The code allows creating animated drop-down or rollover effects for navigational menus.

Uploaded by

Santosh Singh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

Jquirycode

The document contains code for creating animated menus using jQuery. It defines CSS styles and JavaScript functions to toggle menu item styles on mouseenter and mouseleave events, animating the style changes with jQuery's switchClass method. Examples are provided for both horizontal and vertical menu layouts. The code allows creating animated drop-down or rollover effects for navigational menus.

Uploaded by

Santosh Singh
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<html> <head> <title>My Web Page</title> <script src="js/jquery-1.4.2.

js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> // run the function below once the DOM(Document Object Model) is ready $(document).ready(function() { // trigger the function when clicking on an assigned element $(".toggle").click(function () { // check the visibility of the next element in the DOM if ($(this).next().is(":hidden")) { $(this).next().slideDown("fast"); // slide it down } else { $(this).next().hide(); // hide it } }); }); </script> <style type="text/css"> .hiddenDiv{ display:none; } </style> </head> <!-- Start Web Page Body --> <body> Here is content section 1 <span class="toggle"> <a href="#" style="cursor:pointer;">show hidden container</a> </span> <div class="hiddenDiv" style="border:#030 1px solid; background-color:#CEFFDB; width:350px;"> Content I want to hide then slide into view for section 1 <br /><br /> I can put any website elements I wish to in here, and style it any way I please. </div> <hr /> Here is content section 2 <span class="toggle"> <a href="#" style="cursor:pointer;" onClick="return false">show hidden container</a> </span> <div class="hiddenDiv" style="border:#06C 1px solid; background-color:#CEE7FF; width:350px;">

Content I want to hide then slide into view for section 2 <br /><br /> I can put any website elements I wish to in here, and style it any way I please. </div> <hr /> </body> </html> 222

<!-- This is your PHP script... myphpscript.php --> <?php $contentVar = $_POST['contentVar']; if ($contentVar == "con1") { echo "My default content for this page element when t he page initially loads"; } else if ($contentVar == "con2") { echo "This is content that I want to load when the se cond link or button is clicked"; } else if ($contentVar == "con3") { echo "Content for third click is now loaded. Any <str ong>HTML</strong> or text you wish."; } ?> <!-- This is any HTML or PHP file you wish to use --> <html> <head> <script type="text/javascript" src="jQuery1.5.1.js"></script> <script language="JavaScript" type="text/javascript"> <!-function swapContent(cv) { $("#myDiv").html('<img src="loader.gif"/>').show(); var url = "myphpscript.php"; $.post(url, {contentVar: cv} ,function(data) { $("#myDiv").html(data).show(); }); } //-->

</script> <style type="text/css"> #myDiv{ width:200px; height:150px; padding:12px; border:#666 1px solid; background-color:#FAEEC5; font-size:18px; } </style> </head> <body> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con1');">Content1</a> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con2');">Content2</a> <a href="#" onClick="return false" onmousedown="javascrip t:swapContent('con3');">Content3</a> <div id="myDiv">My default content for this page element when the page initially loads</div> </body> </html>
333

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Adam's jQuery switchClass Animated Horizontal Menu Example</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script> <script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script type="text/javascript"> $(document).ready(function() { // Mouse Enter Animation Mechanism $("#menu a").mouseenter(function () { $(this).switchClass("style1", "style2", 700); }); // Mouse Leave Animation Mechanism $("#menu a").mouseleave(function () { $(this).switchClass("style2", "style1", 700);

}); }); </script> <style type="text/css"> body{background:#161616; margin:0px;} #topBanner{background-color: #333; font-size:28px; color:#999; padding:24px;} /* Start styles for the menu elements */ #menu{background:#000; border:#1E1E1E 1px solid; padding:10px 0px 10px 0px;} .style1 { background-color:#000; font-size:16px; color:#666; padding:10px 30px 10px 30px; border:#1E1E1E 1px solid; text-decoration:none; } .style2 { background-color:#055F7C; font-size:16px; color:#FFF; padding:10px 30px 10px 30px; border:#1E1E1E 1px solid; text-decoration:none; } /* End styles for the menu elements */ </style> </head> <body> <div id="topBanner"> jQuery switchClass CSS Animated Horizontal Menu Tutorial </div> <div id="menu"> <a class="style1" href="#">Home</a><a class="style1" href="#">Services</a><a class="style1" href="#">Portfolio</a><a class="style1" href="#">Clients</a><a class="style1" href="#">News</a><a class="style1" href="#">Contact Us</a> </div> </body> </html>

4444

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Adam's jQuery switchClass Animated Vertical Menu Example</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script> <script type="text/javascript" src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script type="text/javascript"> $(document).ready(function() { // Mouse Enter Animation Mechanism $("#menu a").mouseenter(function () { $(this).switchClass("style1", "style2", 700); }); // Mouse Leave Animation Mechanism $("#menu a").mouseleave(function () { $(this).switchClass("style2", "style1", 700); }); }); </script> <style type="text/css"> body{background:#333; margin:0px;} #topBanner{background-color:#000; font-size:28px; color:#999; padding:24px;} /* Start styles for the menu elements */ #menu{} #menu ul{list-style:none; margin:0px; padding:0px;} #menu ul li{height:54px;} #menu ul li a{ display:block; width:148px; padding:16px 10px 16px 10px; font-size:16px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; } .style1 { background-color: #1B1B1B; color:#999; border:#000 1px solid; } .style2 { background-color: #121212; color:#0CF; border:#000 1px solid; } /* End styles for the menu elements */

</style> </head> <body> <div id="topBanner"> jQuery switchClass CSS Animated Vertical Menu Tutorial </div> <div id="menu"> <ul> <li><a class="style1" href="#">Home</a></li> <li><a class="style1" href="#">Services</a></li> <li><a class="style1" href="#">Portfolio</a></li> <li><a class="style1" href="#">Clients</a></li> <li><a class="style1" href="#">News</a></li> <li><a class="style1" href="#">Contact Us</a></li> </ul> </div> </body> </html>

You might also like