Duration 7 minutes

Dreamweaver has a number of built-in Spry widgets that allow you to create pop-out menus, sortable lists and a variety of other interactive features. In this video from Module 7 of my online Dominate Dreamweaver course, I demonstrate how Spry Tabbed Panels can be used to create an interactive image gallery. Spry widgets are just one of the many advanced Dreamweaver functions covered in the course. For a full course outline visit my Dreamweaver Forum.

If you enjoyed the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take you from the basics of Dreamweaver through complex topics such as Spry and on to building complete interactive websites. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.

duration: 7:38

How to use CSS to highlight the link to the current page in your menus (including Spry menubars). As an example, the "Home" link will be highlighted on the Home page, the "Contact" link on the contact page, etc.

If you enjoyed the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take you from the basics of Dreamweaver through complex topics such as Spry menubars and on to building complete interactive websites. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.

See also: Creating and Customizing Horizontal Spry Menu Bars and Creating and Customizing Vertical Spry Menu Bars

Adapted from my Dominate Dreamweaver online training course.

Back in the day, the Hebrews had a habit of getting themselves into trouble in spite of their favored status with God. So he decided to try to make it easy on them by reducing the rules to Ten Commandments.

In search of similar guidance from a lesser deity (Adobe), I ventured to the top of our local equivalent of Mount Sinai where I received these Ten Commandments for Editing Dreamweaver’s Spry Menubars on a stone iPad.

1. Thou shalt not edit the style sheet without reading the comments.
2. Thou shalt not edit the styles haphazardly.
3. Verily, rules for some selectors are defined in two locations.
4. Thou shalt not edit the position or display properties within the menubar styles.
5. Thou shalt not use the height property within menubar styles.
6. Thou shalt not apply padding, borders or margins to menubar list items <li>.
7. Thou shalt not set widths for links <a> within menubars.
8. Thou shalt not edit the browser hacks.
9. Thou shalt not edit the menubar JavaScript file.
10. Verily I say unto you, a new style shall appear to define the appearance of submenus.

Click a commandment above to view the related commentary.

I. Thou shalt not edit the style sheet without reading the comments.

Some very clever person at Adobe (God bless them) hath taken the time to insert extensive comments into the code of the menubar CSS file. Open the CSS file and read those comments and you shall be enlightened (and save a lot of wasted effort).

II. Thou shalt not edit the styles haphazardly.

Adobe hath joined the various styles rules together to function in harmony. Editing them without a clear plan and understanding of their purpose is guaranteed to create more problems than solutions.

A good plan is to edit styles according to the structure of the HTML page (and for that matter the order the styles appear in the css file).

1. Overall list (ul.MenuBarVertical or ul.MenuBarHorizontal)
2. Top-level list items (ul.MenuBarVertical li or ul.MenuBarHorizontal li)
3. Overall sub-menus (ul.MenuBarVertical ul or ul.MenuBarHorizontal ul – notice the second ul)
4. Sub-menu list items (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li)
5. Links (styles related to the <a> tag including hover, focus, etc. states)

III. Verily, rules for some selectors are defined in two locations.

Adobe hath divided the LAYOUT INFORMATION from the DESIGN INFORMATION (not a bad idea) so rules using the same style selectors may appear in both locations. You can edit them in either place but make sure the properties you set in the layout section aren’t overwritten in the design section.

IV. Thou shalt not edit the position or display properties within the menubar styles.

Those who have not yet eaten the fruit from the tree of CSS knowledge are often tempted to edit the position and display properties within the menubar styles. While some sins go unpunished, this one rarely does. It WILL break your menu. And, while we’re on the subject, don’t go adding position or display properties to the style rules that don’t have them either.

V. Thou shalt not use the height property within menubar styles.

It’s very tempting to try to “force” your menubar to conform to your design by defining a CSS height property for one or more of the menu elements and you might get away with it. But the odds are that, under some conditions, one of your menu items will wrap to a second line and the height properties you so meticulously set will be ignored or your links partially obscured.

To be delivered from this evil, the best practice is to allow the height of your menu and menu items to be determined by a combination of the text-size and padding of your menu link <a> style.

VI. Thou shalt not apply padding, borders or margins to menubar list items <li>.

Set the width of your menubar “buttons” using the list item <li> rules. Since, as it is written, padding, borders and margin add to the width of HTML elements, applying those properties to list items will likely break your design.

Apply padding and borders to your buttons using the link <a> rules.

VII. Thou shalt not set widths for links within menubars.

In the commentary for Commandment VI we learned the width of our buttons should be set using the list item style rules. Any attempt to set a width for the links will likely conflict with those settings. But be not afraid, because the display: block property in the link style rule guarantees the link will completely fill its parent li tag.

VIII. Thou shalt not edit the browser hacks.

What CSS hacks Adobe hath joined together, let no man set asunder.

IX. Thou shalt not edit the menubar JavaScript file.

Yeah though you walk through the valley of Javascript, you shall fear no evil (if you just leave it alone).

X. Verily I say unto you, a new style shall appear and it shall define the appearance of submenus.

And God said, “let the styling for the sub-menus be separated from the styling of the main menu.” And it was, with the addition of a new style rule, so.

By creating a new style rule (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li for submenu list items and ul.MenuBarVertical ul a or ul.MenuBarHorizontal ul a for submenu links – notice the second ul in the selectors) you can define CSS properties that apply only to submenus (or more precisely to unordered lists that are themselves within an unordered list). And, by the way, you only have to define the properties that you want to be different from the main menu. The rest of the properties will be inherited.

Now, go forth and sin no more.

Chris Tordesillas recently asked via the contact form how to:

…make a simple horizontal spry menu where the sections are divided by a neat 1 pixel border all around.  My problem is when I place the border on the "ul.MenuBarHorizontal a" selector it places a 1 pixel border around each cell.  The end result is the border between 2 cells ends up becoming 2 pixels.

I just want a simple 1 pixel border in between my "buttons"

There are probably many ways to accomplish this but the one that occurs to me is to wrap three sides of the ul.MenuBarHorizontal a selector with a border:

border-top: 1px solid #F00;
border-right: 1px solid #F00;
border-bottom: 1px solid #F00;

And then create a special class style to provide the missing left border for the first "cell":

.leftBorder {
border-left: 1px solid #F00;
}

You'll then need to apply the class to the proper link <a> tag:

<li><a class="leftBorder" href="#">Item 1</a>

As I said, there are probably other solutions. If you have one, please feel free to leave it in the comments below.

And, as always, feel free to email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.