Vertical spry menu bar 2.0 - orientation of submenus (left vs. right fly-out)

Hello:
I have a general question I would like to pose to anyone who has worked with the vertical spry 2.0 menu bar regarding the orientation of sub-menus (left vs. right flyout). In the previous version of the spry menu bar it was possible to to designate that the flyout sub-menus would appear to the left (as opposed to the right (normal or standard position) of the main level menu bar.
In reviewing the tutorials for the new version, and reviewing the settings for the widget I can't seem to see anything similar for the latest version of the spry menu bar. Does anyone now if this is possible? Does it require adjustments to the Javascript or can it be done directly from within the widget customization.
I realize that it isn't normal practice to pose questions in such general terms, however I thought I would try to determine if anyone has had experience in this regard before launching into the project.
Thanks in advance.
Steve Webster

OK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
Thanks for all your help, and I hope someone else benefits from my experiences as well.
Gail

Similar Messages

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

IE problems with vertical spry menu bar

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

Vertical Spry Menu Bars

For some reason, whenever I roll over my vertical spry menu bar, instead of it going to the side, the submenus open within the menu bar, blocking the other menu bar items. How do I make it go to the side?
Also, is there a way to make it so that the submenu items open within and underneath the menu item, but push the other menu items below it rather than going over it?
Thanks!

The online version of SpryMenuBar.js is still 1.4
Instead of uploading the file, let's try to latch onto the JS file that Adobe has online. This means that you need to change line 9, or thereabouts, from
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
to
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js" type="text/javascript"></script>
Then go down to lines 28-30 and remove these as they have already been loaded above.
To make the menu stretch the full width add the following style rule or change the existing rul to include the following
ul.MenuBarHorizontal li {
width: 16.666667%;
After you have done that we'll go on from there
Gramps

Vertical Spry menu bar--adjusting bottom submenu

I'm trying to adjust the last submenu on my vertical Spry menu bar. Originally, the submenu caused the page to either expand when I moused over the submenu (in IE), or the page would load with white space below the footer in order to accomodate the submenu when I mouse over it (in Firefox). The adjustment I want is to move the submenu up so that neither of those things happen. I've made the adjustment appear exactly how I want it to in Chrome and Safari, but IE, Firefox, and Opera now have the submenu placed halfway up the page. I can post the code if it's helpful, but I do not have the site hosted anywhere at the moment. The adjustment I made is in the Spry menu's css:
ul.MenuBarVertical ul#last
margin: -205% 0 0 95%;
Any help is appreciated. Thank you!
Sarah

Thanks for the reply. After changing the code to your suggestion, now the submenu loads approximately 80px below the last menu item in all browsers except IE. In IE, the submenu looks the way it did straight out of the box. Any other ideas to try?
Sarah

Vertical Spry Menu Bar not working in all browsers

Hi, everyone!
I'm hoping you'll help me troubleshoot something. I have a spry menu bar (vertical) that's expanding properly in IE but not in Firefox or other browsers. Here is the link:
http://midlochorus.org/
Thanks in advance for any help!
Karen

I'm pretty bummed not to receive any answers to this. Is there nobody who can help me?

Spry menu bar -- only one of the submenus of a drop down set works.

I created a spry drop-down menu bar for navigation within my site for a special event (on October 19). Most items have only one filie (e.g., tickets) but some of the items (e.g., Historic Homes) have up to 8 sub-items.
I renamed the spry file. I defined all my menu and sub menu items using the dialog box. I styled the bar for both basic state and "hover."
So far, so good.
I then created multiple new pages by using "Save As" (the original menu bar file)-- substituting appropriate text to to make the additional item and sub item files.
But when I link it all up and test it, only ONE of the submenus work. The menu disappears from the other sub menu pages when I navigate to them. Users can't get back to the original menu choices..
This is the first time with a Spry Menu bar.
Can you help?
Susan

Without seeing your code, I'm guessing your lists and sub-lists are not properly coded. Check your HTML & CSS with the validation tools below:
Code validation tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

Spry menu bar properties panel info compressed into left-hand corner

problem viewing spry menu bar properties panel information is condensed into the lefthand side of the panel, where it overlaps itself, becoming illegible and impossible to select

Ben, I think the Gary is referencing a DW interface problem, not a display issue on a web page.
It looks like the actual Properties window is corrupt.
Gary, if this worked in the past, you might try clearing the program cache...
http://forums.adobe.com/thread/494811
Resetting Preferences...
http://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver-cs4-cs5.html
Or the nuclear option, uninstalling, cleaning and reinstalling...
http://helpx.adobe.com/creative-suite/kb/cs5-cleaner-tool-installation-problems.html

Problems with Vertical Spry menu bar in Internet Explora

Hi I'm new to Dreamweaver,
I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
1. The text is left aligned and should be centered.
2. The menu bar has moved left
3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
Website address: http://www.greenwyse.co.uk/
I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
cheers
myquirk

Sorry, but your CSS is has been mangled beyound recognition.
The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
body {width: 960px;    margin: auto;}
.article {clear: both; margin: 20px;}
/* SPRY MENUBAR */
ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
ul.MenuBarVertical li {width: 29em; text-align: center;}
ul.MenuBarVertical a {background-color: transparent;}
</style>
</head>
<body>
<h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">100% Natural</a></li>
<li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
<li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a>      </li>
<li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a>    </li>
</ul>
<div class="article">
<p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
<p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
</div>

<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

Vertical Spry menu bar in IE

A colleague has developed a site with Dreamweaver. He has used Spry 1.6 with a vertical menu bar that incorporates two Collapsible Panels. The site works in every browser except the dreaded IE.
I have tweaked SpryMenuBarVertical.css but the site still does not display correctly.
http://www.educationpublishing.com/test/www/update/
Ideas would be gratefully received.

Have a look at the following, where I have re-hashed the markup/structure of the widgets and added an extra style rule.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryCollapsiblePanel.css" rel="stylesheet">
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
.CollapsiblePanelContent {
    overflow: hidden;
</style>
</head>
<body>
<div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
    <div class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">BY SUBJECT AREA</div>
        <div class="CollapsiblePanelContent">
        <ul id="MenuBar1" class="MenuBarVertical">
          <li><a class="MenuBarItemSubmenu" href="#">Basic Skills</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="#">Children's Services</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Further & Higher Education</a>
            <ul>
              <li><a href="#">Item 3.1</a></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>
    </div>
    </div>
    <div class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
    <div class="CollapsiblePanelContent">
       <ul id="MenuBar2" class="MenuBarVertical">
          <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>
</div>
    </div>
</div>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1", { contentIsOpen: false });
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Vertical Spry Menu Bar width adjustment

How do you add a separate class to the list of "CSS Styles"
and use/apply that class? I'm asking this question because I'm
trying to create a new class to adjust the individual widths of my
menu bars (to accommodate their separate sizes). Thanks for your
input.

Thanks for the reply. After changing the code to your suggestion, now the submenu loads approximately 80px below the last menu item in all browsers except IE. In IE, the submenu looks the way it did straight out of the box. Any other ideas to try?
Sarah

Vertical spry menu bar not expanding

Hi,
So here is the website I am working on. The menu bar is not expanding. It only needs to expand for the "Basic Concepts" tab.
http://mypage.iu.edu/~mgmodell/r547/reuse/
I know why I am having the problem because I tried a lot of the sprys out and when I deleted them not everything was cleared. But any help would be nice!

It looks like it is fixed
Gramps

Vertical Spry Menu Bar Problem with IE

My vertical_spry_menu works perfect in all browsers except Internet Explorer. I use DW CS3 and have installed Spry 1.6.1, applied the DW "Spry Updater" and uploaded the Spry Assets folder to my server and still negative results.
My website is www.defaultprevention.com. Any assistance would be appreciated.
Thank You

Line 76 says
<li><a class="MenuBarItemSubmenu" a href="http://ifap.ed.gov/ifap/helpContactInformationDetailedList.jsp?lsc=1" target="_blank">Servicers</a>
Line 97 says
<li><li><a href="http://student-loan-default.findthedata.org" class="dark"target="_blank">Compare Rates</a></li>
Remove the highlighted and you are up and running.
Gramps

Vertical Spry Menu Bar

I am unable to find the original code for the
VerticalMenuBar. Anybody able to help me??

I'm pretty bummed not to receive any answers to this. Is there nobody who can help me?

Spry Menu Bar Vertical Help

Hi,
Since the site isn’t online yet I posted my project for downloading. I am using Dreamweaver CS4.
For the website I am creating I would like to have a spry menu bar. I have been trying to figure this out but I can’t do it. The main file I am working with is named “theme_02_design.html” which is found in the Publish folder inside of In Play by Heather Ashley Inc. As you can see there is a left navigation area with 3 items listed (Home, Products, and Contact Us). I would like to change this into a vertical spry menu bar. Every time I try to do this the page is distorted in some way or another. I would like the menu on the left of the screen to look the same but with the vertical spry menu bar functions.
When someone visits the page I would like them to hover over the word products and have a submenu with multiple items.
It would look something like this...
Home
Products - submenu - Warm Up Series (I would insert a submenu here as well)
Contact Us                   Lace Up Hooded Sweatshirt
                                    Fleece Name Pants
                                    Shorts
                                    Accessories
                                    Shell Colors
                                    Trim Colors (I would insert a submenu here as well)
Can anyone help?
Thanks

I fiddled around with your file. I will attach the zip of your files.
Take a look at your page. I commented out your original navigation and added a Vertical Spry Menu Bar.
You will have to do some more adjusting, but I copied portions of your own CSS file into the Spry Menu Bar CSS.
See what you can do with it.
Beth

Vertical spry menu bar 2.0 - orientation of submenus (left vs. right fly-out)

Similar Messages

Maybe you are looking for