Using Spry Menu

I'm in the middle of re-doing my astronomy web site using Dreamweaver CS5 and have designed my Spry menu. I haven't done much in Dreamweaver having used FrontPage for the most for several years. I only create my own web sites for displaying my astronomy images. I have it on my index.html page and was expecting the menu to appear on each subsequent new page. I am using a free template and expect the issue is having the menu static on all pages. The area that the menu was intended is on the left side but I could not see how to have the Spry menu display at that location so I used a horizontal menu across the top of the page. My published site, www.astral-imaging.com, was made in FrontPage using a template that used frames so this wasn't an issue. This site is using a different template altogether. What I'm not sure of is when editing the menu, will the changes go site wide everywhere the menu is displayed? So far it appears not to. I must confess that I'm not CSS savvy and suspect this may have some bearing in this. The other issue is how do I get additional pages to show the menu as well? The reason the linked pages show it now is that I copied it to the page I use as a new page template but if you look at the Nebulae sub-menu you'll notice that Planetary is missing on all but the home page. I remember using frames that everything but the body of the pages were the same so I didn't have to deal with this but now I'm a bit lost.The pages I'm working on are posted at http://www.astral-imaging.com/test/index.html
Any suggestions would be very welcomed
Thanks,
Steve

You could use a method called "includes" to include the menu in every page and edit it in a single location
see my answer to http://forums.adobe.com/thread/882527?tstart=0 for some pointers and a Spry example

Similar Messages

HOW DO I USE 'SPRY MENU BAR?'

Please i need an indept explanation of how to use spry to create menu bars to my satisfaction. Your useful information shall be highly appreciation. Thanks!

Spry menus have been deprecated and, if you are using an older version of Spry, it will not work on Mobile!
So don't.
You can do drop-down menus with rollover effects and everything simply by using straight HTML and CSS. You do have to know HTML and CSS though. Another great way to simply use a plugin is to go to Project Seven and buy their system (there are others out there, but the guys at PVII are particularly crafty and their menu systems work with all browsers, including the really bad Microsoft ones).
Here is a link to a tutorial that will show you how to do a straight HTML and CSS3 dropdown menu yourself.

Dreamweaver CS3 Linking Using Spry Menu Bars

Hello,
Please forgive my noobieness. I used to use Adobe GoLive and
am now transitioning to Dreamweaver.
I have the layout of the website I want using a template
provided by DW with a fixed main content area, header and a footer.
The banner and the horizontal menu bar are at the top. The content
would be displayed below as each button from the menu bar is
clicked. I have followed the directions in the Missing Manual
series but I still seem to have problems.
1. For example. For a button listing Directions. I have it
set to link to the proper .html file called Directions.html. This
was set using the Spry Properties. Same for Home and a pricing
menu. However when I run it using Firefox it opens a new tab and
displays the chosen content there rather than in the existing page
where the menu bar is located. In IE I cannot even get the page to
jump to any place else. I dont here the clicking noise or even some
kind of recognition that is trying to load the chosen page.
I see a list for target but those have no effect.
2. Secondly. In IE the menu bar drop down works really slow
even when I view other peoples websites that were built using CS3.
In Firefox it seems to work fine.
Any suggestions would be great and appreciated. Attached is
som code.

Hi Peter,
only to show you my impressions.
1. FF:
2. IE8:
There is no "failing".?
Hans-G.

Spry Menu Bar Advanced Styling Question

Hello all,
I am using Spry Menu Bars for the first time and have checked
out most of the online documentation. I have gone into the CSS file
to customize much of the look of my first menu using the
documentation I could find.
I would like to do the following, but can't seem to find the
CSS code bits to do it:
1. Change the height (not width) of my top menu trigger item
-- it has created some unwanted padding.
2. Change the width of my submenu independently of the top
menu item -- eliminate cramping and allow for longer text than the
top menu trigger.
3. Change the submenu text color and size independently of
the top menu item text.
Here is a link to my sample navigation bar (only the first
item "Latest News" has a menu):
http://stage.ecdi.com/includes/nav_bar.html
Sorry for the extent of my request, but I have gotten
blurry-eyed looking for posted material that answers my inquiry. I
wish there were an easier way to accomplish complete styling,
considering how popular these menus are.
You guys are the best...
Matt

Hi,
could you have a look here to David's tutorial: http://foundationphp.com/tutorials/sprymenu/customize4.php?
... or this thread (2: gramps) e.g: http://forums.adobe.com/thread/801176#3519178
Hans-Guenter

Spry Menu Bar Question

Hello all,
I am using Spry Menu Bars for the first time and have checked
out most of the online documentation. I have gone into the CSS file
to customize much of the look of my first menu.
I would like to do the following, but can't seem to find
where to do it:
1. Change the height (not width) of my top menu item -- it
has created some unwanted padding.
2. Change the width of my submenu independently of the top
menu item -- to allow for longer text.
3. Change the submenu text color and size independently of
the top menu item text.
Here is a link to my sample navigation bar (only the first
item "Latest News" has a menu):
http://stage.ecdi.com/includes/nav_bar.html
Sorry for the extent of my request, but I have gotten
blurry-eyed looking for posted material that answers my inquiry.
You guys are the best...
Matt

The reason you don't see a lot here in this forum is because
Adobe created a Spry forum. The first thing I would recommend doing
is updating Spry if you have not done so before:
http://labs.adobe.com/technologies/spry/
Then you can head over to the Spry forums here:
http://www.adobe.com/go/labs_spry_pr1_forum
To answer your question though, everything you want to edit
is in the CSS document in the SpryAssets folder. All of the
attributes are defined in there.

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

IE Issue Using Vertical Menu

I wonder whether someone can help me. I have used spry menu in dreamweaver and works ok in Safari and Firefox however in IE 7 the menu appears in two lines. You can see this on www.sancere.com/index and also when you click onto Asian weddings. Is there something I can do to stop this.
I have enclosed the IE css
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
f\loat: left;
Also I want to highlight the current page in a colour to help indicate what page you are on how can I do this?

The link above is broken to due to the lack of a file extension.
Should be www.sancere.com/index.html
Removing this hack works for me in IE7 and IE8:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
f\loat: left;

Spry Menu 1.6.1 vs Spry Menu 2.0 (1.7) aka UI Menubar

I have been working with the original Spry Menu that came with CS5 for some time now. Slowly I have been learning how to use it, and more importantly, edit it without breaking it. There are some great articles out there by David Power that I printed out and keep in a folder at my desk. Great stuff.
Now I want to build a menu that is supported on touch pads like an iPad. Having spent many hours trying to figure it all out, I found a post that said you had to use the Spry Menu 2.0 version for touch features. Oops, did not know that. Having upgraded to the new version in the Widget Browser, customized it for colors and such, I put into a test page. This is where it went all wrong.
I have no access to anything in the Properties Selector area. It’s just blank, no options at. If I go back to one of my old menus, it works just fine. So I can't add top or submenu items to the menu like I could in the old version, unless I want to type out the code. The menu does not display is design view like a finished product. All I get is a listing of the menu. I have to display the page in a browser or in live view mode to see it display right. Which throws the page all out whack and it’s hard to edit with this big long list of text.
So, I guess my question here is. Does this sound right to everyone? I saw a posting by Gramps, which makes me think I understand the problem above it true and because of that he sticks to the original version. I want the touch pad access so I need to upgrade.
Is there a fix I have not found? Some code change to make it all happy again? Should I just dump the idea of using the Spry Menu and use something else?
Thanks to everyone out there who take the time to answer our questions. I think this is a my very first posting.

Amy, welcome to our fold.
You have struck the epitome of the problem when using Spry Menu 2.0, it is a beast when one tries to shape and style it outside of the Widget Browser. The markup looks very meek and mild as in
<ul id="MenuBar">
<li> <a href="#">Home</a></li>
<li> <a href="#">Entertainment</a></li>
<li> <a href="#">Politics</a></li>
<li> <a href="#">Sports</li>
</ul>
but once it is interpreted by the JavaScript, it looks like
<div class="MenuBar MenuBarLeftShrink" id="MenuBar">
    <ul id="" class="MenuBarView">
    <li class="MenuItemContainer"><a href="#" class="MenuItem MenuItemFirst" tabindex="0"><span class="MenuItemLabel">Home</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Entertainment</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Politics</span></a></li>
    <li class="MenuItemContainer"><a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel">Sports</span></a></li>
    <a href="#" class="MenuItem" tabindex="-1"><span class="MenuItemLabel MenuItemLast"></span></a>
</ul><br class="MenuBarBreak">
</div>
<a href="#">

</a>
</body>
</html>
There are certain aspects that I do not understand without spending time to follow them through. There is no documentation so you are left on your own. When submenu levels are added, the generated markup looks even stranger.
The main problem with the original SpryMenuBar is its lack of support for touch screens; alternatively one could say that the problem lies with touch screens and their lack of ability to register hover events.
This means that if we had a menubar that is not reliant upon hover events, our menubar will work in touch screen clients. In our menu above (that is the one that has not been reformed by JS), there is no hover event. All of the menuitems, being single level, follow the link with a click event. It is when a menuitem has a link as well as submenus that a hover event is required. If we remove the link when a menuitem has submenus, we also remove the need for a hover event and it will work in touch screen devices. To illustrate this
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a> 
    <ul>
      <li><a href="mylink11.html">Item 1.1</a></li>
      <li><a href="mylink12.html">Item 1.2</a></li>
      <li><a href="mylink13.html">Item 1.3</a></li>
    </ul>
</li>
<li><a href="mylink2.html">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="mylink311.html">Item 3.1.1</a></li>
          <li><a href="mylink312.html">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="mylink32.html">Item 3.2</a></li>
      <li><a href="mylink33.html">Item 3.3</a></li>
    </ul>
</li>
<li><a href="mylink4.html">Item 4</a></li>
</ul>
There are commercial extensions available that do work within DW as opposed to products from the Widget Browser that do not allow for DW interaction.
Gramps

Spry Menu insert works on MacBook Pro but not on iMac

I am teaching myself Dreamweaver CS4, having been forced to migrate from GoLive. Am building a website and want to use Spry Menu Bar. Create page, save page, insert Spry Menu Bar, save page. On MacBook Pro, menu bar appears with Spry Menu Tab attached. On iMac, menu bar shows up WITHOUT Spry Menu Tab, which precludes the correct Property Window from appearing. Anyone know how to get around this? I called Adobe and they, without exaggeration, told me that they couldn't support Spry items and that I had to go the this forum for answers. What BS!

I called Adobe and they, without exaggeration, told me that they couldn't support Spry items and that I had to go the this forum for answers. What BS!
Its not the first time I hear that. Its clearly a Dreamweaver issue instead of Spry issue.
In design mode, if you hover over the inserted menu bar, does it get a blue color? If yes, what happens if you click the blue label "Spry Menu Bar: Menubar{x}"? It should display in the properties panel.
If not could please provide us with a screenshot?

How to pass a value instead of index to the spry menu?

Hi,
I am using spry menu in DW and I have a page called products which has a menu with some items. The question is how can I access to item menus using this link:
".../products.html#USNP"
Now I can access to a specific menu item of this page using the following link ".../products.html#tab=3" but i like to have the name of the menu items instead of the item number.
I would be appreciated if anyone can help me .
Thanks

So we are talking SpryTabbedPanels where the tabs are used as your menu bar.
The out-of-thebox Spry product identifies each tab as a number and as such, only numbers can be use to open each panel.
To overcome this limitation, you can assign your expressions to corresponding numbers. I am not sure if the '#' will do the trick, thinking that you may need to assign a variable instead.
Gramps

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

Edit Spry Menu Bar using Mouse Click

Hello…
I created a Spry Menu Bar and it's working just fine. But on phones and Tablets the submenu doesn't work because it's a mouseover, is it possible to change it to a mouse click?
Thanks!

Yes, but it needs a lot of JS coding to do so.
A better solution is to use a jQuery or pure CSS menubar or visit http://www.projectseven.com/ for a commercial version

How to use a Spry Menu as a Library item?

Okay, this is my second post; but, with a different title.
I made a Spry menu for my Home Page. I saved it and a logo
together as a library item and placed the library item on a second
page. The links in the menu work when there is no style sheet
attached for the Spry meny and the menu appears just as text; but,
as soon as the .css style sheet for the menu is attached to the
second page, the menu appears correct except the drop down menus do
not work. I tried adding a link to the Spry Java Script file as it
is on the home page; still no luck.
I tried the same with a test file, which I have since
removed, stored at the same folder as the home page; same problem.
How are we suposed to make a workable library item with a
Spry Menu? Surely this is possible, no?
Here are the two pages I am referring to:
Good Page:
http://iculver.com/
Bad Page:
http://iculver.com/pages/AboutUs/Personal_info.html

Apologies - my mistake. You are correct, and my instructions
were
incomplete. That other bit is required too.
> Now, I thought (probably in error) that items after !--
were comments, but
> it
> seems to be required, too. I tried eliminating taht part
and the menus did
> not
> work. I need all of this last part.
The comments 'hide' the scripting from validators and older
browsers, but
it's still recognized as javascript, since the comments occur
INSIDE a
<script> tag.
> these Spry Menus in Libraries easier to use...)
It's not so hard once you get all the pieces together.
1. Create the library item as described.
2. Make sure that each page that is to carry this library
item has the
required links in the head (to the CSS and the js files), AND
in the body.
Why not use a template instead? That way, all of these links
are managed
for you.
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
==================
"JustBob" <[email protected]> wrote in
message
news:[email protected]...
> Hummm...
>
> Now, don't yell at me, okay? I'm a goLive switcher and
really a graphic
> designer, not a coder...
>
> So, It seems from the above message that I am to
establish the links to
> the
> script and the css file before inserting the library
item. But, either
> way,
> that didn;t do the trick for me. I did find a bit of
code in one of the
> pages
> that seems to be required.
>
> It seems I also need to insert this just before the
close of the body tag:
>
> <script type="text/javascript">
> 
> </script>
>
> Now, I thought (probably in error) that items after !--
were comments, but
> it
> seems to be required, too. I tried eliminating taht part
and the menus did
> not
> work. I need all of this last part.
>
> I'm sorry I'm such a dope. I probably did something
funny when I was
> styling
> the menu. (I do hope Adobe can accommodate dopes lime
me, though, and make
> these Spry Menus in Libraries easier to use...)
>
> Thanks for all of your help! Really!
>

Using a different background for the drop down options in a spry menu bar

Hi all,
I am trying to set just a background color in the drop down menu, I have a background image repeated along the x asis at the top but this has come down into the sub menu bar how can I change just the lower drop down menu to just a solid color??
I have tryed google and youtube to try to find a answer but have had no luck in finding the solution to this problem.

Give a man a fish, you feed him for a day. Teach a man to fish, he eats every day…
winabe23, you joined this month—probably because you were having trouble with CSS and HTML and you have certainly come to the right place.
I'm going to send you to several places I have found helpful in understanding how you can make drop-down menus in CSS without the need for JavaScript—though JS may be necessary for certain older browsers that do not understand pseudo classes and may be necessary for the blind or keyboard navigation.
CSS Wizardry has a great tutorial here.
Line25 has one here.
For those who don't want to have to wrangle code, here is a menu generator from PureCSSMenu.
Here's a page by Eric Meyer who describes how the concept works.
And here is a video tutorial by "zorro30mum." It's in two parts, but there is a link to Part 2 below Part 1.
The reason why I am posting all of these links in my answer is because you're using Spry. And Spry has been found wanting by Adobe and they are deprecating and abandoning it.
The Spry framework is an open source Ajax framework that Adobe developed. Ajax stands for Asynchronous JavaScript And XML. On August 29th 2012, Adobe handed over Spry to github. If you want to help github develop Spry, there is a site for that, but I'm thinking you're not a JavaScript developer.
I would recommend you pay a little more attention and time to Ajax, which is not deprecated and not discontinued. It allows you to do client-side triggers for server-side code. But that's if you want to do work in JavaScript, XML and a server-side language, like Cold Fusion, php or ASP.
But in the meantime, the tutorials above will get you into understanding how this whole menuing stuff is done in CSS and give you the understanding necessary to do simple stuff, like changing the color of a background for a drop-down.
I hope this helps you make great websites!
-Mark

Spry Menu problem with using a transparent background image

Hi- I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view, but doesn't work in browser view (safari), in fact the menu reverts to it's original grey and blue boredom. Does anyone have a solution for me? Does this mean it will be grey and blue when it goes live? Thanks, Ruth333333

Please supply a link to your site.
Gramps

Using Spry Menu

Similar Messages

Maybe you are looking for