Creating a Spry Menu Bar in Dreamweaver
In this video I'm gonna show you how to create a spry menu bar in Dreamweaver...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you how to create a spry menu bar in Dreamweaver.
First, I'm gonna show you how to place it in your page, and then I'm gonna show you how to edit it to make it look exactly the way you want it to look.
Let's get started. I have got a blank html page HERE, I have already it saved as sprymenu.html
Simply select where you wanna place your spry menu bar.
And let's go to the Insert panel, Spry tab, and down here, SELECT Spry Menu Bar.
We have the option of a horizontal layout, or a vertical layout.
I SELECT the horizontal layout. I HIT Ok.
And HERE is my spry menu bar.
I TURN Live View ON.
And you can see it's very functional. It has 4 buttons, 2 of them have a drop down menu, that is indicated by THIS little arrow image that's placed there.
And THIS "Item 3.1" even has a 3rd level submenu.
I TURN Live View OFF.
And let's edit our spry menu.
When you roll over your spry menu, as I'm doing here, you can see THIS little blue tab shows up. If you wanna edit your spry object, just SELECT that blue tab, and notice the properties panel becomes populated with all of the properties for that specific spry object, and you can edit it.
An other way of selecting your spry object would be simply selecting inside of it, and you could select it using the tag selector.
So, let's edit our spry menu.
We have 3 levels of navigation HERE.
The FIRST is the actual menu, so THESE 4 are THESE 4 right here.
Let's say I want 5 buttons, I just HIT this plus button.
And I now have 5 buttons, I have got this new "Untitled item"
I SELECT it, and I RENAME it to "Item 5"
I HIT Enter.
And I MOVE it down the list all the way down to the bottom.
You can name your items whatever you want, just SELECT the item, and you can name it right HERE, and you can link it to something right HERE.
And again, we have 3 levels of navigation, so if you SELECT this "Item 1" you will see that it has a second level submenu.
Let's say I need a 3rd level submenu for THIS "Item 1.2" I SELECT it.
And over HERE, I just HIT the plus button to add a 3rd level submenu for it.
Honestly, I would never use 3rd level submenus, but you have that option.
I just DELETE it using the minus button.
And let's take a look at the css.
When we created this spry menu, Dreamweaver created some css styles and javascript for us. You can see them right HERE, they are attached to the file. And they would normally be in a SpryAssets folder in our local site, but they actually don't really come into existence until we save this page.
So let's SAVE this page real quick.
And Dreamweaver is basically saying that these supporting files have been copied to our local site to make this spry menu work.
I HIT Ok.
And now if you take a look at your files, just HIT the Refresh button, or F5, and you will see we've got this new SpryAssets folder HERE, containing all of the supporting files for our menu bar. And we can now style our menu bar with css.
So let's GO to the css panel, and OPEN UP "SpryMenuBarHorizontal.css"
This is the css file that Dreamweaver created for our spry menu, and this is what we are gonna work with to style our spry menu.
Now, if you SELECT inside of your menu bar, you will see we've got links, inside of list items, inside of an unordered list. That's the way to set up a menu bar, we use unordered lists, list items, and links. And those are the elements that are styled here in this css file.
So first of all, let's take a look at how to change the width of our buttons.
To change the width of your first level buttons, SELECT: ul.MenuBarHorizontal li
GO to box, and you can see that the width is 8em
And 8 times 16 = 128px, so our list items are basically 128px wide. And this is where you can change the width of your first level buttons. I just HIT Cancel out of here
And to change the width of your 2nd, and 3rd level submenu buttons
First, you need to change the width of THIS rule: ul.MenuBarHorizontal ul
And then you need to change the width of THIS rule: ul.MenuBarHorizontal ul li
And they should be the exact same wide.
Now, let's talk about changing the height of your buttons.
To change the height of your buttons SELECT: ul.MenuBarHorizontal a
And you can change the font-size, which is not specified here, so our links inherit the default font-size, which is 16px. You can change it if you want, that's gonna change the height of your buttons.
Let's GO to box, and the second thing you can do to change the height of your buttons is changing the padding of your links.
We already have some padding HERE: The top padding is 0.5em times 16 = 8px, so the top padding is 8px. You can change the top padding, and the bottom padding to change the height of your buttons.
I HIT Cancel.
And let's see how to edit the font
First of all, we have normal font, and rollover font
To edit the normal font, just SELECT: ul.MenuBarHorizontal a
GO to type, and you can edit the normal font right HERE, you can change the normal font-color HERE.
I HIT Cancel.
And to edit the rollover font, just SELECT this long rule: ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
And you can edit the rollover font right HERE, and the rollover font-color HERE.
I HIT Cancel.
And let's talk about changing the background color.
Just like with the font, we have normal background color, and rollover background color.
To change the normal background color, SELECT: ul.MenuBarHorizontal a
GO to background, and you can change the normal background color right HERE.
I HIT Cancel.
And to change the rollover background color, SELECT: ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
GO to background, and you can change the rollover background color right HERE.
I HIT Cancel.
And let's take a look at using background images.
But first, we need some background images, so let's GO over to Fireworks.
And let's CREATE a New Fireworks Document.
A 1000px wide, and 1000px tall canvas will be enough.
The canvas color will BE transparent. I HIT Ok.
And HERE is our Fireworks document.
Let's GRAB the Rectangle tool, and let's CREATE a Rectangle.
It's gonna BE 100px wide, and 35px tall, because by default our spry menu buttons are 35px tall, and I haven't changed it.
The COLOR will BE: blue (#0099FF).
Let's APPLY some filters to it, like: Photoshop Live Effects.
I SELECT Gradient Overlay.
The opacity will BE: 25, and it looks good, so I HIT Ok.
I GET my Pointer tool, SELECT my rectangle.
And HOLD DOWN the alt key (or opt key on mac) and just DRAG a copy over here.
This one will BE: green (#00FF99), for rollover buttons.
I GET my Pointer tool, SELECT my rectangles.
And I RIGHT,CLICK on my rectangles (or hold down your ctr key and click on them on the mac) and SELECT "Insert Rectangular Slice"
We need MULTIPLE slices, one for both of them.
And HERE they are.
I just CHANGE their width to 1px, because these background images will be horizontally repeated.
I CLICK my canvas to deselect my slices.
And over HERE, I SELECT the first slice, which is THIS one, and I NAME it "bg_sprymenu"
I SELECT the other one, and I NAME it "bg_sprymenu_rollover"
Good. I SELECT the first slice, I export it to PNG32 format.
I just RIGHT,CLICK on the slice (or ctr,click on the mac) and SELECT "Export selected slice"
I'm gonna save it in our local site folder, and the file name will be the slice name. I CLICK Save.
I SELECT the other slice, I export it to PNG32 format.
I RIGHT,CLICK on the slice "Export selected slice" CLICK Save.
And I just SAVE my Fireworks document.
I'm gonna save it in our local site folder, and the file name will BE "sprymenu" PNG, CLICK Save.
And let's GO back to Dreamweaver.
SELECT: ul.MenuBarHorizontal a
GO to background, and I just BROWSE the normal background image.
HIT Ok, once again.
I TURN Live View ON.
And notice all of the buttons that have an other submenu attached to them show the background color, instead of the background image. And that's because they have separate styles having THIS little arrow as background image, and so they don't inherit the background image change we just did.
Let's fix it. SELECT: ul.MenuBarHorizontal a.MenuBarItemSubmenu.
GO to background, and let's BROWSE the normal background image, instead of the arrow.
HIT Ok.
DELETE this no-repeat value, because we want our background image to repeat, and it's gonna repeat by default, so we can just delete it.
And DELETE the background-positions as well, both of them.
HIT Ok.
And our first level buttons now show our background image, but if you ROLL OVER "Item 3" you will see that "Item 3.1" has a 3rd level submenu attached to it, and it still doesn't show our background image.
So, let's SELECT: ul.MenuBarHorizontal ul a.MenuBarItemSubmenu.
GO to background, and we are gonna do the same thing.
BROWSE the normal background image, instead of the arrow.
HIT Ok.
DELETE the no-repeat value.
And DELETE the background-positions.
HIT Ok.
And all of our buttons now show our background image. Awesome.
We just need the rollover background image
So, let's SELECT: ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
GO to background, and BROWSE the rollover background image.
HIT Ok, once again.
And our rollover image is functioning, except from the buttons that have an other submenu attached to them.
So, let's SELECT: ul.MenuBarHorizontal a.MenuBarItemSubmenuHover.
GO to background, and BROWSE the rollover background image.
HIT Ok.
DELETE the no-repeat value
And DELETE the background-positions
HIT Ok
Then SELECT this rule: ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
GO to background, BROWSE the rollover background image.
HIT Ok.
DELETE the no-repeat value.
And DELETE the background-positions.
HIT Ok.
And our background is now fully functional. Awesome.
Finally, let's talk about the borders.
If you take a look at your submenu, you will see that the submenu containers have a grey border on all sides. You can see it right HERE.
If you wanna edit that, just SELECT: ul.MenuBarHorizontal ul
GO to border, and you can edit that border right HERE
I HIT Cancel.
And if you want your buttons to have some borders, SELECT: ul.MenuBarHorizontal a
GO to border, and right here you can apply a border to all of your buttons in this menu bar.
I HIT Cancel.
And this is how you create a spry menu bar in Dreamweaver, and this is how you can quickly and easily edit it. You might wanna create a div tag to hold your menu bar, I'm not gonna do that now.
Anyway, I hope you learned something. I hope you enjoyed it. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Creating Spry Tabbed Panels in Dreamweaver>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>