Home » Resources » Dreamweaver CS4 Tutorial » Spry Menu Bar Widget – Add New Items

Part 6.2: How to Add New Items to Your Existing Spry Menu Bar Widget

You may decide to add new items to your menu.  All this is covered in our comprehensive Dreamweaver training course. This can be done by clicking any of the existing items in your first listbox. Click the plus (“+”) button. A new menu item will appear below the one highlighted. Change the text and link as before. If the menu item is in the wrong place in your menu, and you want to change the order, click the up or down arrow above that list box.  See image below:

How to Centre the Spry Framework Menu Bar Widget

The menu, will probably be positioned to the left of your web page. You may decide that you would prefer it to be in the centre of the page.

To do this, move your mouse over the menu bar. The words “Spry Menu Bar: MenuBar1″ will appear above the menu. Click onto these words. Then click the <ul.MenuBarVertical#MenuBar1> tag in the status bar to select it.

The CSS STYLES panel on the right is currently collapsed.  This should be expanded by double-clicking the “CSS STYLES” tab. Scroll up or down in the “Summary for selection” box and double-click the “width 8em” item.

A dialog box entitled “CSS Rule Definition for ul.MenuBarVertical in SpryMenuBarVertical.css” should appear. Locate the section called “Margin”.  Click the down arrow for the “Top” field and select “auto”. Click the OK button.  Your menu bar should now be centred.

Once you have mastered all these techniques you may want to attend our Advanced Dreamweaver training course.

Similar resources you may like

1. Adding a Background Colour or Image
2. Header, Footer, Side Bar and the Main Content
3. Add Navigation Menu Bar to your Website
4. Add the Menu to Your Side Bar
5. Spry Menu Bar Widget – Change the Colours

Tags

Dreamweaver, Dremweaver Resources, menu, navigation, navigation menu, Spry Menu, Spry Menu Bar Widget

Share This Resource

This entry was posted by Colin Welch on Monday, March 16th, 2009 at 11:32 am and is filed under Dreamweaver CS4 Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.