Hello,
I have been experimenting with CSS and Jquery.
I have created a CSS navigation menu, with jquery animation effects..This works fine..
However my navigation menu is written in an unordered list with href="" tags.
I would like to call a javascript function to open a grid AddProducts();
I have tried href="javascript:AddProducts();", href="onclick=AddProducts();", but this does not work.
I want the link to open a div on the same page without redirecting to another html page with the grid on it.
Is this possible?
Any help would be greatly appreciated.
Thank,
James
I have been experimenting with CSS and Jquery.
I have created a CSS navigation menu, with jquery animation effects..This works fine..
However my navigation menu is written in an unordered list with href="" tags.
I would like to call a javascript function to open a grid AddProducts();
I have tried href="javascript:AddProducts();", href="onclick=AddProducts();", but this does not work.
I want the link to open a div on the same page without redirecting to another html page with the grid on it.
Is this possible?
Any help would be greatly appreciated.
Thank,
James
Code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
<meta http-equiv=Content-Type content="text/html; charset=unicode"><meta content="MSHTML 6.00.2900.6003" name=GENERATOR></head>
<link rel="stylesheet" type="text/css" href="Jquery/css/redmond/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="Jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Jquery/js/jquery-ui-1.8.5.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="navimain/style.css" />
<script>
jQuery(document).ready(function() {
jQuery("ul#topnav li").hover(function() { //Hover over event on list item
jQuery(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
jQuery(this).find("span").slideDown(800); //Show the subnav
} , function() { //on hover out...
jQuery(this).css({ 'background' : 'none'}); //Ditch the background
jQuery(this).find("span").fadeOut(); //Hide the subnav
});
});
</script>
<body>
<body background="Windows_7_special_clean_HD_wallpaper 3.jpg">
<p></p>
<ul id=topnav>
<li><a id=OpenPopup href="#">HOME</a> </li>
<li><a href="#">INVENTORY</a> <!--Subnav Starts Here--><span><a
href="#">PRODUCTS</a> | <a href="#">ADD PRODUCTS</a> | <a href="#">SEARCH
INVENTORY</a> </span><!--Subnav Ends Here--></li>
<li><a href="#">STAGING</a> <span><a href="#">STAGING DATA</a> | <a
href="#">ADD STAGING</a> | <a href="#">SEARCH STAGING</a> </span></li>
<li><a href="#">CUSTOMERS</a> <span><a href="#">ADD CUSTOMER</a> | <a
href="#">ADD CHILD CUSTOMERS</a> | <a href="#">SEARCH CUSTOMERS</a>
</span></li>
<li><a href="#">REPORTS</a> <span><a href="#">PRODUCT REPORTS</a> | <a
href="#">ACCESSORY REPORTS</a> | <a href="#">STAGING REPORTS</a> </span></li>
<li><a href="#">ADMINISTRATION</a> <span><a href="#">ADD USERS</a> | <a
href="#">UTILITIES</a> </span></li>
<li><a href="#">LOGOUT</a> </li></ul>
<body></html>
Comment