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.

Similar Messages

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.

How do I get banner & Spry Menu Bar to appear on every page?

Hi,
I am a new user of Dreamweaver CS6 an a relatively new user to website development in general.
I just followed along through Davide Powers "Creating your first website" tutorial series and found it to be very helpful. I made it through all six parts and managed to get the Check Magazine sample website up and running. I now want to use what I learned to creat my own site, and I am stuck already.
The tutorial does a great job of explaining how to setup a Spry Menu Bar to use for navigation. The tutorial, however, only shows how to put this Spry Menu Bar on the main index.html page. For my actual site, I would like my navigation bar (and my banner) to appear on every one of my pages.
Can anyone here tell me where I can find instructions on the best way to do this?
My navigation requirements are very simple. I just want a common banner with navigation buttons to appear at the top of every one of my pages. The Spry Menu Bar that was created in the tutorial would work great for me assuming I can find a relatively simple way to get it (along with my banner) to appear at the top of every one of my pages.
If it is very complicated to get it to appear on every page (or would require a large time investment in learning advanced techniques), then I would consider passing on the Spry Menu Bar and trying to setup my navigation in a simpler (if more old-fashioned) way.
Any advice will be greatly appreciated.
Thanks in advance,
Paul

If a small, 4-5 page site, make a prototype page with all your columns, headers, footers, menus, etc... and go to File > SaveAs index.html, and then File > SaveAs > page1.html, and then File > SaveAs page2.html, etc...
Or you can save your prototype page as a Dreamweaver Template (.dwt file). Add editable regions for stuff that will change from page to page. Everything outside editable regions is common to all site pages. Then use your Template to spawn site pages. File > New > Page from Template, index.html, page1.html, page2.html, etc.... DW Templates are nice site management tool. But before you use them, read all you can about them in F1 Help as they can be a little tricky to master.
Last but not least, look at Server-Side Includes. They're a huge time saving feature. I use them on every site I build.
Server-Side Includes
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Nancy O.

How to remove empty space in CSS table and move spry menu bar?

Hello! I created www.stonecreekha.com about a year ago basically by watching youtube tutorials and haven't done much with it since so I've forgotten everything! In IE7, everything appears as it should; but in Firefox and IE8, the spry menu bar is positioned slightly higher than it should be (it slightly cuts off the foot of the golfer) and there is an empty space between the navigation bar and the photo. The source code can be viewed from the website. Here are some pics:
IE7 - how it is supposed to look:
IE8:
Firefox:
Dreamweaver:
So basically, I need to know how to remove that empty space between the navigation bar and the picture, and how to move the spry menu bar down a few pixels, in a way that it looks correct in IE8 and Firefox, and preferably IE7 as well.
P.S. I'm a noob so if you could be as specific as possible on what to do in Dreamweaver I'd really appreciate it. Thanks

I belive it's because of the -minus margin being used on the navbar, that you will need to use a negative margin to bring up both the left and right bodyArea divs.
Try : margin-top: -18px; on both divs. You may need to play around with that to get it more precise.
Again, not sure what effect that has on IE as I can't test it.
If it affects IE, then you may need to feed IE a conditional comment for the placement of those divs.

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.

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

How can you create a spry menu bar with no background colour?

How can you create the first level of a spry menu bar to have no colour? I have a coloured background right now and the colour matches when you load the site in Internet explorer but does not match in Firefox. Any suggestions are welcomed on how to fix this.
Thanks!
HK

Here is the site:
http://partnersnaturally.ca/
I am learning with code, (obviously) so any feedback would be nice. I use dreamweaver CS4, but when I originally designed the site it was in a much older version of dreamweaver. I wonder if that could also be a cause. (besides human error)
Thanks again,
HK

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 do I eliminate the space above a spry menu bar?

I made a table, set the CellPad and CellSpace to 0, and set
the width to 800 pixels. Then, I inserted an image (with a width of
800 pixels) into the table, and set the V and H of the image to 0,
and aligned the image to the top. Then, I copied a spry menu bar
(with a width of 800 pixels) above the table and pasted it in the
table underneath the image. There is a vertical space of 16 pixels
between the image and the spry menu bar. How do I eliminate this
vertical gap?

The Spry Updater is at:
http://labs.adobe.com/technologies/spry/home.html
If there is a spacing issue it is hard to tell without the
code. By default the Spry menu bar has 0 for margin and padding.
Make sure there is not a <p> tag within the table because the
<p> tag has an inherit padding/margin to it and could be
causing issues. The image and Spry should just be within the
<td> </td> without any <p> tags inside.

How to fix Spry Menu bar and Firefox with a Mac

The spry menu bar does not properly display in Firefox (Version11&12) on a mac. Have looked at a number of different ways to fix this. Included is a copy of css for menu bar. Would appreciate any suggestions.
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 11em;
          float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: relative;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 11em;
          float: none;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          /* [disabled]border: 1px solid #CCC; */
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #FFFFCC;
          padding: 0.5em 0.75em;
          color: #4F8627;
          text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #FFFFCC;
          color: #4F8627;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #FFFFCC;
          color: #4F8627;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
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.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

Change
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: relative;
to
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 11em;
          left: -1000em;
          position: absolute;
Gramps

How to TroubleShoot Spry Menu Bar 2.0

A few days ago I red David Powers article Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser.
I was very curious about this tool, since I was working on styling menu bars for my website. I studied David’s article carefully and worked my way through the tutorial.
A few hours later I had designed a perfect menu bar, including a specific Bevel and Emboss style, that was exactly the way I wanted it for My website.
Although the menu that I had designed was not properly displayed in design view (in Adobe Dreamweaver CS 5.5), all worked well in live view on my local (Windows) computer and so I uploaded the files to the (Linux) hosting server of my service provider ( Godaddy.com) .
This is where I ran into trouble. I keep having the following dialog:
“SpryMenu.js requires SpryWidget.js” followed by “SpryMenuBarKeyNavigationPlugin.jr requires SpryMenu.js”.
To be sure that there were no coding errors on my side, I downloaded the complete source code attached to David’s article (the Bayside Pulse sample files). To my great frustration, I got the same result: a perfect menu bar in Live View on the local computer and the above mentioned dialog while running the code on the server.
This is where I need some help. It appears that the Javascript include files can’t be found on the server, although I checked and they are just where they should be…
I need some suggestions how to proceed from here.

Login to your webshosting server. Under the file manager, check if the file size is same as it is on your local machine.
The file size of "SpryWidget.js"should be same on local and remote server.

When I use Firefox without menu bar I can see bookmarks. How ever when I activate menu bar the bookmark is missing from toolbar. I tried opening in safe mode and resetting toolbar but it didn't fix the issue. I am using version 7.0

When I use Firefox without menu bar I can see bookmarks. How ever when I activate menu bar the bookmark is missing from toolbar. I tried opening in safe mode and resetting toolbar but it didn't fix the issue. I am using version 7.0

Do you mean the Bookmarks Menu button on the Navigation Toolbar?
You only see that button if the menu bar is hidden.

HOW DO I USE 'SPRY MENU BAR?'

Similar Messages

Maybe you are looking for