if you want to style it and drop it in your social network, watch the podcast #4.

This is an accompanying post for the Pro Socialgo podcast #4. The podcast was a little rushed so I thought I’d post the information so you can follow along with the video. We will be creating a Dreamweaver CS3 Dropdown menu using the collapsible panel spry. This is a great way to add some meaningful content to your socialgo social network without taking up to much space. We will be dropping a Poll in our drop down, but the possibilities are endless with what you can put in these drop downs. This will show you how to create the drop down.

 

Step #1: Create Sprys

After creating a new document place your curser in between the body tags. You will notice a “Spry” tab on your jump menu. Press the tab to reveal the sprys available. Go to code view, there is no reason to have design view open.

 

We will be using four Collapsible Panels. So click the Collapsible Panel icon four times. It will populate your document with this code, in four different instances.

Tab
Content

Now save the document and click ok when it tells you it’s going to create two files. Collapsiblepanel.js & Collapsiblepanel.css

Step #2: Enter Content

Select the Entire row of the div with a ID of CollapsiblePanel#. there are for of them so they will be numbered  "CollapsiblePanel1, 2, 3, 4."

 

If your properties panel is not open, open it from "window" in your menu bar. Now you should see two choices. (you might have to refresh, if you don't see them, select the div again, in code or design view) The first is "display" the second is "Default State." they are both set to "open." Set the drop down to "closed for the "default State."

 

 

Step #3: Enter Content

Look for this div in each instance of your sprys. This is where you will enter your content. Be it a youtube video, a poll, chat room, iframe with embedded site… it’s all the same procces.

Content

your content

Step #4: Style the tabs

Now, to make it a horizontal menu, you will need to float the panels left. Open up your “files view from the “window” drop down, top right of Dreamweaver. Look for the collapsiblepanel.css, open it.

The first selector you will see will be .CollapsiblePanel {} Insert a attribute of Float: and a value of “left;”

.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
        float: left;

Now insert the width you would like the tabs to be.

width: 160px;

And then a little margin.

margin-right: 10px;

And finaly find the selector “.CollapsiblePanelContent” and Clear: both; this will allow you to enter a very wide width, such as a iframe web site without it hanging up on the tab.

.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
clear: both;
}

This is what you get. Now you can style it to look like your network and insert it into the proper html panel in your admin. There is allot more details in the podcast. Have fun.


Note: this will only work in the top package of socialgo networks because it uses Java Script.