Dreamweaver Customize your Horizontal Spry MenuBar

http://www.helpvid.net
http://seoninjaforum.com/
When inserting any spry object Dreamweaver uses a default state. For the horizontal menu bar our default state is a light grey coloured menu bar, with a colour of blue applied for the rollover effect. In this Dreamweaver tutorial, we are going to customise the spry menu bar to match the content of our website. As stated during the tutorial I opted to use a gradient that could be easily identified on screen, usually I would select a nice subtle colour, but for this tutorial I have went for a vibrant red that will be easy to see on screen. The background I created was a simple red to lighter red gradient in Photoshop, for the over state I flipped the gradient 180 degrees.

Spry menu bar CSS

As explained in the first tutorial upon inserting your spry menu bar the CSS for this navigation bar will automatically appear in your CSS panel. Now we have applied some changes to the up state and over state using customized backgrounds, however there is so much else you can do through the spry menu bar CSS. Its best to experiment through a trial and error process until you find what fits your website best.

Category:

Education

Tags:

• dreamweaver tutorial
• spry menu bar
• drop down menu bar
• drop down navigation bar
• spry horizontal menu bar
• customize
• navigation
• website
• web site
• tutorial
• software
• adobe
• css
• cs4
• html
• spry navigation bar
• helpvid
• programs
• graphics software
• computers
• howto
• tips & tricks
• educational

[joehoey22]

Does anybody know how to change the width and height of the bar?? as a whole and also each individual section? thanks.

[morabitom77]

How do you get that menu on all the pages?

[6Ace6Artist6]

Thankyou for a great vid! I have a questions tho but you might not be able to answer it..... I'm currently working on a website, i've created it using a template. I'm using the spry navigation bar and i was wondering if it is posible to keep the current page highlighted on the spy bar. For example, if i locate to my "contact me" page, i would like the spry menu bar to stay on a certain colour, and so forth.... is this posible? if so.. how? please reply.. once again, thanks for a great vid!

Sam.

[6Ace6Artist6]

Thankyou for a great vid! I have a questions tho but you might not be able to answer it..... I'm currently working on a website, i've created it using a template. I'm using the spry navigation bar and i was wondering if it is posible to keep the current page highlighted on the spy bar. For example, if i locate to my "contact me" page, i would like the spry menu bar to stay on a certain colour, and so forth.... is this posible? if so.. how? please reply.. once again, thanks for a great vid!

Sam.

[annebonsonjohnson]

Great help - but thumbs up

[GMUStudentDesign]

@MoftySlashCrank For your hovers you need to change the background image in two seperate css files. First add a background image to a:hover and then add that same background image to the one right below it a:MenuBar. and make sure you do not have a background color in either of these css files. You can view my video that I just made today for step by step guidance if this is not clear. Hope I could help

[MoftySlashCrank]

Thank's for the Video but I still have one question. When I hover over the bar with the drop down attached to dosent change to the color i would like it to go. Ive played around many time yet still cant solve it myself.

Please help :-)

[jo2el]

stay safe

but i am stuck with a spry meanbar i dont like it any know a easy way to use css3?

[my5cents4u]

ya that makes more sense. He'd be better off taking some english lessons or teaching Scottish!

[mvergari]

@my5cents4u I think he's Scottish