PDA

View Full Version : Spry Menu Bar


Phobos
01-09-2011, 03:56 PM
Hi!

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

DWcourse
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.

Phobos
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:

DWcourse
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

Phobos
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?:(

DWcourse
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.

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

http://www.dwcourse.com/dreamweaver/category/spry-menubars

can help you get started with Spry Menubars.

Phobos
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?

DWcourse
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.

Phobos
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?

Phobos
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?

DWcourse
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.

Phobos
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?

DWcourse
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.

Phobos
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?

DWcourse
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.

Phobos
01-12-2011, 02:54 PM
Here you go :
http://dreamweavertest.cba.pl/

DWcourse
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.

Phobos
01-12-2011, 04:05 PM
Yes I'm using only one level menu. I try to achive this:
http://eduweb.pl/kursy/dreamweaver/przyklady/fotoweb/

DWcourse
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>
</ul>

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.

Phobos
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

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