Skip navigation

Dreamweaver

dandolino Calculating status...

Currently Being Moderated

Simple Collapsible Menu using Dreamweaver Tutorial

Dec 22, 2010 8:05 PM

If you're interested in a tutorial for a simple Collapsible Menu using Dreamweaver, I put together some jquery code to make a regular nested list turn into a collapsible list. Very easy to follow with images illustrating the steps. Tested for all main browsers, include IE6.

http://webdesigndan.com/blog/collapsible-menu

As opposed to Spry Collapsible Panel, this is very lightweight and has no css... So design from scratch... Good Luck.

Dan Czyzyk

3425 Views 16 Replies Latest reply: dandolino, Dec 2, 2011 12:59 PM

Replies

Currently Being Moderated

1. osgood_,

Dec 23, 2010 12:18 AM in reply to dandolino

Report

dandolino wrote:

If you're interested in a tutorial for a simple Collapsible Menu using Dreamweaver, I put together some jquery code to make a regular nested list turn into a collapsible list. Very easy to follow with images illustrating the steps. Tested for all main browsers, include IE6.

http://webdesigndan.com/blog/collapsible-menu

As opposed to Spry Collapsible Panel, this is very lightweight and has no css... So design from scratch... Good Luck.

Dan Czyzyk

Hi Dan,

Looks useful. Someone on here yesterday could have done with that solution.

One thing, for those that don't know, it might be a good idea to provide a download link to the jquery script which is needed. The following opening line of the tutorial might just be enough to 'confuse' people:

'Paste the jquery core and internal js script into the head of your webpage'

It's simple for most that know how to get at the scripts BUT for those that don't it can be a big obstacle and ruin a perfectly good tutorial.

|
Mark as:
Currently Being Moderated

2. Nancy O.,

Dec 23, 2010 12:53 PM in reply to dandolino

Report

In addition to what Osgood already mentioned about the JS library, modern site developers are urged to use Google's Libraries API -- a content distribution network and loading architecture for the most popular, open-source JavaScripts including jQuery, MooTools, Yahoo UI and others.

http://code.google.com/apis/libraries/devguide.html

By loading or linking to Google hosted scripts, you don't need to download the physical file and host it on your server. Also since most people have recently visited a site that uses scripts from Google, they're likely to have it in their cache which speeds up web performance for everyone.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

|
Mark as:
Currently Being Moderated

3. dandolino,

Dec 24, 2010 6:54 PM in reply to osgood_

Report

Thanks for your advice _osgood. I modified the wording a little bit and I added a zip file in the tutorial where the css and js is organized contained in their folders/files, for the non-beginners.

http://webdesigndan.com/samples/collapsible.zip

Cheers,
Dan

|
Mark as:
Currently Being Moderated

4. Renzo12345,

Jun 23, 2011 7:27 AM in reply to dandolino

Report

I tried this menu script,, but for some reason it does not work in my page.
Wehn I view my page in ie6, the sub menus are not in place and don't fold.
Everything is in place, css js file etc.,...
Probally the code is in conflict with the rest of my code ??
I noticed that, when I remove the " <link type="text/css" href="css/default.css" rel="stylesheet" media="screen" />"
the menu works, but the complete layout of my page get destroyed.

Here is head code of my page, I hope someone can help me with this,?
I already spent so many time on it.
code :
------------------------------------------------------------
<head>

<link type="text/css" href="css/default.css" rel="stylesheet" media="screen" />
   <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
   <script type="text/javascript" src="js/collapsible.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>
<title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script src="js/html5.js"></script>
<script src="js/jquery.js"></script>
<script src="js/effects.core.js"></script>
<script src="js/effects.slide.js"></script>
<script src="js/supersized.2.0.js"></script>
<script src="js/supersized.js"></script>
<script src="js/pause.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script>
$(document).ready(function(){
sluiten();
$('#tekst').wait(5000).fadeIn();
});
$(function() {
$('a.lightbox').lightBox(); // Select all links with lightbox class
});
</script>
</head>
---------------------------------------------------------------

THANKS for the help !!!

|
Mark as:
Currently Being Moderated

5. duenorth09,

Jun 24, 2011 11:56 AM in reply to dandolino

Report

Neat Dan! Would this work well for mobile? I'm so confused as to the best type of menus for mobile-friendly design. Any suggestions? I need them to provide the functionality of drop-downs... thanks! Anyone out there with suggestions, I'd sure appreciate it!

|
Mark as:
Currently Being Moderated

6. dandolino,

Jun 24, 2011 12:16 PM in reply to duenorth09

Report

yup.

http://testiphone.com

http://stunningpeak.com/samples/collapsible.html

Cheers,
Dan

|
Mark as:
Currently Being Moderated

7. dandolino,

Jun 24, 2011 12:20 PM in reply to Renzo12345

Report

can you post a link to your page and we can troubleshoot it.

Cheers,
Dan

|
Mark as:
Currently Being Moderated

8. duenorth09,

Jun 24, 2011 12:37 PM in reply to dandolino

Report

Sure! http://www.duenorthdesign.com/pcm
The menu would be located just to the right of the "virtual bank" graphic. This is not really a mobile-friendly design (especially with the xtra nav on the left), that is a whole different subject I need to figure out. But I do want to know what is the BEST method. In the past I"ve made drop-down menus in fireworks, but I know there are full CSS menus - I just don't want to have issues! thanks much!

|
Mark as:
Currently Being Moderated

9. dandolino,

Jun 24, 2011 4:48 PM in reply to duenorth09

Report

Im sorry. I need to clarify. Please post a link to the page where you have all the collapsible menu code in there to try to make it work, and then I can try to see what's going wrong.

Cheers,
Dan

|
Mark as:
Currently Being Moderated

10. Renzo12345,

Jul 6, 2011 6:25 AM in reply to dandolino

Report

Hi Dan,

Sorry for the late reply (just back in town).

Here is the link :
http://www.kameleonweb.be/clients/lambrechts-nicolaers/index_stripped. html#

The menu does not fold out at the right location; it seems as if the code is in conflict with other css code ??

Thanks for the help !

Erwin

|
Mark as:
Currently Being Moderated

11. osgood_,

Jul 6, 2011 9:05 AM in reply to Renzo12345

Report

Renzo12345 wrote:

Hi Dan,

Sorry for the late reply (just back in town).

Here is the link :
http://www.kameleonweb.be/clients/lambrechts-nicolaers/index_stripped. html#

The menu does not fold out at the right location; it seems as if the code is in conflict with other css code ??

Thanks for the help !

Erwin

Amend your menu css selectors as follows: (but first make a back-up of the css file just incase you need to revert to the orginal)

#menu{
    width:200px;
    background:white;
    min-height: 100%;
    position: absolute;
    left: 40px;
     top: 0;
      padding: 150px 0 0 30px;
}
#menu ul{
    list-style:none;
    width:160px
}
#menu ul li{
    line-height:25px;
}

You should find that the submenus now drop down at the correct location HOWEVER they don't stay open for long which is as a result of your collapsible.js file which is obviously conflicting with the workings.

<script type="text/javascript" src="js/collapsible.js"></script>

Comment it out in your code (as shown below) and you'll see the menu works correctly.



As an aside note the use of Absolute Positioning <div> is not a recommended method. They should only be used in special circumstances not as the main construction of a page.

|
Mark as:
Currently Being Moderated

12. Renzo12345,

Jul 6, 2011 9:15 AM in reply to osgood_

Report

Hi Dan,

I adjusted the css file, and yes, this works !
You say that the menu does not stay open for long, but, I can't see
this problem (tested on Firefox and IE).
Can you be a litlle bit more precise when this happens,

thanks,

Erwin

|
Mark as:
Currently Being Moderated

13. osgood_,

Jul 6, 2011 10:03 AM in reply to Renzo12345

Report

Renzo12345 wrote:

Hi Dan,

I adjusted the css file, and yes, this works !
You say that the menu does not stay open for long, but, I can't see
this problem (tested on Firefox and IE).
Can you be a litlle bit more precise when this happens,

thanks,

Erwin

I'm not Dan but never mind, I've been called worse

If I test the menu in Firefox when the collapsible.js script is live (linked) the submenus just open and close quickly therefore you are not able to select the submenus.

If you have tested and it works then fine, it might be a Firefox browser issue although I can't imagine it could be. I'm going to test in Safari and see what happens.

Same issue in Safari - the submenus slide open and then slide shut again making it impossible to select any link in the submenus. I'm testing on a Mac by the way

If I deactivate the collapisble.js script everything works as it should.

|
Mark as:
Currently Being Moderated

14. dknealeWC,

Dec 1, 2011 1:41 PM in reply to dandolino

Report

Thanks for this - it's really fantastic!
Just one question, is there any way to collapse a previously opened submenu when a new menu item is selected? I only want one sub menu revealed at a time.
Thank you!

|
Mark as:
Currently Being Moderated

15. dandolino,

Dec 2, 2011 10:34 AM in reply to dknealeWC

Report

Im really busy right now. I unfortunately can't add that functionality right now. You can shoot for someone else to do it, or you can hire me to help you.
Good Luck to you,
Dan

|
Mark as:
Currently Being Moderated

16. dandolino,

Dec 2, 2011 12:59 PM in reply to dknealeWC

Report

You can customize your own collapsible menu using
http://jqueryui.com/

It might be more challenging than mine to integrate if you don't know html, css, jquery.

|
Mark as:

Forum guidelines

Dreamweaver

Simple Collapsible Menu using Dreamweaver Tutorial

Dec 22, 2010 8:05 PM

More Like This

Bookmarked By (0)