Spry Menu Template question

I am fairly new to Dreamweaver and am self taught so I am
trying to learn the best way to do things. I have created a
horizontal Spry menu on one of my pages in DWCS3. I then copied and
pasted that code on each page I wanted the Spry menu. How can I now
go back and make the menu a template so that any changes I make
will be reflected on every page that has the menu - instead of
having to change each page every time I change the menu.

> If I create the whole page as a template, then are all
of the subsequent
> pages
> that use the menu also templates
You need to read DW's F1 Help about how to make templates and
spawn child
pages. If you make the page a template, you would need to
also specify
editable regions (regions in which content can be edited on
the child
pages).
If you use includes, you would need to create a text-only
page in DW, into
which you paste the content for the menu *ONLY*. Save this
file as whatever
filename you like. In any page that you want to use the menu
you would need
to a) have the required Spry javascript already in the head
of the page, and
b) use INSERT | Server-Side Include, to browse to and select
the menu
include file.
It's a bit tricky. Make sure you get the hang of this using
test pages
first, with simple content.
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
==================
"Steve Field" <[email protected]> wrote in
message
news:fb6fj0$q56$[email protected]..
> which method do you think would be more efficient and
easier to maintain.
> We
> use php on our server. Can you explain exactly how to
use the include. I
> am
> assuming I make the menu a separate page then do I save
it as a javascript
> file. I am a novice.
> If I create the whole page as a template, then are all
of the subsequent
> pages
> that use the menu also templates
>

Similar Messages

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

  • Spry menu horizontal question

    I was wondering if it was possible to edit the spry menu so
    that the sub menus showed up as a horizontal line below the main
    links something like this
    {the initial state would look like this}
    home | about us | contact us
    {then if you rolled over about us it would look like this}
    home | about us | contact
    about us submenu1 | about us submenu 2 | about us submenu4

    Came across the fix by accident thru extensions in menu bar,
    and choice of cursor for each section. Feeling happy! Happy New
    Year everyone.

  • Dreamweaver / Spry Menu / iWeb question

    Hi,
    I'll try to keep this brief.  I'm not a talented web page designer... I know my way around iWeb and have poked around a bit in Dreamweaver.
    In Dreamweaver I've created a simple Spry horizontal dropdown menu.  I'd like to add that menu bar I've made into an iWeb page using "add html" snippet.   I can't seem to get to work though.  I am aware that Dreamweaver creates a folder called "SpryAssets" that is necessary for this to work, and I've attempted to move it into my iWeb root folder but still no success.
    A) Is this even possible?
    B) Can anyone walk me through how I can merge a Dreamweaver Spry Menu bar into an iWeb snippet?
    Many thanks if you can give this a quick whirl and see if its possible.

    Post-published pages do not show up in iWeb. iWeb is not an html editor that displays html pages, it generates html pages upon publish. So no. the page would not be visible in iWeb and anytime you made a change to your iWeb page you would need to publish the site, open the generated html page, and edit the html to add the spry menu.
    As you've mentioned you have already created the spry menu so you have the spry menu code. Do as I mentioned in the first post: create a text box with easy to find words, publish, open the html file, replace CODEGOESHERE with your spry menu code. Add linked js and css to head of iWeb-generated html page. An example of the code to replace with your spry menu code would look like this:
    <div>CODEGOESHERE</div>
    replace CODEGOESHERE with your spry menu code. Then in head add links to spry .js and css
    iWeb is a toy, dreamweaver is a professional tool used to develop prototypes of professional websites. You are looking for a bridge between the two which will become cumbersome. I recommend that you drop iWeb, learn html and css and use DW for your web development needs.

  • Spry menu bar questions

    http://www.wbmdesign.com/law/test.html
    http://www.wbmdesign.com/law/SpryAssets/
    If I wanted to apply a CSS transition (GRADUAL background color change) as the mouse is hovered over a tab, which class would I add that to? Currently it changes to a gradient white to gray color instantly.
    ul.MenuBarHorizontal
    ul.MenuBarActive
    ul.MenuBarHorizontal li
    ul.MenuBarHorizontal ul
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    ul.MenuBarHorizontal ul li
    ul.MenuBarHorizontal ul ul
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    ul.MenuBarHorizontal ul
    ul.MenuBarHorizontal a
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    ul.MenuBarHorizontal iframe
    ul.MenuBarHorizontal li.MenuBarItemIE
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu:hover {

    Have a look at
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
    <style>
    ul.MenuBarHorizontal a {
      transition: background-color 0.5s ease;
      background-color: red;
    ul.MenuBarHorizontal a:hover {
      background-color: green;
    </style>
    </head>
    <body>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
    <script src="SpryAssets/SpryMenuBar.js"></script>
    <script>
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Spry Menu Issues - Not functioning correctly in Microsoft IE

    Hi there,
    I am fairly new to web design and dreamweaver.
    I have constructed a simple page that I am happy with complete with Spry Menu which again I am happy with.  However this spry menu works perfectly in firefox but for some reason on IE my spry menu does not function correctly and goes all over my page!
    CORRECT VERTICAL MENU - FIREFOX -
    INCORRECT MENU FUNCTION! - IE -
    See my CSS Code below for the spry menu in questions - if this helps -
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* 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: 0;
        padding: 0;
        list-style-type: inherit;
        font-size: 100%;
        cursor: default;
        width: 1000px;
        height: 47px;
    /* 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: medium;
        position: relative;
        text-align: center;
        cursor: pointer;
        width: 318px;
        float: left;
        height: auto;
        background-color: #000000;
        border: 2px solid #FFF;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    /* 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: auto;
        cursor: default;
        width: auto;
        position: absolute;
        left: -1000em;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    /* 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: 318px;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 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: 0px;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 1px solid #FFFFFF;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #bcbdb9;
        padding: 0.5em 0.75em;
        color: #FFF;
        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: #000;
        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: #000;
        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;
        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: inherit;
        f\loat: left;
        background: #FFF;
    ** I am also using Windows 8 and Dreamweaver CS6 If this helps.**
    Any help with this would be fantastic as I need this to be resolved before the end of the week. 
    Any further information required please message me to find out.
    Thanks,
    Jamie

    THE CONFLICT IS BETWEEN YOUR DOCUMENT CSS AND THE SPRY CSS.
    It is because the <li> and <a> TAGS have been styled and therefore OVERRIDDEN THE SPRY CSS.
    Use CLASS TAGS e.g.  <li class="anyclass"> and <a class="anyclass">
    and STOP USING THE <a> TAGS.
    N.b. you may need to unstyle any <a> or other TAGS that conflict with the SPRY CSS.  (However it's best to start over knowing that styling basic tags may affect the SPRY CSS).

  • SPRY menu not dropping down on certain pages

    I'm having a lot of problems now that I've uploaded this webpage. I created this webpage in Dreamweaver and used the SPRY menu template and everything worked perfectly in Dreamweaver but now that I have uploaded it I can not use the drop downs on like 7 pages. When you are on the shop page, the dinning page, Living, Directions, Design, Events, and the contact page the SPRY menu will not drop down. Could someone look at my site and perhaps my code and tell me what I am doing wrong on those pages?
    http://discoverclearfield.com/shop.html
    http://discoverclearfield.com/dining.html
    there are a couple of the pages that don't work.
    Thanks so much.

    Have a look here and come back after you have fixed the markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdiscoverclearfield.com%2Fshop.htm l
    Gramps

  • How Do I Create an Editable Spry Menu as part of a Template?

    I am having considerable trouble trying to work out an issue and hope you can help. I have been working on a webpage that I would like to be a template for a fundraiser we are doing. I used a horizontal spry menu and a vertical spry menu. I have two youtube videos that I would like embedded on the page, but I would like the flexibility to change them for different pages. I am trying to make my horizontal and vertical spry menus editable since I am going to be making pages for all items in the menus. I can't seem to set this up correctly. Can you tell me what I am doing wrong? I have been able to set up editable regions according to my template file, however, when I open the template, I am unable to edit the spry menus or edit the youtube videos. Setting up editable regions also seems to change the look of my page.
    Here is what I would like all the pages to look like: http://www.ymimusic.com/shoppers_guide.html
    But this is how it looks presently when I try to make a page from the template I created following the instructions from the course: http://www.ymimusic.com/test.html
    Since I cannot get the template to work the way I would like, I have not created any links yet. I can send you the template and html page if this will help. Thank you for your help in advance./p>

    Murray,
    I am just opening your responses now. I will try to clarify again. "There's the rub.  This is not a wise choice.  A completely different  menu in each page will not only confuse your visitors, it will drive you  insane.  I strongly suggest you not do this." You were referring to "What throws us off the track is your wish to be able to have a different  menubar in each page. In that case the menubar will need to be in an  editable region."
    What I am simply trying to do is this: If I create a menu that has the following links: About Us, Products, and Contact Us on one page, I want my customers to see the SAME menu on the About Us page, the Products page and the Contact Us page. I am NOT creating different menus on each page. I am trying to automate the format by creating a template that will show these links on each page without me redoing it every page.
    When I attempted this, and created a page from the template, I could not get into the menu to assign links to different pages. Using the above example, If I created my About Us page as the template for the site, then created the Products page from the template, I need the ability to assign the links on the Products page to the About Us and Contact Us pages. The page created from the template does not allow me to do this. I cannot get in to assign the links in the Properties section of Dreamweaver. I even attempted to do the following action in the .dwt file I created:
    Modify > Templates > Make Attribute Editable
    I did this to make the links editable after creating the template. This obviously didn't work.
    To summarize: I do NOT want to make different menus on each page. I simply want to create the two menus you see (one horizontal and one vertical) that will be part of the template. I am trying figure out when I assign the links and How. I will go back and read your notes as well as read the help section (F1) as you requested, however that is why I contacted you; I did not understand what I was doing wrong. I have been working with a course series in Lynda.com that has explained much of what to do up to my problem spot, I simply need to understand the concept.
    Thank you for your assistance.

  • Spry Menu w/ templates or library items

    I LOVE the new spry menu, but I'm frustrated with how to
    insert an existing menu onto subsequent pages. I tried to add the
    menu to the library but that didn't seem to work. Should I use a
    template instead? I can't seem to find documentation on this...am I
    missing something? Any advice?

    Not sure what that is...tried to look it up in the help
    file...is it this?
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
    {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    If so, how do I attach it? Also, how do I edit once it's a
    library item? I seem to lose that lovely spry interface in the
    property manager.
    If there is any documentation that you could point me to I'd
    be grateful. I'm afraid I'm not finding it.

  • Add spry menu to external css or template

    I have a working navigation menu at www.reachyourpotential.ca
    but I haven't used an external style sheet on this website and that
    seems to be the thing to do these days. I used cs3 to add a spry
    horizontal menu to a template (standard cs3 2 column). Should I
    move the spry menu to an external style sheet?
    I believe the benefits of an external css are faster page
    loading speed and better seo.
    I am also revising a website for a client and want to get it
    right the first time.
    Which is better - add the spry menu to an external css or a
    template?
    Thank you.

    This may sound really dumb as no one ever addresses this
    issue, but once I create the Spry menu and then create all my other
    pages from the template, what if I need to change something in the
    menu? Since the href's are located in the HTML of the sheet itself,
    not in the .css or .js, how do you get to the point where you just
    change it one place and it changes everywhere?
    Does this make sense? What piece of the puzzle am I missing?
    Thanks for any assistance.

  • 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"><!--
    InstanceBegin
    > template="/Templates/Index.dwt"
    codeOutsideHTMLIsLocked="false" --><head>
    > <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    > <!-- InstanceBeginEditable name="doctitle" -->
    > <title>Mendoline | Home</title>
    > <!-- InstanceEndEditable -->
    > <style type="text/css">
    > <!--
    > body {
    > background-image: url(assets/images/confetti1.jpg);
    > }
    > -->
    > </style>
    > <!-- InstanceBeginEditable name="head" --><!--
    InstanceEndEditable -->
    > <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>
    > <!-- InstanceBeginEditable name="ContentHeading"
    -->Home<!--
    > InstanceEndEditable -->
    > </h1>
    > <!-- InstanceBeginEditable name="Content" -->
    > <p>This is the home page.</p>
    > <!-- InstanceEndEditable -->
    > </div>
    > </div>
    >
    > <script type="text/javascript">
    > <!--
    > var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
    > {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif",
    > imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    > //-->
    > </script>
    > </body>
    > <!-- InstanceEnd --></html>
    >

  • Spry Menu question #2: colors

    Hi again...
    I can't seem to get any settings to change colors to a Spry
    menu to anything other than the text.
    Even though the changes show in the CSS pallette, nothing
    changes the colors of the menu itself when viewed.
    Any thoughts?
    thx
    Andrew

    Have you read the comments within the css file - if you go
    through it
    carefully, it explains (not clearly enough in my opinion),
    what each rule
    does and what effect it has on the menu.
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    ~ Customisation Service Available ~
    http://www.csstemplates.com.au
    Spry Widget Examples
    http://www.dreamweaverresources.com/spry-widgets/
    "turner111" <[email protected]> wrote in
    message
    news:f3peab$t9b$[email protected]..
    > Well, for example, background color...

  • CS5 Spry Menu Question

    Aloha,
    I have the menu configured that way i want it, but for the life of me I cant figure out how to do the following.
    I have a menu   home, about, contact etc.........  The menu bar has two background images, one when you load the page and then the mouse over image. What i want to do is when your on the index.html page , the Menu link will be lite up in my case (blue)  and then if you go off of that page the blue will go to the current page that is up on your screen.
    I am not great with code, I have spent a few hours tring to figure it out, i have no idea if it can do that or not, but its prob super easy, I just dont know what setting i am looking for.
    2ns Question.. Is there a way to make the Spry menu to look like this?    HOME    |   ABOUT     |      ETC
    Right now i dont have the | in there, not sure if its possable
    Aloha!

    Thank you for posting your URL, this should be done as a matter of course.
    You do need to have SpryDOMUtils.js uploaded to your SpryAssets folder for the script to work.
    The following explains the working of the script
    function InitPage(){
    Spry.$$('#MenuBar1 li').forEach(function(node){ // check each li within a region with an ID of MenuBar1
        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){ // if the href is the same as the current window location e.g. index.html
            Spry.Utils.addClassName(node,"activeMenuItem"); // add a class called activeMenuItem
    As soon as a class is added, CSS will take care of the styling. In the case that I have suggested, the CSS merely changes the background colour. This could just as happily be a background image.
    If you want a different image for each menu item, then assign a class to the menu item as in
    <li><a href="index.html">Home</a></li>
    <li><a href="home-services.html" class="red">Home Services</a></li>
    <li><a href="business-services.html">Business Services</a></li>
    <li><a href="web-hosting.html">Web Hosting</a></li>
    <li><a href="online-backup.html">Online Backup</a></li>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    The style rule could then be
    .red .activeMenuItem {  background: url(home-button.png); }
    Cheers,
    Gramps

  • 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

  • Spry menu updating through template

    I've created a number of pages based on templates that I designed. The templates use a horizontal spry menu. Now I want to hook everything up. But when I update the spry menu in the template it has no affect on the template based pages. When I save the template with the changes, I get the dialog box asking me if I want to update all the pages based on the template. So I say yeah update all of the selected files. But it doesn't update them. What am I missing? I had some issues removing the mark of the web code from the template. I got a message saying that changes to the template would no longer appear on child pages (or something similar). Could this be my problem?

    Beth,
    Thanks for asking. I have a couple of display issues that deal with spry data sets and a flash photo gallery, but those I can't resolve until I actually publish the site and can verify that the problem exists when viewed live. That way I can also link to the problem so others can see the issue. Those are display issues. The other issue is also a display issue, but it's one that I need to solve before I can publish my site.
    I have started a discussion on this problem in the Dreamweaver forum, but since I still have the issue, I hope it's okay if I post here as well. The issue deals with a horizontal spry menu.
    I have a page that displays a youtube video. It sits under the horizontal menu. When you try to select something from the drop down menu, the menu appears behind the youtube video (the links are hidden) and can't be selected. Someone on the Dreamweaver site checked out the link I provided and said that they didn't have any problems using Firefox. But I still can't see the menu with IE8 or Safari. Here's the link:
    http://www.emiliocorsetti.com/publish/boot.html
    That same person on the Dreamweaver forum suggested that I put the video in a div and give it a z-index. I tried that, but I'm really not sure what value to enter. The menubar has several z-index values ranging from 1000 to 1020. So I've tried the following values 900, 980, 990, 1030, 1040. No luck.
    Emilio

Maybe you are looking for