I am really new to JavaScript, but I really want to know how to make a nav like this.. Can someone please link me to a tutorial or tell me how to do it? Thanks Link: http://web71.s95.netcup.net/site/cp10/index.php
hi dnelsalty, I think first you should use google to find some javascript tutorials for beginners, and then do the same for jquery. Once you know a little bit about jquery, just right click on the page, and then choose "view page source", you will then be able to see the code of the page.
Here you go: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Tanatos" /> <title>Untitled 2</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#"+$('#menu .default').attr('rel')).slideToggle('fast',function(){ $(this).removeClass('noshow'); }); $('.menu_item').live('click',function(){ $('#submenu div').each(function(){ if(!$(this).hasClass('noshow')) { $(this).addClass('noshow'); $(this).slideToggle('fast'); } }); $("#"+$(this).attr('rel')).slideToggle('fast',function(){ $(this).removeClass('noshow'); }); return false; }); }); </script> <style> .noshow { display : none; } </style> </head> <body> <div id="menu"> <a class="menu_item default" rel="menu1" href="#">Home</a> | <a class="menu_item" rel="menu2" href="#">Test</a> | <a class="menu_item" rel="menu3" href="#">Test2</a> </div> <div id="submenu"> <div class="noshow" id="menu1"> <a href="#">Sub1_Menu1</a> | <a href="#">Sub2_Menu1</a> | <a href="#">Sub3_Menu1</a> </div> <div class="noshow" id="menu2"> <a href="#">Sub1_Menu2</a> | <a href="#">Sub2_Menu2</a> | <a href="#">Sub3_Menu2</a> </div> <div class="noshow" id="menu3"> <a href="#">Sub1_Menu3</a> | <a href="#">Sub2_Menu3</a> | <a href="#">Sub3_Menu3</a> </div> </div> </body> </html> HTML: