Building Horizontal Menu Dreamweaver CS6 Spry Menu

Embed Size (px)

Citation preview

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    1/12

    1 | P a g e

    Building a Horizontal Menu in Dreamweaver CS6 Using Spry MenuR. Berdan Feb 26, 2013

    Dreamweaver offers the ability to create a vertical or horizontal menu with drop down menus that can be

    modified on any page and updated. The reason for this is that Dreamweaver stores the CSS and

    javascript files in an external folder called SpryAssests which it links to each web page. The best way to

    create a horizontal menu is to add it to a template page, customize the menu, save the page and then

    clone the page to create the other pages in the web site in other words build the menu first. The Spry

    menu behaves differently in various versions of Dreamweaver CS3,4,5 and 6 this tutorial is for CS6.

    Build a Horizontal Menu at the top of the page with drop down components.

    1. If you already have a template you may use it otherwise create a simple web page and insert a

    table with 4 rows, 1 column, set the width to 760 px, border =0. Center the table on the page

    (Format>align>center).

    2. Place your cursor in the top table cell and add 4 carriage returns, then change the background

    color to a solid e.g. navy.

    3. Place the cursor in the 3rd

    row and add 10 carriage returns (Enter 10X).

    4. Place the cursor in the bottom row and change the background color to black. Save the page into

    a folder and call it template.html.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    2/12

    2 | P a g e

    5. Place the cursor into the 2nd

    row where the navigation elements will be inserted.

    6. In the insert menu (if its not visible select Window>insert to display it), in my example the insert

    menu has been placed at the top of the page rather than the side. Select either the layout or the

    Spry tab and click on the Spry menu bar button.

    7. When the spry menu option pop up box appears select the horizontal menu option and click OK

    8. After doing this you should see 4 menu buttons labelled Item 1, Item 2, Item 3 and Item 4 appear

    in the row. In the properties box below you will see MenuBar1 and 4 boxes with Item1 to Item 4.

    These boxes permit you to add more items, and also change the labels from Item to anything youwant. If you accidently click outside the box and this property box appearance disappears, put the

    cursor inside Item 1 box, at the bottom of the page in the tag bar click on

    and the properties should once again show the Menu bar

    options.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    3/12

    3 | P a g e

    9. Select Item 1 and on the right side of the property box type in the Menu Item name e.g.

    Welcome, in the Link# box type in the page this menu item will link to e.g. index.html (A title and

    target are not necessary when making links to other pages within a web site). Note the first menu

    box has a down arrow, and in the 2nd

    text box within the property box there is a list of links

    Item1.1, Item1.2 etc these are submenus. You can add text and links to these or you can

    remove them. You can also add drop down submenus to any of the other menus using the + icon.

    To add more top menu elements, click on the + symbol in the first property text box. Add 7 top

    menu items.

    Welcome About Services Gallery Links News Contact Us and make each one link to a unique

    page.html

    Welcome index.html

    About about.html

    Services services.html

    Gallery gallery.html

    Links links.html

    News news.html

    Contact contact.html

    After doing this you will see the menu wrap if the table was set to 760 px width. You can either make the

    table wider to fit all the menu items, or you can decrease the font size of the labels to try and fit the menu

    items. If you change the width to about 904 px wide all the buttons will fit. Alternatively, click on the

    outer bounding box of the Welcome menu so it has a blue border.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    4/12

    4 | P a g e

    10. In the properties box you will see a different array of text boxes, one beside the Z index, it will say

    W 8em this is the width of the text boxes. If you change it to 6.7em and the width to 760 px all

    the buttons should fit. By making the em value smaller, the buttons will become narrower.

    Chaning the font and font size of the text using CSS will also alter the width of each button.

    11. To return to the Properties box to add submenu items, or additional menu items place your cursor

    in the first menu item after the text Welcome then click on the tag bar at the bottom selecting

    and you should once again see the menu bar options to add

    or subtract menu items.

    12. Place your cursor in the first menu item after Welcome, click on the html tag bar on

    and in the properties box select in the first text box >Welcome.

    You should see item1.1, Item 1.2 and Item 1.3 lets change these and add links. Select item 1.1

    and in the adjoining Text box type in Prices, prices.html, then Item 1.2 Quote, quote.html, Item

    1.3 Hiring hiring.html see picture below.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    5/12

    5 | P a g e

    13. If you select Design and Live View you can see what the menu will look like and how it interacts

    when you rollover a menu item. The background should turn blue and the rollover text turns

    white. After testing, return to Design mode (turn Live mode off).

    14. The appearance of the text (font size, color and style) in the drop down menu can be changed by

    modifying the CSS that is created for the menu. You can see the CSS in the CSS panel. If the

    CSS panel is not visible select >Window>CSS styles. Make sure the All button is selected in the

    CSS styles box, and under All Rules that the + is selected so it turns to a and all the styles

    are expanded below as show in the picture below.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    6/12

    6 | P a g e

    Change the default background co lor of the menu and text color

    15. In the CSS menu click on ul.MenuBarHorizontal aand in the Properties box below select color,

    click on the color box and change it to Dark blue (navy) or any color you want. The Top item

    background color lets you change the default background color of the menu buttons.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    7/12

    7 | P a g e

    16. Change the roll over color of the menu buttons - the default is dark blue with the text turning

    white. Select the longest line in the CSS drop down:ul.MenuBarHorizontal

    a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,

    ul.MenuBarHorizontal a.MenuBarSubmenuVisible - then below in the Properties box blow

    the CSS box modify the background-color and co lor (text).

    17. To change the font style select ul.MenuBarHorizontal a, then click on the pencil icon to edit the

    style and choose Type, change the font to Arial, Helvetica, sans-serif or other choice. Click OK.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    8/12

    8 | P a g e

    When you are finished customizing the menu, Select Save and you will see the following window

    indicating that it is saving these files into a special folder called Spry Assests which must be uploaded

    with the other web pages to the server in order for the menu to operate. Click OK

    From here you create the other web pages by cloning the template page. When you need to modify the

    menu, you open any page in Dreamweaver and put your cursor in the first menu box after Welcome in

    this case, select the tag in the bottom box and you should be able to

    edit the items in the bottom properties box.

    You may have to change the background color in the div or table cell that the menu appears in to preventgaps on either side of the navigation menu. There are other programs and plugins for Dreamweaver that

    are better at creating drop down menus, or alternatively you can code one from scratch using one of my

    other tutorials.

    You can view Dreamwever> Help search for Spry Horizontal Menu and there is additional information

    about each CSS element and how you can customize and modify the drop down menus.

    Customize the Menu Bar widget

    Although the Property inspector enables you to make simple edits to a Menu Bar widget, it

    does not support customized styling tasks. You can alter the CSS rules for the Menu Barwidget and create a menu bar that is styled to your liking.

    All CSS rules in the topics below refer to the default rules located in the

    SpryMenuBarHorizontal.css or SpryMenuBarVertical.css file (depending on your selection).

    Dreamweaver saves these CSS files in the SpryAssets folder of your site whenever you

    create a Spry Menu Bar widget. These files also contain useful commented information

    about various styles that apply to the widget.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    9/12

    9 | P a g e

    Although you can easily edit rules for the Menu Bar widget directly in the accompanying

    CSS file, you can also use the CSS Styles panel to edit the menu bars CSS. The CSS Styles

    panel is helpful for locating the CSS classes assigned to different parts of the widget,

    especially if you use the panels Current mode.

    Change text styling of a menu item

    The CSS attached to the tag contains the information for text styling. There are also

    several relevant text styling class values attached to the tag that pertain to different menu

    states.

    To change the text styling of a menu item, use the following table to locate the

    appropriate CSS rule, and then change the default value:

    Style to

    change

    CSS rule for

    vertical or

    horizontal menu

    bar

    Relevant

    properties

    and

    defaultvalues

    Defaulttext

    ul . MenuBar Ver t i cal a,ul . MenuBar Hori zont al a color:

    #333; text-decoration: none;

    Textcolorwhen

    mousepointermovesover it

    ul . MenuBar Ver t i cala: hover ,ul . MenuBar Hori zont ala: hover

    color:#FFF;

    Textcolorwhen infocus

    ul . MenuBar Ver t i cala: f ocus,ul . MenuBar Hori zont ala: f ocus

    color:#FFF;

    MenuBar item

    colorwhenmouse

    pointermovesover it

    ul . MenuBar Ver t i cala. MenuBar I t emHover ,

    ul . MenuBar Hori zont ala. MenuBar I t emHover

    color:#FFF;

    Submenul . MenuBar Ver t i cal

    color:

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    10/12

    10 | P a g e

    Style to

    change

    CSS rule for

    vertical or

    horizontal menu

    bar

    Relevant

    properties

    and

    default

    values

    u itemcolorwhenmouse

    pointermovesover it

    a. MenuBar I t emSubmenuHover, ul . MenuBar Hor i zont ala. MenuBar I t emSubmenuHover

    #FFF;

    Change the background color of a menu item

    The CSS attached to the tag contains the information for a menu items background

    color. There are also several relevant background color class values attached to the tagthat pertain to different menu states.

    To change the background color of a menu item, use the following table to locate the

    appropriate CSS rule, and then change the default value:

    Color to

    change

    CSS rule for

    vertical or

    horizontal menu

    bar

    Relevant

    properties

    and

    default

    values

    Defaultbackground

    ul . MenuBar Ver t i cal a,

    ul . MenuBarHor i zont al a background-color:#EEE;

    Background colorwhenmouse

    pointermovesover it

    ul . MenuBar Ver t i cala: hover ,ul . MenuBarHor i zont ala: hover

    background-color:#33C;

    Background colorwhen infocus

    ul . MenuBar Ver t i cala: f ocus,ul . MenuBarHor i zont ala: f ocus

    background-color:#33C;

    Menu Baritem color

    ul . MenuBar Ver t i cala. MenuBar I t emHover ,ul . MenuBarHor i zont al

    background-color:

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    11/12

    11 | P a g e

    Color to

    change

    CSS rule for

    vertical or

    horizontal menu

    bar

    Relevant

    properties

    and

    default

    values

    whenmouse

    pointermovesover it

    a. MenuBar I t emHover #33C;

    Submenuitem colorwhenmouse

    pointer

    movesover it

    ul . MenuBar Ver t i cala. MenuBar I t emSubmenuHover , ul . MenuBar Hor i zont ala. MenuBar I t emSubmenuHover

    background-color:#33C;

    Change the dimension of menu items

    You change the dimension of menu items by changing the width properties of the menu

    items l i and ul tags.

    1. Locate the ul . MenuBar Ver t i cal l i or ul . MenuBarHor i zont al

    l i rule.

    2. Change the width property to a desired width (or change the property to aut oto

    remove a fixed width, and add the property and value whi t e- space:

    nowr ap; to the rule).3. Locate the ul . MenuBarVer t i cal ul or ul . MenuBarHor i zont al

    ul rule.

    4. Change the width property to a desired width (or change the property to aut oto

    remove a fixed width).

    5. Locate the ul . MenuBar Ver t i cal ul l i or ul . MenuBar Hor i zont al ul

    l i rule:

    6. Add the following properties to the rule: f l oat : none; and backgr ound-

    col or : t r anspar ent ; .

    7. Delete the wi dth: 8. 2em; property and value.

    Position submenusThe position of Spry Menu Bar submenus is controlled by the margin property on

    submenu ul tags.

    1. Locate the ul . MenuBarVer t i cal ul or ul . MenuBarHor i zont al

    ul rule.

    2. Change the margi n: - 5% 0 0 95%; default values to the desired values.

  • 8/10/2019 Building Horizontal Menu Dreamweaver CS6 Spry Menu

    12/12

    12 | P a g e

    View Adobes Spry Menu tutorial video

    http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168 the video is for CS3 which is

    slightly different then in CS6.

    If using HTML 5 you will need to add the following CSS code so that there is no white space or gap below

    the image banner. Add the code into the also make sure the cellspacing and

    cellpadding values are set to 0.

    Or

    http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168http://www.adobe.com/designcenter-archive/video_workshop/?id=vid0168