View Full Version : Spry Menu Bar

01-09-2011, 03:56 PM

I'm beginner in Dreamweaver and I've got simple problem. I try to add navigation bar and for this purpose I use option Spry Menu Bar and I don't know how to add image as a button and also states for my buttons. I know that I must use linked JS and CSS files.

Best regards

01-09-2011, 09:58 PM
The spry menubar handles the javascript for you. The various states of the menu items are handled in the CSS. If you want a different image for each menu item, it's a bit of a pain and generally counter-productive.

01-10-2011, 01:47 PM
So how can I add my own image ass a button? Do you know better way to do this?:mrgreen:

01-10-2011, 01:53 PM
You can, simply go in and replace the existing text links with image based links but it won't end up as simple as it sounds. But get started and ask more questions.:-D

01-10-2011, 03:52 PM
OK, but how can I add states for my buttons? In CSS/JS files? In CS4 I could simply do it in Navigation Bar, why it isn'y able in CS5?:(

01-10-2011, 04:09 PM
The states are controlled in the CSS using the hover pseudo class. The style rules are already there, you'll need to modify them.

The old Navigation bar used methods that are no longer considered good practice and is no longer supported in CS5.

01-10-2011, 04:10 PM
BTW, the articles linked on this page:


can help you get started with Spry Menubars.

01-11-2011, 05:58 PM
OK, I understand and have one more question. When I add image, or bg color to my buttons it works for all of them, but I must have another picture for each button. How Can I do that, maybe adding new ID rule?

01-11-2011, 06:44 PM
to add a background image or color on a per button basis, you'll need to give each button its on ID.

01-11-2011, 07:42 PM
I've created new ID and in Tag Inspector I type right ID and nothink happens :( When I try to use this ID for other items in my webpage it works fine. What am I doing wrong?

01-11-2011, 07:56 PM
Now it's OK, but I have another problem, because my image button is black with some text, and in the menu bar I can see only part of my button, width and high are set on auto, so what's wrong?

01-11-2011, 08:58 PM
if you use a background image, you'll have to set the height of the links (the a or anchor tag> in the CSS to match the height of the image.

01-12-2011, 12:59 PM
I've done this, and now I have my image button and also text, and I can't delete this text because it shows that navigation bar is broken. How can I delete this text?

01-12-2011, 01:57 PM
You can place the text in a span and apply a style rule with visibility:hidden (the text may still show in Design Mode but should be hidden in Live View or Preview. Another option is to set the overflow property in the link style rule to hidden and add padding to push the text down and hide it. Again what you see in Design mode may not be what you get.

And FYI, you might want to be checking your page with multiple browsers. the more you edit the CSS for a menubar the more likely you are to develop browser specific errors.

01-12-2011, 02:10 PM
OK, thanks, my button is called a.foto, in css styles I add a.foto:hover and it works, but when I try to add a.foto:visited or a.foto:active it doesn't work. What's the problem?

01-12-2011, 02:13 PM
I don't know the styles may be being overwritten somewhere or some other issue.. At this point you should probably post the page somewhere and give us the link.

01-12-2011, 02:54 PM
Here you go :

01-12-2011, 03:56 PM
The horizontal menu? What exactly are you trying to achieve?

And, if you're only using a one level menu with no submenus using Spry is overkill.

01-12-2011, 04:05 PM
Yes I'm using only one level menu. I try to achive this:

01-12-2011, 07:20 PM
Then keep it simple. Try something like this:

<ul id="ListMenu">
<li><a href="../index.html" class="home">Dominate Dreamweaver</a></li>
<li><a href="../learn-dreamweaver.html" class="learn">What You'll Learn</a></li>
<li><a href="../james-cook.html" class="bio">James Cook Bio</a></li>
<li><a href="../dreamweaver-tips/index.html" class="tips">Dreamweaver Tips</a></li>
<li><a href="../contact.html" class="contact">Contact</a></li>

with CSS like this:

#ListMenu {
font-size: .8em;
text-align: center;
margin: 0px;
padding: 0px;
width: 960px;
list-style: none;
#ListMenu li {
float: left;
width: 20%;
margin: 0px;
padding: 0px;
#ListMenu li a {
color: #000;
text-decoration: none;
background: #CD5;
display: block;
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #FFF;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #FFF;
#ListMenu li a:visited {
color: #670;
#ListMenu li a:hover {
color: #FFF;
background: #670;
#ListMenu li a:active {
border-top: 1px solid #333;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #333;

Again, you can set a specific height and width in the a #ListMenu li a rule and apply a background image if you want.

01-12-2011, 09:37 PM
I can't do it like you said because I must have another ID to each picture :( And when I start making list I add images, and how I can add another states for my button? I create new ID for each other but it don't work

01-13-2011, 06:41 PM
I've done it. Thanks