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