Very Simple Collapsible Menu Using Dreamweaver or Hand-Coded

In 3 easy steps, you can build a collapsible menu in Dreamweaver or by hand-coding that works in all browsers, including IE6. Read On. This code and tutorial is free for you to to use and uses jQuery.
Demo Click Here >>

Feel Free to Download the zip file, and use it as you please. Its clean and nicely organized in this zip. Otherwise, you can follow these easy steps below.

 

Step 1

Copy and paste  the code below into the head of your webpage. To do that, in Dreamweaver, click on the "Split" button up top on the Dreamweaver Window (see image below), so that you can insert the code into the right place. Right near the top of the code, right after you see the <head> tag,  paste in the code that's below this.  


<!--Built by Dan Czyzyk - Free to Use -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/javascript">
    
     var dropCount = 1;
     
      $("document").ready (function(){
           $("li[class^='dropTarget']").each(function(){
               $(".dropTarget"+ dropCount +" > a").attr("id", "dropATarget"+dropCount );
               $(".dropTarget"+ dropCount +" > ul").attr("id", "dropMenu"+dropCount );
               $("#dropMenu"+dropCount).hide();
               dropCount++;
           });
      });
      
      $(function(){
           $("a[id^='dropATarget']").click(function(){
               $(this).next().slideToggle("normal");
           });
       });
    </script>

<style type="text/css">
.dropTarget1, .dropTarget2,  .dropTarget3,  .dropTarget4,  .dropTarget5,  .dropTarget6,  .dropTarget7,  .dropTarget8,  .dropTarget9,  .dropTarget10,  .dropTarget11,  .dropTarget12,  .dropTarget13,  .dropTarget14, .dropTarget15 {}
</style>

Step 2

Click on the "Design" button (image above), if you do not want to look at that code. Then, put together a simple html unordered list, like below. If you're using a WYSIWYG Editor like "Dreamweaver", you just click on that Icon in the Properties Panel (see image below) to get it set up. Then type in a List Item and press "Enter" to make a new one.  See Image.

  • List Item 1
  • List Item 2
  • List Item 3

Choose a List Item that you would like to make collapsible. Select the whole item and then go to the "Class" menu (to the left of the red arrow in the above image), and select the class "dropTarget1".

Step 3

Now it's time to build the menu that's going to collapse or the "nested menu". To make a nested menu. go to the very end of the List Item you've chosen, press "Enter" and click on the "Indent" icon on the Properties Panel (see image below). Now you can type in many new list items  in the Nested List. See Image.

  • List Item 1
  • List Item 2
  • List Item 3
    • A Nested List Item1
    • A Nested List Item2
    •  

When you are done with your last Nested List Item, press "Enter" again so you get another bullet, and then press the "Outdent" button (to the left of the "Indent" button). That will close your Nested List.  Now, you can type in a regular List Item, or if you would like to close the entire list, just click the List Icon again (from Step 2's image). Save it.

That's pretty much it. When you preview it in a browser, It will have the collapsible menu effect. Congratulations.

Demo Click Here >>



More Nested Menus

To make a new collapsible menu inside any of the List Items, repeat the exact same steps, except when you're at the end of Step 2, you're obviously going to choose a Class other than "dropTarget1" again. There are 15 more for you to choose from. Good Luck to you. Let me know if you have any questions. 




Optional Note:

When you're looking at the menu in "Design" menu, all of the nested menus are collapsed. If you would like to make it so that it looks like how it's going to look by default in a browser, insert this code( in "Split" view)  into the head of the webpage  right after the "<style>" tag starts.

.dropTarget1 ul, .dropTarget2 ul,  .dropTarget3 ul,  .dropTarget4 ul,  .dropTarget5 ul,  .dropTarget6 ul,  .dropTarget7 ul,  .dropTarget8 ul,  .dropTarget9 ul,  .dropTarget10 ul,  .dropTarget11 ul,  .dropTarget12 ul,  .dropTarget13 ul,  .dropTarget14 ul,  .dropTarget15 ul {display:none;}

 

 

WEBDESIGN DAN | Design & Development | Santa Cruz, CA © 2010

Stunning Peak Media | Web and Marketing | Santa Cruz, California               Home | About | Services | Portfolio | Testimonials | Contact