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.

Similar Messages

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

How do you make a Spry menu view on all pages but only have to change it one place?

How do you make a Spry menu view on all pages but only have to change it one place? Someone told me maybe I could create a Library item. Any help will be appreciated.

If your pages all have the same basic design, using a DW Template would be a way to do it...
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7abea.h tml

How do you make the Safari menu bars at the top and bottom of the browser go away in iOS7 when you can't scroll the screen?

The menu bar at the bottom of Safari screens only goes away if you scroll the screen. But for one page content, the screen can't be scrolled which renders useless any links/buttons at the bottom of the page.
Is there a fix for this in iOS7?
In iOS6, users needed only to tap the screen to remove the Safari menu bars. This does not work in iOS6.

In Safari > View choose Exit Full Screen

Can you make a TOC menu in Captivate?

This is my ultimate goal - to create a single SWF that
includes a left-side vertical menu that includes links to each of
the slides in the presentation. I know there are 3rd-party vendors
that do this - Articulate - but I was wondering if there was a way
to do it within Captivate.
I was able to rig something up using the "Captivate Player"
and XML, but it's cumbersome, and I need it to be easier for the
non-tech people - not to mention that I have to first break out
each slide of a 25 slide presentation.

Hi benhenny
There are a couple of approaches you could take with this.
If your movie is relatively small, you could use the resize
function (Movie > Resize Movie) to create space for the control
links. Then you could insert buttons in the new area.
Or... you could sign up for a free Breeze account, log into
Breeze and download the Breeze plug in for PowerPoint. Create a
Breeze presentation. But doing this would basically put you into
the same position as what you described with Jesse Warden's
Captivate Player, as it would appear you need links to each slide
in the movie? You would have to create several smaller movies and
link them.
Your call... Rick :)

Spry menu bar changed since I tried to split cells in a table! Help!

I am VERY new to web design, so I apologize in advance for being ignorant. I am trying to learn!
I had inserted a spry menu bar that looked fine and even tested fine!
I subsequently tried to split a section of my table in the web page in order to have 3 columns of centered text. The first time I did this, the spry menu bar became vertical even though it is listed as horizontal. I looked up a forum answer, copied the code from the suggestion, and that seemed to fix the problem (although I still don't know what EXACTLY happened)
I tried to split the table again (I had undone everything prior to this), only this time, the spry menu bar is located outside the page in the left hand corner where my background (I have a wrapper) is. I tried opening another page where I already had a nice spry menu bar, and it did the same thing!! This makes me think it is the CSS sheet for the menu bar that was modified somehow when I split the table. I'm pasting the CSS here below, so if anyone sees any issues that might cause this problem, please let me know!! I have been working for the most part in design view, and haven't really modified the code other than to put a wrapper in and a facebook like button, which I've now lost in the slitting cells catastrophe. Thanks in advance!!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
list-style-type: none;
font-size: 12pt;
cursor: default;
width: 60%;
float: left;
/* 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: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-color: #99CC66;
/* 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: auto;
position: absolute;
left: -1000em;
/* 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: auto;
/* 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
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: #99CC66;
padding: 0.5em 0.75em;
color: #333;
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: #336600;
color: #FFF;
/* 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: #33C;
color: #FFF;
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;
/* 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;

Well, I took a picture of my dreamweaver screen, so you can see what I am looking at...
You can see that the spry menu bar shows up in the top left corner in my design view, but on the website, it is located in the correct place! Maybe it is a Dreamweaver problem??? This happened when I tried to split the cell underneath the section that says "Let NOLA Scribes help you!" into 5 cells so that I could insert 5 differnet pictures and captions. Now, when I open the other linked pages in Dreamweaver, it does the same thing! I'm using an older version of Dreamweaver, but from what I read, that shouldn't be an issue. Thanks in advance for your help!

Creating multiple Spry menu bars in one site

I've been creating a website and I am required to use multiple templates to manage all the different sections of the site. To make it much less of a hassle, once I created one template, I simply saved that template as another template so I would not have to start all over again. On the first template I created a spry menu bar with a certain amount of buttons. And because I created the other templates with that template, those templates had the same menu bar containing the same settings. The problem is, because of the specified settings of the spry menu bar, if I change the amount of buttons from the original to one less, the whole bar on that template will get off center and messed up because the settings for the menu bar are not set to that certain amount of buttons, but if I change the settings to suite that amount of buttons, then the settings for all the templates change and that messes up the other menu bars on those templates because they have a different amount of buttons. Currently my templates all contain 10 buttons and I am wanting to create a new menu bar with only about 4 - 6 buttons. I thought going up to insert and inserting a brand new menu bar would do the trick but when I did that it inserted a menu bar that had all the settings of the already-created menu bar, (ie same background images, and hovers, etc.) as well as the width which, because the width is suited for 10 buttons, it does not properly make the default 4 button menu bar center correctly. And if I try to change the settings on this menu bar then the same thing happens with everything changing and getting messed up.
So after this long explanation, my question is, how can I insert multiple spry menu bars into one site that are not correlated with each other in terms of all the settings so that when changed, will not affect each other? I am guessing I am having this problem because I created all the templates from one template so they are all interlocked, but the page that I tried to insert the brand new menu bar on was not created from any of the templates and was the first page I made at the very start.
http://phonytrojanmusic.zxq.net/ Here is the link to the site. The first page that opens up is the page that I tried to insert the brand new menu bar on. If you click on band choir or elementary you will see the menu bars with 10 buttons that are all interlocked in terms of settings. Also, I'd like to note that if I delete a button in one template, it does not delete that same button in the other templates, nor does it add a button to the other templates if I add one. Only the physical appearance changes because the settings are meant for only one amount of buttons. Sorry for the novel!

Alright well I just tried to use 2 complete different templates. I created one brand new template from scratch, added the menu bar, gave it an ID of "band", and configured it to suite 10 buttons accordingly. Then I started off from scratch again with a starting html page with a different css style sheet and added the menu bar and gave it a different ID of "choir" but the settings of the two different bars still act as one set of settings! I dont know how to fix this problem. Please tell me what to post if anything will help you. Im guessing the solution is very simple but I have tried everything.
here is the code for the two different menu bars (one in each template)
choir
<ul id="Choir" class="MenuBarHorizontal">
      <li><a href="#">Programs</a>      </li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a>      </li>
      <li><a href="#">Directors</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Forms</a></li>
      <li><a href="#">Calendar</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
band
<ul id="Band" class="MenuBarHorizontal">
      <li><a href="http://phonytrojanmusic.zxq.net/index.html">Programs</a>      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/bandmain.html">Home</a></li>
      <li><a href="http://centerburgtrojanmusic.blogspot.com/">Blog</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/directors.html" class="MenuBarItemSubmenu">Directors</a>
        <ul>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/cooper.html">Cooper</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/teschler.html">Teschler</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/directors/lee.html">Lee</a></li>
        </ul>
      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/shows.html" class="MenuBarItemSubmenu">Shows</a>
        <ul>
          <li class="MenuBarHorizontal"><a href="http://phonytrojanmusic.zxq.net/band/shows/field.html">Field</a></li>
          <li><a href="http://phonytrojanmusic.zxq.net/band/shows/concert.html">Concert</a></li>
        </ul>
      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/gallery.html">Gallery</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/forms.html">Forms</a></li>
      <li><a href="http://trojanmusic.org/cal.html">Calendar</a></li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/links.html">Links</a>      </li>
      <li><a href="http://phonytrojanmusic.zxq.net/band/contact.html">Contact</a></li>
    </ul>
I currently do not have any links attached to any of the buttons in the choir bar. Something went wrong and now I have to make the whole site over again so it is not very accessible. Please post back asap!

Clicked Link Color Within Spry Menu Bar

Greetings,
I have a spry menu bar that is working like I want it to
except for one thing. The unclicked links are white, which is what
I want. In the template in which the menu is located, the page
properties are sent black for visited links.
How can I make only the menu bar links remain white when
visited and keep other links on the page going black when visited?
They stay white now in IE7 and FF, but not IE6.
Thanks in advance for any assistance.
Glenn

Have you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
    cursor: pointer;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #FFF;
    padding-right: 2px;
    padding-left: 2px;
    display: block;
    background-color: #223F9A;

Spry Menu Bars, Templates and Current Page Indicators

Hello,
If you have a spry menu bar in your design, then create a template, how do you then go about making the menu bar have a current page indicator on each page created from the template?
Thanks,
Ferg.

Can I send you on a different path? This solution will only be required in a non-editable area of the DWT.
First we write a function to initialse the page
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,"activeMenuItem");
The function compares the URL of the page with the link in the menubar and if they are both the same, it will add an 'activeMenuItem, class to the menuitem.
Next we nee a trigger to activate the function. This is done with a load listener as per
Spry.Utils.addLoadListener(InitPage);
Now we need to ensure that our active menuitem looks different, by assigning a couple of style rules as in the following. The !important needs to be there to override the JS.
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
And lastly we need to add SpryDOMUtils.js as the JS script that we based our JS scripts on
<script src="SpryAssets/SpryDOMUtils.js"></script>
The whole thing will look like
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
.activeMenuItem a {
    background:#a59a84 !important;
    color:#ffffff !important;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<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>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
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,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Or see it live here http://shoguncarco.com.au/index.php where the function has been externalised in http://shoguncarco.com.au/js/plugins.js
Gramps

Clearing Spry Menu Bars within the website

How do I clear the spry menu bar values within a website. I am trying to create a horizontal spry menu bar on one page and then another horizontal one on another page. It keeps the same values everytime I create a new page. How do I clear the values for each page?
Thanks!

heatherfar69 wrote:
I am redesigning the website in the test environment using a new page. While doing so I am redoing the spry menu bar. It changed the spry menu bar in the original website (production environment). I would like to have the spry menu's be separate. How do you create separate spry menu bars for a situation as such?
Thanks!
If you are editing locally it should not overwrite your remote file unless you have the option "Automatically upload files to server on save" checked off. If that is the case you should uncheck that box.
If you want to further separate the old version from the new version, the only other method is to just create a new site. Even if you start with a duplicate of the existing site. Then you don't risk the chance of overwriting the existing files on the server.

Trying to make spry menu bar work on iphone

I would prefer my horizontal spry menu bar to be centered at the top of the page, but to do this I have to make it a fixed width.
This width is too wide for an iphone so the outermost buttons are not accessable.
I have managed a workaround by making the width auto and aligning left.
This makes each menu item cascade under the next so they are all accessable, but it's not brilliant.
You can see this by resizing the browser on the about jill page.
I tried the spry menu bar 2 widget, but couldn't customise the colours to make it look like my existing menu.
What is the best way get this menu working normally on an iphone/android etc?
Cheers
Ps. if anyone answers with code suggestions, could you tell me exactly where that code goes and in what file.

Earlier iDevices & Droids are going to have trouble with a position:fixed menu. Just thought you should know.
What is the best way get this menu working normally on an iphone/android etc?
With Spry Menu 2.0.
Before you tackle customizing Spry Menus, please read the following links. These articles will help you save time and avoid many common problems.
The Ten Commandments for Editing Dreamweaver’s Spry Menubars
http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php
Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Where can I find Instruction on Creating a Spry Menu Bar (CS 4)

As a newbie to DW CS4 (Former user of GoLive) I get the idea that the Spry Menu Bar should be used; I can build the basic bar but have no success in changing font colors, background colors, Role Over, etc. Is there a tutorial that explains this process or am I better off using the DW navigation bar?

http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
And you could check the help function in DW and search for Spry

Make changes to a spry menu bar

I have used a spry menu bar 2.0 widget with the adobe widget browser by David Powers in my web site, and its working really well but now I have found I need a new sub menu, off an existing sub menu, I have read the instructions to try and put it in, done what it said I type the name in then and done the out dent, but when I try to do the link it wont work, I type the link in the link box in properties and as soon as I move my curser away the text disappears. Can any one help please.

The following is what the markup for your menubar will look like if you want to do as you say
<ul id="MenuBar">
<li> <a href="index.html">Home</a></li>
<li> <a href="commercial-contract_carpet_and_flooring.html">Commercial</a></li>
<li> <a href="residential-domestic_carpet_and_flooring.html">Residential</a></li>
<li><a href="information.html">Information</a>
    <ul>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="photo_slideshows/picture_gallery.html">Products</a>
          <ul>
            <li><a href="Products_1.html">Products 1</a></li>
            <li><a href="Products_1.html">Products 2</a></li>
          </ul>
      </li>
      <li><a href="tips_and_tricks.html">Tips_and_Tricks</a></li>
      <li><a href="newsletter.html">Newsletter</a></li>
    </ul>
</li>
<li><a href="inspections.html">Inspections</a></li>
</ul>
Gramps

Can you make a drop down menu in muse

can you make a drop down menu in muse

Yes, you can create main menu and sub menu items , with default menu the sub pages will auto create sub menu items (you should select all pages from menu type option).
These videos will help you :
https://www.youtube.com/watch?v=hncVlzYuuvQ
https://www.youtube.com/watch?v=kziCEqQpF9s
Thanks,
Sanjit

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Please can someone provide me with Spry Menu Bar Horizontal code for Dreamweaver CS5.5?

Log-in to the Adobe Exchange with your Widget Browser and grab "Spry Menu 2.0."
http://labs.adobe.com/technologies/widgetbrowser/
In Widget browser, style the menu as desired and Save files to your DW Local Site folder.
Nancy O.

Can you make a Spry Menu Bar a snippet?

Similar Messages

Maybe you are looking for