Spry menu question

Hello....I've created a horizontal spry menu which seemed to
work fine until I saw it in an older version of Windows at a
friend's house. In that instance, the default link color of the
page, which is blue, crept into the spry menu link colors which are
white. The "visited" links in the spry menu are showing up blue.Is
there a way to define the visited/hover colors etc...in the spry
menu so it allstays white? This is the spry code I have now...
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
1.6 */
/* 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
width: 32.2em;
margin: auto;
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: 8.5pt;
position: relative;
text-align: center;
cursor: pointer;
width: 8m;
float: left;
font-family: "Trebuchet MS", Verdana, Arial;
color: #FFFFFF;
/* 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: 1;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 32.2em;
/* 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: default;
background-color: #D8161F;
color: #FFFFFF;
text-decoration: none;
padding-top: 0.2em;
padding-right: 0.7em;
padding-bottom: 0.2em;
padding-left: 0.7em;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FAFAFA;
/* 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: #e32032;
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: inline;
f\loat: left;
background: #FFF;

I can solve part of your problem. Check out The Essential
Guide to Dreamweaver CS3 by David Powers.
http://www.friendsofed.com/samples/1590598598.pdf.
All the other colors can be controlled by what is defined in David
Powers manual.
The problem that I have not been able to resolve is IE6 picks
up the colors, fonts, underline from a:active or the
default.

Similar Messages

  • 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

  • Simple spry menu question

    Hi
    I just need to know how to change the height of my spry menu.
    i did it once before but forgot how to. i think i've tried height
    on every SpryMenuBarHorizontal.css that is there there...
    Thanks

    Great thank you very much, added the code and its working
    now...
    Just one more question, hope this makes sense: I want to put
    the menu along a line that is the same color as the menu so i put
    to menu into a table and used a color background, is this the best
    way to do it? The problem i am having is that the table has this
    padding that i can't get rid of, i want it the same size as the
    menu, but i can make the table any smaller...
    Appreciate the help

  • Quick Spry Menu Question

    I am having CSS issues trying to center a basic horizontal spry menu inside a div tag.
    To keep it simple:
    I have a 990px wide x 40px high Div Tag for my mainNav menu.
    I created a quick horizontal menu using the spry widget... with 7 boxes.
    The menu of 7 boxes is currently left justified within the Div.  I want it to auto center within the Div.  I have tried changing almost every pre-CSS ID in the Spry horizontal menu using AUTO margins for the left and right and I can't get any of them to center then entire menu within the overall Div Tag.
    Please help.
    ul.MenuBarHorizontal.li is floated left so the boxes are side by side... but no matter which CSS ID I change the margins to auto on left and right nothing seems to work.
    Do I need to create a new CSS rule targeting something different to get the entire menu to center properly?
    Thanks for the help
    Tim

    Alter the spry css. If you declare a width of 700px and set margin: 0 auto; (as shown below) then each of your 7 links will be 100px wide and you'll have 145px either side. 990px - 700px = 290px /2 = 145px.
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 700px;
    margin: 0 auto;
    Updated: You should also set the below selector to 100px (or whatever you require. But obviously make sure the total width of all the links adds up to the width you set the above css selector to. In this case 700px). This determines the width of your links.
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 100px;
        float: left;

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

  • Dreamweaver "SPRY" Menu - Question on editing the CSS?

    Hi, I am using the "SPRY" menu in DW CS4
    In the CSS Styles panel there are a lot of "ul" (unordered lists) and "li" (lists) but I am unsure which ones to edit to get the changes I need below. If someone could give me some direction I would be very thankful.
    Here is the link to the website with the menu. http://www3.telus.net/~jessum/#
    How Do I ...
    1.Center the menu horizontally?
    2. Change the font style to a sans serif font?
    3. Move the menu's to the right so they're centered in the button?
    4. Add a different colored background images that will tile the width of the buttons?
    5. Change the width of the buttons?
    6. Add some "blank" buttons or empty spacers to the left and right of the menu buttons to fill up the with of the menu bar?

    Customizing Spry Menu Bar
    http://foundationphp.com/tutorials/sprymenu/customize1.php
    Centering a Horizontal Spry Menu
    http://foundationphp.com/tutorials/sprymenu/centering.php
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Adjusting arrow in my spry menu question...

    How do I adjust where my arrow is in the spry box?  There are so many functions I'm just plain confused. 

    Have you tried here for info?
    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
    Brad Lawryk
    Adobe Community Professional: Dreamweaver
    Northern British Columbia Adobe Usergroup: Manager
    Thompson Rivers University: Dreamweaver Instructor
    My Adobe Blog: http://blog.lawryk.com

  • 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 bar, simple question

    I have a spry menu bar that is working great with my HTML pages.  I would like to incorporate the same bar into my index.php page for my blog so that it can maintain the same look and feel. 
    <dumb question> Can this be done? </dumb question>.
    Thanks in advance for this newb question.
    MP

    Code from my sidebar.php file:
    <!DOCTYPE html><html dir="ltr" lang="en-US"><head>
    <meta charset="UTF-8">
    <title>Coconut Cove Pools | Tyler Texas Pool Builder</title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="stylesheet" type="text/css" media="all" href="http://localhost/coconutcove/blog/wp-content/themes/MP_twentyten/style.css">
    <link rel="pingback" href="http://localhost/coconutcove/blog/xmlrpc.php">
    <link rel="alternate" type="application/rss+xml" title="Coconut Cove Pools » Feed" href="http://localhost/coconutcove/blog/?feed=rss2">
    <link rel="alternate" type="application/rss+xml" title="Coconut Cove Pools » Comments Feed" href="http://localhost/coconutcove/blog/?feed=comments-rss2">
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/coconutcove/blog/xmlrpc.php?rsd">
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/coconutcove/blog/wp-includes/wlwmanifest.xml">
    <link rel="index" title="Coconut Cove Pools" href="http://localhost/coconutcove/blog">
    <meta name="generator" content="WordPress 3.0.1">
    <script src="/coconutcove/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="/coconutcove/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head><body class="home blog">
    <div id="wrapper" class="hfeed">
         <div id="header">
              <div id="masthead">
              <ul id="MenuBar1" class="MenuBarHorizontal">
                <li><a href="/coconutcove/index.html">Home</a>            </li>
                <li><a href="#" class="MenuBarItemSubmenu">Photos</a>
                  <ul>
                    <li><a href="/coconutcove/pool_spa.html">Pools/Spas</a></li>
                    <li><a href="/coconutcove/kitchen_fireplace.html">Kitchens/Fireplaces</a></li>
                  </ul>
                </li>
                <li><a href="/coconutcove/about.html" class="">About Us</a>            </li>
                <li><a href="/coconutcove/contact.html">Contact Us</a></li>
                <li><a href="/coconutcove/blog">Blog</a></li>
              </ul>
           </div><!-- #masthead -->
         </div><!-- #header -->
         <div id="main">
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/coconutcove/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/coconutcove/SpryAssets/SpryMenuBarRightHover.gif"});
        </script>
              <div id="container">
                   <div id="content" role="main">
                   <div id="post-16" class="post-16 post type-post hentry category-pools tag-east-texas-pool-builder tag-tyler-texas-pool-builder">
                   <h2 class="entry-title"><a href="http://localhost/coconutcove/blog/?p=16" title="Permalink to New video" rel="bookmark">New video</a></h2>
                   <div class="entry-meta">
                        <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/coconutcove/blog/?p=16" title="5:15 am" rel="bookmark"><span class="entry-date">October 20, 2010</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/coconutcove/blog/?author=1" title="View all posts by admin">admin</a></span>               </div><!-- .entry-meta -->
                        <div class="entry-content">
                        <p>I just got this video completed tonight.  It’s a test, just for some filler content.</p>
    <p></p><center><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/EYn8Zsa8fV4?fs=1&hl=en_US&rel=0"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/EYn8Zsa8fV4?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></object></center><p></p>
                                       </div><!-- .entry-content -->
                   <div class="entry-utility">
                                                 <span class="cat-links">
                                  <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/coconutcove/blog/?cat=3" title="View all posts in Pools" rel="category">Pools</a>                         </span>
                             <span class="meta-sep">|</span>
                                                                     <span class="tag-links">
                                  <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> <a href="http://localhost/coconutcove/blog/?tag=east-texas-pool-builder" rel="tag">East Texas Pool Builder</a>, <a href="http://localhost/coconutcove/blog/?tag=tyler-texas-pool-builder" rel="tag">Tyler Texas Pool Builder</a>                         </span>
                             <span class="meta-sep">|</span>
                                            <span class="comments-link"><a href="http://localhost/coconutcove/blog/?p=16#respond" title="Comment on New video">Leave a comment</a></span>
                                       </div><!-- .entry-utility -->
              </div><!-- #post-## -->
                   <div id="post-14" class="post-14 post type-post hentry category-uncategorized">
                   <h2 class="entry-title"><a href="http://localhost/coconutcove/blog/?p=14" title="Permalink to Just another quick post" rel="bookmark">Just another quick post</a></h2>
                   <div class="entry-meta">
                        <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/coconutcove/blog/?p=14" title="5:10 am" rel="bookmark"><span class="entry-date">October 20, 2010</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/coconutcove/blog/?author=1" title="View all posts by admin">admin</a></span>               </div><!-- .entry-meta -->
                        <div class="entry-content">
                        <p>Just a shout out to my friends on the Texas Rangers.  Way to steal two games in NY!!!</p>
                                       </div><!-- .entry-content -->
                   <div class="entry-utility">
                                                 <span class="cat-links">
                                  <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/coconutcove/blog/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>                         </span>
                             <span class="meta-sep">|</span>
                                                                <span class="comments-link"><a href="http://localhost/coconutcove/blog/?p=14#respond" title="Comment on Just another quick post">Leave a comment</a></span>
                                       </div><!-- .entry-utility -->
              </div><!-- #post-## -->
                   <div id="post-9" class="post-9 post type-post hentry category-uncategorized">
                   <h2 class="entry-title"><a href="http://localhost/coconutcove/blog/?p=9" title="Permalink to Here’s a pic" rel="bookmark">Here’s a pic</a></h2>
                   <div class="entry-meta">
                        <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/coconutcove/blog/?p=9" title="4:28 am" rel="bookmark"><span class="entry-date">October 20, 2010</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/coconutcove/blog/?author=1" title="View all posts by admin">admin</a></span>               </div><!-- .entry-meta -->
                        <div class="entry-content">
                        <p>Here’s a pic from the pool I was just talking about:</p>
    <p><a href="http://localhost/coconutcove/blog/wp-content/uploads/2010/10/MG_7337.jpg"><img class="aligncenter size-full wp-image-10" title="_MG_7337" src="http://localhost/coconutcove/blog/wp-content/uploads/2010/10/MG_7337.jpg" alt="Coconut Cove Pool, Tyler Texas" width="853" height="682"></a></p>
                                       </div><!-- .entry-content -->
                   <div class="entry-utility">
                                                 <span class="cat-links">
                                  <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/coconutcove/blog/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>                         </span>
                             <span class="meta-sep">|</span>
                                                                <span class="comments-link"><a href="http://localhost/coconutcove/blog/?p=9#respond" title="Comment on Here’s a pic">Leave a comment</a></span>
                                       </div><!-- .entry-utility -->
              </div><!-- #post-## -->
                   <div id="post-6" class="post-6 post type-post hentry category-uncategorized">
                   <h2 class="entry-title"><a href="http://localhost/coconutcove/blog/?p=6" title="Permalink to MM pool is looking good" rel="bookmark">MM pool is looking good</a></h2>
                   <div class="entry-meta">
                        <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/coconutcove/blog/?p=6" title="4:25 am" rel="bookmark"><span class="entry-date">October 20, 2010</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/coconutcove/blog/?author=1" title="View all posts by admin">admin</a></span>               </div><!-- .entry-meta -->
                        <div class="entry-content">
                        <p>Check it out, I put a video up on the new pool at mary margaret’s house.  It’s really coming along well.</p>
    <p>Here’s the link:  http://localhost/coconutcove/videos</p>
    <p>Please feel free to leave a comment on the video.</p>
                                       </div><!-- .entry-content -->
                   <div class="entry-utility">
                                                 <span class="cat-links">
                                  <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/coconutcove/blog/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>                         </span>
                             <span class="meta-sep">|</span>
                                                                <span class="comments-link"><a href="http://localhost/coconutcove/blog/?p=6#respond" title="Comment on MM pool is looking good">Leave a comment</a></span>
                                       </div><!-- .entry-utility -->
              </div><!-- #post-## -->
                   <div id="post-1" class="post-1 post type-post hentry category-uncategorized">
                   <h2 class="entry-title"><a href="http://localhost/coconutcove/blog/?p=1" title="Permalink to Hello world!" rel="bookmark">Hello world!</a></h2>
                   <div class="entry-meta">
                        <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://localhost/coconutcove/blog/?p=1" title="2:05 pm" rel="bookmark"><span class="entry-date">October 11, 2010</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://localhost/coconutcove/blog/?author=1" title="View all posts by admin">admin</a></span>               </div><!-- .entry-meta -->
                        <div class="entry-content">
                        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
                                       </div><!-- .entry-content -->
                   <div class="entry-utility">
                                                 <span class="cat-links">
                                  <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="http://localhost/coconutcove/blog/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>                         </span>
                             <span class="meta-sep">|</span>
                                                                <span class="comments-link"><a href="http://localhost/coconutcove/blog/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span>
                                       </div><!-- .entry-utility -->
              </div><!-- #post-## -->
                   </div><!-- #content -->
              </div><!-- #container -->
              <div id="primary" class="widget-area" role="complementary">
                   <ul class="xoxo">
                   <li><img src="/coconutcove/images/banners_logos/logo_coconut_cove_pools_150.jpg" width="150" height="150" alt="Coconut Cove Pools Logo"></li><p>
                </p><li id="search" class="widget-container widget_search">
                        <form role="search" method="get" id="searchform" action="http://localhost/coconutcove/blog/">
         <div><label class="screen-reader-text" for="s">Search for:</label>
         <input type="text" value="" name="s" id="s">
         <input type="submit" id="searchsubmit" value="Search">
         </div>
         </form>               </li>
                   <li id="archives" class="widget-container">
                        <h3 class="widget-title">Archives</h3>
                        <ul>
                                  <li><a href="http://localhost/coconutcove/blog/?m=201010" title="October 2010">October 2010</a></li>
                        </ul>
                   </li>
                   <li id="meta" class="widget-container">
                        <h3 class="widget-title">Meta</h3>
                        <ul>
                                                      <li><a href="http://localhost/coconutcove/blog/wp-login.php">Log in</a></li>
                                                 </ul>
                   </li>
                             </ul>
              </div><!-- #primary .widget-area -->
         </div><!-- #main -->
         <div id="footer" role="contentinfo">
              <div id="colophon">
                   <div id="site-info">
                        <a href="http://localhost/coconutcove/blog/" title="Coconut Cove Pools" rel="home">
                             Coconut Cove Pools                    </a>
                   </div><!-- #site-info -->
                   <div id="site-generator">
                                            <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">
                             Proudly powered by WordPress.                    </a>
                   </div><!-- #site-generator -->
              </div><!-- #colophon -->
         </div><!-- #footer -->
    </div><!-- #wrapper -->
    </body></html>

  • Question: My spry menu bar is not displaying correctly in Dreamweaver

    Hello,
    I am  new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
    I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
    I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
    Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
    @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: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        text-align: center;
    /* 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: 8em;
        float: left;
        left: 10;
        top: 10;
        height: 10;
    /* 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: 8.2em;
        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: 8.2em;
    /* 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;
        text-align: left;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #000;
        padding: 0.5em 0.75em;
        color: #FFF;
        text-decoration: none;
        font-family: Futura;
        float: 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: #C00;
        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: #C00;
        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%;
        text-align: center;
    /* 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: block;
        f\loat: left;
        background: #FFF;
    And here is what my SpryMenuBar.js coding looks like right now too:
    SpryMenuBar.js
    This file handles the JavaScript for Spry Menu Bar.  You should have no need
    to edit this file.  Some highlights of the MenuBar object is that timers are
    used to keep submenus from showing up until the user has hovered over the parent
    menu item for some time, as well as a timer for when they leave a submenu to keep
    showing that submenu until the timer fires.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.BrowserSniff = function()
        var b = navigator.appName.toString();
        var up = navigator.platform.toString();
        var ua = navigator.userAgent.toString();
        this.mozilla = this.ie = this.opera = this.safari = false;
        var re_opera = /Opera.([0-9\.]*)/i;
        var re_msie = /MSIE.([0-9\.]*)/i;
        var re_gecko = /gecko/i;
        var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
        var r = false;
        if ( (r = ua.match(re_opera))) {
            this.opera = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_msie))) {
            this.ie = true;
            this.version = parseFloat(r[1]);
        } else if ( (r = ua.match(re_safari))) {
            this.safari = true;
            this.version = parseFloat(r[2]);
        } else if (ua.match(re_gecko)) {
            var re_gecko_version = /rv:\s*([0-9\.]+)/i;
            r = ua.match(re_gecko_version);
            this.mozilla = true;
            this.version = parseFloat(r[1]);
        this.windows = this.mac = this.linux = false;
        this.Platform = ua.match(/windows/i) ? "windows" :
                        (ua.match(/linux/i) ? "linux" :
                        (ua.match(/mac/i) ? "mac" :
                        ua.match(/unix/i)? "unix" : "unknown"));
        this[this.Platform] = true;
        this.v = this.version;
        if (this.safari && this.mac && this.mozilla) {
            this.mozilla = false;
    Spry.is = new Spry.BrowserSniff();
    // Constructor for Menu Bar
    // element should be an ID of an unordered list (<ul> tag)
    // preloadImage1 and preloadImage2 are images for the rollover state of a menu
    Spry.Widget.MenuBar = function(element, opts)
        this.init(element, opts);
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
        this.element = this.getElement(element);
        // represents the current (sub)menu we are operating on
        this.currMenu = null;
        this.showDelay = 250;
        this.hideDelay = 600;
        if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
            // bail on older unsupported browsers
            return;
        // Fix IE6 CSS images flicker
        if (Spry.is.ie && Spry.is.version < 7){
            try {
                document.execCommand("BackgroundImageCache", false, true);
            } catch(err) {}
        this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
        this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
        this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
        this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
        this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
        this.hoverClass = 'MenuBarItemHover';
        this.subHoverClass = 'MenuBarItemSubmenuHover';
        this.subVisibleClass ='MenuBarSubmenuVisible';
        this.hasSubClass = 'MenuBarItemSubmenu';
        this.activeClass = 'MenuBarActive';
        this.isieClass = 'MenuBarItemIE';
        this.verticalClass = 'MenuBarVertical';
        this.horizontalClass = 'MenuBarHorizontal';
        this.enableKeyboardNavigation = true;
        this.hasFocus = false;
        // load hover images now
        if(opts)
            for(var k in opts)
                if (typeof this[k] == 'undefined')
                    var rollover = new Image;
                    rollover.src = opts[k];
            Spry.Widget.MenuBar.setOptions(this, opts);
        // safari doesn't support tabindex
        if (Spry.is.safari)
            this.enableKeyboardNavigation = false;
        if(this.element)
            this.currMenu = this.element;
            var items = this.element.getElementsByTagName('li');
            for(var i=0; i<items.length; i++)
                if (i > 0 && this.enableKeyboardNavigation)
                    items[i].getElementsByTagName('a')[0].tabIndex='-1';
                this.initialize(items[i], element);
                if(Spry.is.ie)
                    this.addClassName(items[i], this.isieClass);
                    items[i].style.position = "static";
            if (this.enableKeyboardNavigation)
                var self = this;
                this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
            if(Spry.is.ie)
                if(this.hasClassName(this.element, this.verticalClass))
                    this.element.style.position = "relative";
                var linkitems = this.element.getElementsByTagName('a');
                for(var i=0; i<linkitems.length; i++)
                    linkitems[i].style.position = "relative";
    Spry.Widget.MenuBar.KEY_ESC = 27;
    Spry.Widget.MenuBar.KEY_UP = 38;
    Spry.Widget.MenuBar.KEY_DOWN = 40;
    Spry.Widget.MenuBar.KEY_LEFT = 37;
    Spry.Widget.MenuBar.KEY_RIGHT = 39;
    Spry.Widget.MenuBar.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
        if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
            return false;
        return true;
    Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
        if (!ele || !className || this.hasClassName(ele, className))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
        if (!ele || !className || !this.hasClassName(ele, className))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    // addEventListener for Menu Bar
    // attach an event to a tag without creating obtrusive HTML code
    Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent('on' + eventType, handler);
        catch (e) {}
    // createIframeLayer for Menu Bar
    // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
    Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
        var layer = document.createElement('iframe');
        layer.tabIndex = '-1';
        layer.src = 'javascript:""';
        layer.frameBorder = '0';
        layer.scrolling = 'no';
        menu.parentNode.appendChild(layer);
        layer.style.left = menu.offsetLeft + 'px';
        layer.style.top = menu.offsetTop + 'px';
        layer.style.width = menu.offsetWidth + 'px';
        layer.style.height = menu.offsetHeight + 'px';
    // removeIframeLayer for Menu Bar
    // removes an IFRAME underneath a menu to reveal any form controls and ActiveX
    Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
        var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
        while(layers.length > 0)
            layers[0].parentNode.removeChild(layers[0]);
    // clearMenus for Menu Bar
    // root is the top level unordered list (<ul> tag)
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
        var menus = root.getElementsByTagName('ul');
        for(var i=0; i<menus.length; i++)
            this.hideSubmenu(menus[i]);
        this.removeClassName(this.element, this.activeClass);
    // bubbledTextEvent for Menu Bar
    // identify bubbled up text events in Safari so we can ignore them
    Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
        return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
    // showSubmenu for Menu Bar
    // set the proper CSS class on this menu to show it
    Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
        if(this.currMenu)
            this.clearMenus(this.currMenu);
            this.currMenu = null;
        if(menu)
            this.addClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
                if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
                    menu.style.top = menu.parentNode.offsetTop + 'px';
            if(Spry.is.ie && Spry.is.version < 7)
                this.createIframeLayer(menu);
        this.addClassName(this.element, this.activeClass);
    // hideSubmenu for Menu Bar
    // remove the proper CSS class on this menu to hide it
    Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
        if(menu)
            this.removeClassName(menu, this.subVisibleClass);
            if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
                menu.style.top = '';
                menu.style.left = '';
            if(Spry.is.ie && Spry.is.version < 7)
                this.removeIframeLayer(menu);
    // initialize for Menu Bar
    // create event listeners for the Menu Bar widget so we can properly
    // show and hide submenus
    Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
        var opentime, closetime;
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        if(menu)
            this.addClassName(link, this.hasSubClass);
        if(!Spry.is.ie)
            // define a simple function that comes standard in IE to determine
            // if a node is within another node
            listitem.contains = function(testNode)
                // this refers to the list item
                if(testNode == null)
                    return false;
                if(testNode == this)
                    return true;
                else
                    return this.contains(testNode.parentNode);
        // need to save this for scope further down
        var self = this;
        this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
        this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
        if (this.enableKeyboardNavigation)
            this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
            this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
    Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
        this.lastOpen = listitem.getElementsByTagName('a')[0];
        this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
        this.hasFocus = true;
    Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
        this.clearSelection(listitem);
    Spry.Widget.MenuBar.prototype.clearSelection = function(el){
        //search any intersection with the current open element
        if (!this.lastOpen)
            return;
        if (el)
            el = el.getElementsByTagName('a')[0];
            // check children
            var item = this.lastOpen;
            while (item != this.element)
                var tmp = el;
                while (tmp != this.element)
                    if (tmp == item)
                        return;
                    try{
                        tmp = tmp.parentNode;
                    }catch(err){break;}
                item = item.parentNode;
        var item = this.lastOpen;
        while (item != this.element)
            this.hideSubmenu(item.parentNode);
            var link = item.getElementsByTagName('a')[0];
            this.removeClassName(link, this.hoverClass);
            this.removeClassName(link, this.subHoverClass);
            item = item.parentNode;
        this.lastOpen = false;
    Spry.Widget.MenuBar.prototype.keyDown = function (e)
        if (!this.hasFocus)
            return;
        if (!this.lastOpen)
            this.hasFocus = false;
            return;
        var e = e|| event;
        var listitem = this.lastOpen.parentNode;
        var link = this.lastOpen;
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
        if (!opts[3])
            opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
        var found = 0;
        switch (e.keyCode){
            case this.upKeyCode:
                found = this.getElementForKey(opts, 'y', 1);
                break;
            case this.downKeyCode:
                found = this.getElementForKey(opts, 'y', -1);
                break;
            case this.leftKeyCode:
                found = this.getElementForKey(opts, 'x', 1);
                break;
            case this.rightKeyCode:
                found = this.getElementForKey(opts, 'x', -1);
                break;
            case this.escKeyCode:
            case 9:
                this.clearSelection();
                this.hasFocus = false;
            default: return;
        switch (found)
            case 0: return;
            case 1:
                //subopts
                this.mouseOver(listitem, e);
                break;
            case 2:
                //parent
                this.mouseOut(opts[2], e);
                break;
            case 3:
            case 4:
                // left - right
                this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
                break;
        var link = opts[found].getElementsByTagName('a')[0];
        if (opts[found].nodeName.toLowerCase() == 'ul')
            opts[found] = opts[found].getElementsByTagName('li')[0];
        this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        opts[found].getElementsByTagName('a')[0].focus();
            //stop further event handling by the browser
        return Spry.Widget.MenuBar.stopPropagation(e);
    Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if (this.enableKeyboardNavigation)
            this.clearSelection(listitem);
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        if (listitem.closetime)
            clearTimeout(listitem.closetime);
        if(this.currMenu == listitem)
            this.currMenu = null;
        // move the focus too
        if (this.hasFocus)
            link.focus();
        // show menu highlighting
        this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
        this.lastOpen = link;
        if(menu && !this.hasClassName(menu, this.subHoverClass))
            var self = this;
            listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
    Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
        var link = listitem.getElementsByTagName('a')[0];
        var submenus = listitem.getElementsByTagName('ul');
        var menu = (submenus.length > 0 ? submenus[0] : null);
        var hasSubMenu = (menu) ? true : false;
        if(this.bubbledTextEvent())
            // ignore bubbled text events
            return;
        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
            if (listitem.opentime)
                clearTimeout(listitem.opentime);
            this.currMenu = listitem;
            // remove menu highlighting
            this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
            if(menu)
                var self = this;
                listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
            if (this.hasFocus)
                link.blur();
    Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
        var child = element[sibling];
        while (child && child.nodeName.toLowerCase() !='li')
            child = child[sibling];
        return child;
    Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
        var found = 0;
        var rect = Spry.Widget.MenuBar.getPosition;
        var ref = rect(els[found]);
        var hideSubmenu = false;
        //make the subelement visible to compute the position
        if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
            els[1].style.visibility = 'hidden';
            this.showSubmenu(els[1]);
            hideSubmenu = true;
        var isVert = this.hasClassName(this.element, this.verticalClass);
        var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
        for (var i = 1; i < els.length; i++){
            //when navigating on the y axis in vertical menus, ignore children and parents
            if(prop=='y' && isVert && (i==1 || i==2))
                continue;
            //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
            if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
                continue;
            if (els[i])
                var tmp = rect(els[i]);
                if ( (dir * tmp[prop]) < (dir * ref[prop]))
                    ref = tmp;
                    found = i;
        // hide back the submenu
        if (els[1] && hideSubmenu){
            this.hideSubmenu(els[1]);
            els[1].style.visibility =  '';
        return found;
    Spry.Widget.MenuBar.camelize = function(str)
        if (str.indexOf('-') == -1){
            return str;   
        var oStringList = str.split('-');
        var isFirstEntry = true;
        var camelizedString = '';
        for(var i=0; i < oStringList.length; i++)
            if(oStringList[i].length>0)
                if(isFirstEntry)
                    camelizedString = oStringList[i];
                    isFirstEntry = false;
                else
                    var s = oStringList[i];
                    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
        return camelizedString;
    Spry.Widget.MenuBar.getStyleProp = function(element, prop)
        var value;
        try
            if (element.style)
                value = element.style[Spry.Widget.MenuBar.camelize(prop)];
            if (!value)
                if (document.defaultView && document.defaultView.getComputedStyle)
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(prop) : null;
                else if (element.currentStyle)
                        value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
        catch (e) {}
        return value == 'auto' ? null : value;
    Spry.Widget.MenuBar.getIntProp = function(element, prop)
        var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
        if (isNaN(a))
            return 0;
        return a;
    Spry.Widget.MenuBar.getPosition = function(el, doc)
        doc = doc || document;
        if (typeof(el) == 'string') {
            el = doc.getElementById(el);
        if (!el) {
            return false;
        if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
            //element must be visible to have a box
            return false;
        var ret = {x:0, y:0};
        var parent = null;
        var box;
        if (el.getBoundingClientRect) { // IE
            box = el.getBoundingClientRect();
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
            ret.x = box.left + scrollLeft;
            ret.y = box.top + scrollTop;
        } else if (doc.getBoxObjectFor) { // gecko
            box = doc.getBoxObjectFor(el);
            ret.x = box.x;
            ret.y = box.y;
        } else { // safari/opera
            ret.x = el.offsetLeft;
            ret.y = el.offsetTop;
            parent = el.offsetParent;
            if (parent != el) {
                while (parent) {
                    ret.x += parent.offsetLeft;
                    ret.y += parent.offsetTop;
                    parent = parent.offsetParent;
            // opera & (safari absolute) incorrectly account for body offsetTop
            if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
                ret.y -= doc.body.offsetTop;
        if (el.parentNode)
                parent = el.parentNode;
        else
            parent = null;
        if (parent.nodeName){
            var cas = parent.nodeName.toUpperCase();
            while (parent && cas != 'BODY' && cas != 'HTML') {
                cas = parent.nodeName.toUpperCase();
                ret.x -= parent.scrollLeft;
                ret.y -= parent.scrollTop;
                if (parent.parentNode)
                    parent = parent.parentNode;
                else
                    parent = null;
        return ret;
    Spry.Widget.MenuBar.stopPropagation = function(ev)
        if (ev.stopPropagation)
            ev.stopPropagation();
        else
            ev.cancelBubble = true;
        if (ev.preventDefault)
            ev.preventDefault();
        else
            ev.returnValue = false;
    Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    })(); // EndSpryComponent
    If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
    I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
    Thanks!

    I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
    I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
    I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
    Here is a picture of what it looks like:
    I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though.

  • 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 - Current Page question

    Hi
    I have a 2 level Spry Menu which is dynamically populated. (http://broke.brokefordwich.com.au)  I am able to add a class to the menu item for the current page. This works fine for the top level items and the second level items. However, I would like to have also highlight the top level menu item for which a second level page is current.
    Can Spry do that ? If so, I would appreciate some hints on how to go about it.

    Hey Ben !
    Thanks for the tip. I will think it thru.
    Isn't is amazing how someone else can have an idea that sparks off new ideas.
    The current page always has a class added to it. The trick is making the parent of a child page have a different class. However, your approach has given me something to think about. I think I have an idea on how to do this easily in PHP - ie: set a class on the parent of an active child. Earlier the first idea I had was an overkill.  Thanks again.
    Cheers from the Hunter.

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

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

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

Maybe you are looking for