CS3 Spry Menu Bar

I have added a second horizontal spry menu bar to my index
page but i did not get a second set of styles entitled
SpryMenuBarHorizontal.css in the CSS Styles panel. Therefore, when
I went to edit the buttons, it changed the styling of the first
horizontal spry menu bar -- not good. So, how do I add a second
horizontal Spry Menu Bar?
Thanks in advance--

There is no point-and-click way to do this. You would need to
copy the CSS file to make a new one and then link that new CSS file
in the document so that the second menu is styled
differently.

Similar Messages

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

Spry menu bar error in IE 9

Hi everyone,
I added a Spry Menu Bar (menubar1) to my site layout using Dreamweaver CS3. When I clicked 'Live mode' everything looked fine but when I previewed it in a browser and since then I have recently uploaded it to test it out I get white blocks to the right of the nav bar in Internet Explorer 9 (only). When I previewed it in a browser (prior to uploading it) a dialog box would pop up asking to allow blocked content at the bottom. When I clicked "allow" white blocky rectangles showed up to the right of the tabs. I have no idea what it is or why it's showing up. It only seems to be doing this in IE 9 (as I checked it in Firefox & Chrome with no problems to report) when I acknowledge the blocked content by clicking 'allow'. If I ignore the message and click the x the white blocks don't show up. But now that I have it uploaded the blocked content box doesn't show up but I still get the white boxes to the right of the navigation bar. And it's only happening in Internet Explorer (I have version 9 for Windows Vista). I'm attaching a URL to all my files including the html, javascript, CSS, etc.. Note: the files you want to take a look at to see what I'm talking about are: indextest.html and abouttest.html.
If you have any questions or need any additional files let me know. Thanks for the help!
Here's the link to veiw the files: http://www.test.ashleysperrydesigns.com/

Thanks altruistic gramps for the help. Changing the color of the blocks fixed it however there is a slight overlap between the box and the green border. If you go to: http://www.test.ashleysperrydesigns.com/indextest.html you will see what I mean. I know there has to be an easy fix but I don't know how to do it. Do you mind taking a look?
Thanks,
ashmic

Add cell border to spry menu bar

Hello,
I need help with editing a style sheet for a Spry menu bar I
made in Dreamweaver CS3. All I need to do is to add a thin (1px)
dark gray border to the cells on the main navigation bar.
Is there a bit of code I have to change/insert in the style
sheet? I can't figure it out. Please help.
Thanks,
Kevin

I have not figured out how to make the background images
different in the menu and sub-menus but to add a background image
in general you must double click on the css rule
ul.menubarhorizontal ul under the css style bar "all rules" and
select background and then you can place a background image.
Depending on the image and how you would like it to display you
will want to alter the following options: repeat, attachment(not
really necessary for a menu bar image), horizontal and vertical
position.
I solved my menu bar issue by making the graphic long enough
to fill both the menu bar area of 118px (it just cuts off the
extra) and sub-menu area of 235px .
Here is a link to the site I am working on :
www.ssctestsite.org

Spry Menu Bar lost formating

Hi,
Using DW CS3, I was cleaning up my site and wanted to place
my main css file in the css folder (for some reason, it was in the
root folder). I assumed DW would keep all links, etc. in tact.
Everything else is fine, including my horizontal Spry Menu Bar, but
the vertical Spry Menu in my left sidebar lost all of it's
formatting.
I tried moving the file back but the link to the css, or
whatever it is that formats the styling for this, is broken. Even
deleting the Spry Menu Bar and inserting a new one has the same
result - no formatting.
In the code for the Spry Menu Bar discussed (I removed a
number of irrelevent links):
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />

</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../Contact-Us.html" rel="no
follow">Contact Us</a></li>
<li><a
href="../FAQs.html">FAQs</a></li>
<li><a href="../About-Us.html">About
Us</a></li>
</ul>
<a href="../index.html"><img
src="../Graphics/bannerimage.jpg" alt="BodyMindAwakening.com"
width="890" height="275" border="0" /></a>
</div>
<div id="sidebar1">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="../index.html">Home</a>
</li>
<li><a href="../Reading.html">Recommended
Reading</a></li>
</ul>
<h3 class="style1"> </h3>
</div>
Is this enough to go on to figure this out?
The CSS folder is in the root folder. The Spry Assets folder
is in the root folder. The .css file "thrColFixHdr.css" is the one
I moved from the root folder to the CSS folder.
Thanks for any help or suggestions!

Add the following to each page, or to your template
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"current");
Spry.Utils.addLoadListener(InitPage);
</script>
making sure that you do have SpryDOMUtils.js in the SpryAssets folder.
Because the above place a class of current in the list item, you will need to change the selctor to and add
ul.MenuBarHorizontal li.current a {
    color: #F4F4F4;
    background-color: #8FC8D1;
Gramps

IE problems with vertical spry menu bar

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

Spry Menu Bar - No Formatting

I build several sites on Dreamweaver CS3. I decided I wanted to add Spry Menu Bar to one of them. When I try, I get no formatting at all, just a list of text menu items. Everything else is normal, but there is no menu bar, it displays instead as something between code and display. It previews that way, too. So, I tried inserting the bar on other sites, and it works fine. On the site I am trying to insert the bar, when I try to insert it takes a long, long time for the wrong thing to turn up. On the other sites, the bar inserts immediately. Anyone else run into this? I've checked all the site properties, and nothing I find suggests a fix. I'm totally stumped.

I assume you have checked the obvious: correct route to the JS and CSS files? Make sure you have each of the core elements and that the correct paths to such; my guess is that you are missing the final item below. The below are from http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html (scroll down the page to "Insert the Menu Bar Widget"). Make sure you have all 10 items/steps completed as explained within that article.
In the header:
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
After the script:
<script type="text/javascript">
var menubar1 = new Spry.Widget.MenuBar("menubar1");
</script>

Can you make a Spry Menu Bar a snippet?

Is there a way to make a Spry menu bar a snippet so you can
edit the snippet and have it updated on all pages?

The include method is good, but make sure to use root
relative links in the menu so that if you place the menu on a page
in a sub folder of your site that the links will still point to the
correct place.
If you are using Dreamweaver, it may be possible to place the
menu into a non-editable region of a template and updates will be
made in all of the child page. Or you might be able to make it into
a Library item (again with root relative links), and then changes
to the library item will update throughout the site. With both of
these options, you'll need to upload the changed pages, so these
aren't as quick and easy as the include method that V1 Fusion
suggests.
If you edit the Library item and the include file, you'll see
in Dreamweaver that the menus are not styled, that's because the
file that you're editing does not have the CSS file(s) linked to
it. You should be able to add a Design Time style sheet ( IN CS3:
Text -> CSS Styles -> Design-time... ) to assist you in
seeing it like what it would look in Dreamweaver without the
library/include option.

Spry menu bar in template

Hi,
I'm new to dreamwever, but since it is really user friendly I
already achived a lot.
But I have a problem with the spry menu bar. What I want is
the following.
I have a template on which I want to place my spry menu on.
That's what's already is working.
The next thing I want is to have the backgroundcolor of the
menuitems changed per page I created based on the template. Herefor
I want to change the CSS. But since I placed the spry menu in the
template I can't touch the CSS rule and so change anything in the
CSS.
My first thought was to place the menu in an editable region,
but unfortunalty you can't place a spry widget in a editable
region.
Who can help me figer out what to do.
Thanks in advance.
Lesley

<link href="assets/SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css" />
This file is completely editable. That's where you would make
the changes
to the Spry menu's stying.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"lesleyudw" <[email protected]> wrote in
message
news:[email protected]...
> No, it's not working for me. I can't touch the CSS, I
attached the code
> I'm
> talking about. When I have this open in dreamweaver cs3
then I can't
> change
> anything to the assests CSSline
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml"><head>
> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
> 
> <title>Mendoline | Home</title>
> 
> <style type="text/css">
> 
> </style>
> 
> <link href="assets/style.css" rel="stylesheet"
type="text/css" />
> <script src="assets/SpryAssets/SpryMenuBar.js"
> type="text/javascript"></script>
> <link
href="assets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet"
> type="text/css" />
> </head>
> <body>
> <div class="transparant">
> </div>
> <div class="container">
> <div class="header">
> <img src="assets/images/headergif.gif" width="658"
height="143" />
> </div>
> <div class="menu">
> <ul id="MenuBar1" class="MenuBarHorizontal">
> <li><a href="index.html">Home</a>
</li>
> <li><a href="wiezijnwij.html">Wij zijn
wij</a></li>
> <li><a href="#"
class="MenuBarItemSubmenu">Entertainment</a>
> <ul>
> <li><a
href="heksenact.html">Heksenact</a></li>
> <li><a href="#">The Dutch
Way</a></li>
> <li><a href="#">Sport en
Spel</a></li>
> <li><a href="#">Popenkast
theater</a></li>
> </ul>
> </li>
> <li><a
href="organisatie.html">Organisatie</a></li>
> <li><a
href="gastenboek.html">Gastenboek</a></li>
> <li><a
href="contact.html">Contact</a></li>
> </ul>
> </div>
> <div class="content">
> <h1>
> Home
> </h1>
> 
> <p>This is the home page.</p>
> 
> </div>
> </div>
>
> <script type="text/javascript">
> 
> </script>
> </body>
> </html>
>

Spry Menu Bar in Javascript

Hi all ,
Is it possible to place a Spry Menu bar in a Javascript? If
so can any one please tell me of a tutorial or URL with an example.
I have a web site (Which was produced solely in Frontpage)
and has several pages with the same menu on them, so if I need to
change any thing on the menu I have to change it on every page.
If I could call the menu in via a javscript then obviously I
would only need to ever alter the one script.
Be gentle with a beginner....lol
Thanks in advance.

Balloony2 wrote:
> If I could call the menu in via a javscript then
obviously I would only need
> to ever alter the one script.
That's a recipe for disaster. Your menu would never be found
by search
engines, nor would anyone be able to access your site if
JavaScript were
disabled in the browser.
The way to approach this issue is to use a server-side
include (SSI).
Ask your hosting company if it supports SSI or a server-side
language
such as ASP or PHP. Using SSI normally involves changing the
filename
extension to .shtml. You would also need to change the
filename
extension with a server-side language.
The advantage of doing this on the server is that every user
sees the
same output, regardless of whether JavaScript is enabled.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Problem with spry menu bar

i'm using dreamweaver CS3 to create a website using php
scripting. for some reason, my spry menu bar has become messed up.
it is now in bulleted form and the font and font color are all
wrong. i checked but the styles are turned on.. so how can i solve
this?

Find that some reason that the spry menu bar became messed up
and revert to how it was before that some reason occurred.
Hope that helps!

What is best way to update Spry menu Bar linkages throughout site?

I am new to Dreamweaver CS3 and Spry DataSets; however, I easily created multi-level linkages using the Spry Menu Bar tool. Is there a way that I can cause any linkage change(s) to be proliferated throughout the pages of my web site. This menu bar is the main navigational bar in my site. Currently, I am finding myself going to each page to update the linkages and I know that is the wrong way to accomplish this. Any help is appreciated. Thank you. degraylady

Arnout,
Thank you so much for your reply. It would have taken me a long time to figure this out for myself. I found an article on SSI with detailed instructions at http://http://www.tutorialized.com/view/tutorial/Dreamweaver-CS3-Libraries-and-Server-Side -Includes-Tutorial/28247 so I appreciate your answer so much.

My spry menu bar rolls down my web page as I scroll down page??

Can anyone help?? Created spry menu bar in dreamweaver cs3, looks good but when I scroll down my web page the entire bar moves too.

gideon007 wrote:
I'm no expert here but it sounds like its fixed positioned.
Agreed,
If not, post a online url.

Spry Menu bar interactivity page disappears

Hi,
I am using Dreamweaver trail CS3 for Mac. I am creating web
pages using frames and tables. When I insert a Spry Widget Menu Bar
Widget the "Spry Menu Bare: Menubar1" interactive page does not
appear, so I can add or change names of Main Items and Sub-items
along with linking. Why is it doing this?

Hi, I am using a "Top and nested left Frames" The Left frame
I am using to display navigation menu. I insert
"menubarvertical#menubar1". The menu that allows to edit lables,
links and etc. does not come up. Do I need to edit through code?
Here is the code page for the left frame.
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<table width="123" height="48" border="0">
<tr>
<td><img src="NewFiles/Photobut-normal.jpg"
width="107" height="22"></td>
</tr>
</table>
<p> </p>
<p> </p>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item
3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item
3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<script type="text/javascript">

</script>
Thanks,
Becky

SPry menu bar help

I have recently migrated from MS frontpage '03 to Dreamweaver
CS3. I must admit , for a novice at WYSIWYG and a complete beginner
at the html code, this transition was not as easy as I expected.
However after purchasing a few books, and viewing some of the vids
of adobe , I finally got the hang of things.
I am busy designing a school website, using one of the html
templates offered by DW CS3 (two coloumns elastic,right sidebar,
header and footer). I have inserted a spry horizonal Navigation bar
under the banner(which is a jpg). Both th espry navigation and the
banner is in the header part of the html template.
I have encountered three probs:
1) I cant change the colour of the spry menu bar and its drop
down menu. When I look at the code/split view, I do not see any
code relating to the color of the menu bar (ie. #999999).
2) I dont seem to know how to align the spry menu directly
under the banner. (there is a slight space between the banner and
the spry menu )
3) Also there is a slight grey space on top and at the bottom
of the banner (even after I set the padding to 0px)
A reply would be highy appreciated
Text
Text
gg

Hi Zenoneath,
Possible answers to your probs:
1. Using the spry menubar, you also are linked to a
sprymenubarhorizontal.css (look in your HEAD code), the css is
located in the spryassets dir. Read the grey text between the css
code and you find your answer to the colors.
2. Perhaps within the same CSS you can position the menubar
exactly. otherwise place the complete menubarcode in a div and give
this div a classname and position it within a css stylesheet.
3. Most likely, using a DW template, your already linked to a
specific CSS file wich is combined with the template. In that CSS
file you will find the headerdiv, and can change bg color there.
Looks like it all about CSS... life is simple...sometimes.
Hope it will work for you!
Hans

CS3 Spry Menu Bar

Similar Messages

Maybe you are looking for