Dreamweaver CS6 - Spry Menu for iPhone

Hi
Seems that spry menu in CS6 doesn't work on iphone/pad?
Can't open the submenu
Greetings
Philipp

@c-studio.eu
I have used all of the Spry framework, partially because they come free of charge with DW and partially because there are very strong components. All this despite their age.
The strongest of these are the various dataset variations (XML, HTML, JSON, CSV and YQL) and Spry validation widgets.
The weakest one is the menubar, mainly because it does not support touch screens, or conversely, touch screens do not have a hover event. Spry UI Menubar, also known as version 2.0, does have the ability to be used with touch screens, but because it is not integrated with DW, it is harder to modify once it has left the Widget Browser.
The original menubar can still be used for touch screens if it is single level, i.e. there are no sub-menus or when a submenu is used, the main menu item does not link to another page as in
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
    <li><a href="about.html">Our Company</a></li>
    <li><a href="history.html">Company History</a></li>
    <li><a href="mission.html">Mission Satement</a></li>
</ul>
</li>
The above will work in touch screen devices.
As David has suggested, no real effort has been made by Adobe to further develop the framework, giving a strong impression that they will not support it in future versions of DW. Much is the pity.
I tend to use jQuery substitutes, not because they are easier to use, but because they are free of charge and are kept up to date. Adobe has also invested in jQuery, particularly the mobile stuff.
As far as commercial alternatives are concerned, there are a number of well-formed widgets out there, one that is used by a number of prominent forum users. Other available widgets come from Webassist, DMXZone and CodeCanyon or if you Google the subject, your sure to find a few others.
And to join others who have shown their preference, lately I have been using Webassist's CSS Menu Writer, http://www.webassist.com/dreamweaver-extensions/css-menu-writer/
Gramps

Similar Messages

Dreamweaver CS5 Spry Menu problem;

Hi, I'm doing a web-site project for my Web Design class, and I ran into a problem. In Dreamweaver my spry menu only shows one part of the menu, but when I go to preview it, its perfectly normal. When I turned it into my teacher he sees the spry menu just like the one in Pic 2. I can't really upload it to a public domain/website because I can't at school. The way we see websites is by transfering folders into the teachers folders and click the index.html. Is there any way to fix this?
Code if needed:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kelsey's Page</title>
<style type="text/css">
body {
background-color: #EBF2FE;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td align="center"><img src="asdasdawe.jpg" width="907" height="331" /></td>
</tr>
<tr>
    <td width="100" align="center"><ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.htm">Home</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
        <ul>
          <li><a href="enterport1.html">Personal</a>            </li>
          <li><a href="enterport2.html">New PRHS</a>            </li>
          <li><a href="enterport3.html">Performance</a>            </li>
          <li><a href="enterport4.html">Teacher</a>            </li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Schedule</a>
        <ul>
          <li><a href="enterweb.html">Web Design</a>            </li>
          <li><a href="enterani.html">Animation</a></li>
          <li><a href="enterlatin.html">Latin 4</a></li>
          <li><a href="enterapush.html">APUSH</a></li>
        </ul>
      </li>
      <li><a href="derp.htm">Derp</a></li>
    </ul></td>
</tr>
<tr>
    <td align="center"> </td>
</tr>
<tr>
    <td> </td>
</tr>
<tr>
    <td><img src="bigpic2.jpg" width="910" height="510" /></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

We can't view or "fix" your teacher's folder.
Why not be a rebel, find yourself some free hosting,
upload all your files and post a link for us.

Spry menu for my phone.css and tablet.css?

I finished learning how to set up my media queries and during the process I changed the properties of my spry menu for my phone.css. I now realize that all my menu bars are the size that I did for my phone.css.
How can I get my phone.css and tablet.css to recognize different spry menu bars? I was thinking to place certain spry menu css information inside of the appropriate phone.css or tablet.css (in my case) then within my #navigation ID.
Does anyone see what trap I have set for myself?
This has come about when I started to make a current site viewable in a tablet and phone device. As I change the spry menu bar it changes all of my navigation.
Thanks in advance for the help.

So in other words are you saying to paste in my spry menu bar css code into let's say my phone.css?
current phone.css code:
<><>
@charset "utf-8";
@import url("SpryAssets/SpryMenuBarHorizontal.css");
body {
    text-align: center;
    background-color: #be7042;
#wrapper {
    height: 750px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    background-color: #006400;
    position: static;
#bottombanner {
    text-align: center;
    height: 192px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 25px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 8px;
    line-height: 2px;
    color: #FFF;
    position: static;
#ckimage {
    text-align: center;
    height: 145px;
    width: 75px;
    margin-top: 50px;
    margin-left: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#estriolimage {
    text-align: center;
    height: 75px;
    width: 56px;
    margin-top: 45px;
    margin-left: 26px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#maincopy {
    font-family: Verdana, Geneva, sans-serif;
    text-align: left;
    height: 350px;
    width: 200px;
    margin-top: -265px;
    margin-left: 115px;
    color: #FFF;
    font-size: 8px;
    position: static;
#navigation {
    text-align: center;
    height: 49px;
    width: 320px;
    margin-top: 1px;
    position: static;
#topbanner {
    text-align: center;
    height: 48px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    position: static;
><><
Would I paste my spry menu bar css code into my #navigation portion of my phone.css (I bolded the part where I think I would paste in my spry menu css.)

Dreamweaver cs6 insert menu

I want to know why is my dreamweaver cs6 insert menu diferent from the one shown on adobe tutorials?

Hi Marco,
There have been changes to the CC insert panel in the latest update. Check out this article
http://helpx.adobe.com/dreamweaver/using/changes-insert-options-creative-cloud.html
Thanks,
Preran

What replaces the CS6 spry menu bar in dreamweaver creative cloud 2014?

Hi,
Previously I used Dreamweaver CS6 and the spry menu bar widget (horizontal). I do not see this in Dreamweaver CC 2014. I am looking around in the Insert Panel (jQuery UI) but don't think a spry menu bar equivalent is listed.
Is there such an equivalent built into Dreamweaver CC 2014?

Basic CSS drop-menu
CSS Menu - JSFiddle
Advanced drop-menu with CSS gradients & transitions
CSS Horizontal Drop-Menu - JSFiddle
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Responsive Iconic
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
Responsive Hybrid
http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html
Nancy O.

Dreamweaver CS4 SPRY Menu Problems in IE

I am trying to have a drop-down menu on my site using the SPRY option in Dreamweaver CS4. In all browsers it looks exactly like it should. Unofrtunately in IE it pops out to the side instead of down. Anyone know a fix around this. The site is http://mtltechnologies.com/
Here is the SPRY CSS.
@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: 12px;
    cursor: default;
    width: auto;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* 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: 154px;
    float: left;
    height: 25px;
/* 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;
    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: 154px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 5px;
    color: #FFF;
    text-decoration: none;
    background-image: url(../images/button_bg.jpg);
    text-align: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    background-image: url(../images/button_bg_down.jpg);
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(../images/button_bg.jpg);
/* 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(../images/button_bg_down.jpg);
    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(../images/button_bg_down.jpg);
    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;
Anyone know a fix?
Thanks,

The code is too long. Let's do it this way, did you change anything on the default css of the SPRY menu?
just my thought, why don't you remove it from the table? That might be the cause. Try to think of an alternative way like using divs and css.

Dreamweaver Vertical Spry Menu Problem in IE7

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

I just finished setting up a vertical, 3-level spry menu in
Dreamweaver CS3, and when I preview it in IE7, several pixels have
been added in between the buttons, which spreads the menu out and
looks terrible. The problem disappears after I clear the ActiveX
warning, and it doesn't occur in FF. Could someone please tell me
how to fix this??
Here's my SpryMenuBarVertical.css file:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.8em;
cursor: default;
width: 150px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 150px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
background-image:url(../images/topnav-up-165.gif);
background:#FFFFFF;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #FFFFFF;
background-image:url(../images/topnav-up.gif);
padding: 0.3em 0.3em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #FFFFFF;
color: #333;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #FFFFFF;
color: #333;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/topnav-up.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #038203;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #666666;
border-top-width: 2px;
border-top-color: #FFFFFF;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #FFFFFF;
/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/topnav-dn.gif);
background-repeat: no-repeat;
background-position: 0% 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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

CS6 Spry Menu issue with iPads

I created a website using Dreamweaver CS6 and everything is working fine except that iPads are having an issue with the Spry menu. When they make a selection they can't select another menu option where it is another menu from the main tree or a submenu item.

Spry uses a hover event, something that touch screens do not understand. You could go into the JS and change the hover into a click event, but then you are still stuck with old and discarded technology. Have a look here http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l.
There are a number of alternatives to choose from. Just Google the subject.
Want to know what I use? Have a look here http://foundation.zurb.com/docs/components/topbar.html

Spry menu on iPhone

www.riflesinc.com
It has a drop-down for rifles. There is no 'rifles' page, just the drop down options(rifle models, in stock rifles, etc.).
I can't get the drop-down to work consistently on the iPhone (it works on a rare occassion).
Is the href=# causing the problem?
Any suggestions? Adding a 'rifles' page is the easiest option, but is there any other?

Nothing you can do to make the old Spry menu to work with mobile devices. I believe the only Spry option is Spry UI which is found in the Widget Browser for CS4/CS5-5.5.
Widget Browser - http://labs.adobe.com/technologies/widgetbrowser/
Spry UI Documentation - http://labs.adobe.com/technologies/spry/ui/
Or as an alternative, I would highly recommend Project Seven's Pop Menu Magic which does work with mobile devices.
http://www.projectseven.com/products/menusystems/pmm2/index.htm

How to make 1 spry menu for the entire site? but not on each page

i have a website that i wish to have multiple pages available all form the same menu and late and probably at regular intervals add more tabs to the menu
is there a way to create a spry menu speratley that the page some how references, something like a frameset but without using framesets?
im sort of new to webdesigning and unsure of the correct terminology, so i am finding it difficult to look up stuff that i don't know the name for, but will gladly go read someting if you point me in the right direction.
regards
for now
wayne

You can do this with PHP or ColdFusion
These are "server side" scripting languages so you will have to test your website after you upload to you web hosting account.
Or if you set up a local server. Without the local server you will get errors when you open them in firefox.
To use the following what you do is "Cut" the part you want to be on all pages out, "Paste" it into a seperate document and in its place on your page you put one of the following suitable tags.
You will also have to rename your main file to .php or .cfm as opposed to .html
Again, whatever page you put one of these tags on, their extention must change match the type of tag used.
First Method (PHP):
PHP is the more common method -
<?php @ require_once ("yourMenu.html"); ?>
Require_once is basically a safeguard so that you don't add the menu twice onto a page.
This will only work for PHP 4+
This method would work for older versions of php too -
<?php @ include("yourMenu.html"); ?>
Second Method (ColdFusion):
This will only work if your host has ColdFusion installled -
<cfinclude template="bla.html">
eg index.html
<html>
<head>
<title>Stuff</title>
<head>
<body>
<?php @ require_once("SpryMenu.html"); ?>
</body>
</html>
SpryMenu.html
<ul id="menubar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
            <li><a href="#">Item 1.1</a></li>
</ul>

Question about Spry menu for CS3

When I created a menu using Spry it inserted this code in my
template
<script type="text/javascript">

</script>
does the path ../SpryAssets/SpryMenuBarRightHover.gif
reference where the gif file is located in relationship to the
SpryMenuBar.js or is it suppose to be in relationship to the web
page?
I assume this is a value passed into the constructor of the
Javascript file.

This is a little ambitious, but it is doable with CSS floats. You'll need 2 menus. One floated left, one floated right and your logo image in the middle.
Floats & Margins tutorial:
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
More on floats:
http://css.maxdesign.com.au/floatutorial/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Dreamweaver cs5 .spry menu bar

Hola que tal a todos
necesito ayuda con esto. estoy haciendo una pagina en la cual me piden que tenga submenús , entonces utilize la spry bar y me quedo muy bien pero cuando lo subo al hosting , se ve muy mal, no se ve como deberia .
por que pasa eso ? como lo soluciono? existen otras opciones para hacer eso ?
gracias!

Hola Iris,
he intentado su código en un horizontal "Menú Spry", para usar su entretenimiento y que "menu.jpg". Se parece a esto:
        <td colspan="5" align="center" valign="top"><p><img src="menu.jpg" alt="" width="990" height="124" border="0" usemap="#Map" id="Image1" /></p>
          <ul id="MenuBar2" class="MenuBarHorizontal">
            <li><a class="MenuBarItemSubmenu" href="index.html">Inicio</a>
              <ul>
                <li><a href="#">Element 1.1</a></li>
                <li><a href="#">Element 1.2</a></li>
                <li><a href="#">Element 1.3</a></li>
              </ul>
            </li>
            <li><a href="nosotros.html">Nosotros</a></li>
            <li><a class="MenuBarItemSubmenu" href="#">Servicios</a>
              <ul>
                <li><a class="MenuBarItemSubmenu" href="#">Element 3.1</a>
                  <ul>
                    <li><a href="#">Element 3.1.1</a></li>
                    <li><a href="#">Element 3.1.2</a></li>
                  </ul>
                </li>
                <li><a href="#">Element 3.2</a></li>
                <li><a href="#">Element 3.3</a></li>
              </ul>
            </li>
            <li><a href="#">Experiencia</a></li>
            <li><a href="certificado.html">Certificado de Confiabilidad</a></li>
            <li><a href="#">Notcias</a></li>
<li><a href="contacto.html">Contacto</a></li>
          </ul>
DW también crea la siguiente línea:
    <td height="50" align="center" valign="top"><img src="abajo.png" width="990" height="50" /></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Todo esto se parece a esto (se debe usar "SpryMenuBarHorizontalPer.css" adaptadas de forma natural, incluso a sus propias necesidades):
Una pequeña nota de paso: Por varias razones, espacios y caracteres especiales en nombres de archivo o la imagen no está bien. Por favor, no: "AnÃ¡lisis de entorno social y situaciÃ³n patrimonial.html" pero en cambio, el uso de subrayado o de separación con letras mayúsculas.
Por ejemplo: "AnalisisDeEntornoSocialYSituacionPatrimonial.html"
Hans-Günter
Post Scriptum: Por favor, escriba en el foro por lo que también puede obtener consejos de otros voluntarios.

Dreamweaver CS6 Spry Tab Error Message

I have an ongoing website that i have been working on for some time.
It consists of mostly tabbed pannels.
Out of the blue it wont let me create another spry tabbed pannel... I get two pop up mesages
When I select "NO" the next screen pops up.
I have NO clue as to what it is trying to tell me or what to look for. Can anyone give a hand?
Thanks
Rick

Thanks for the reply Ben... The link is as follows:
http://pacificlaser.com/const.html
I am trying to add content (like all the others) to the Midrange Grade Lasers tab.
When I click the add spry tab panel, the above errors pop up.
Thanks for looking fellow SR

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Dreamweaver trouble with Spry Menu

It must be getting late, as I can't seem to get this to work.
I am experimenting with a spry menu for the school I work at.
The site I made earlier is www.wmes.ca
The school would like to have the site updated, so I figured I would do so by using a spry menu in place of the one I did in photoshop with the drop downs (see above link). Personally i liked this method and found it quite easy, however, it is now a depracated feature.
As said already, I am working with just a goofy template I've made to see if I can make the spry menu work on a site that is 760 px wide. The menu appears to work, but it is not 760 px long. Also, in IE, the drop down menus span horizontally on the page instead of vertically. I can't explain this either.
The last thing my tired eyes can't detect is the place to make the text on rollover bold.
The current site can be viewed at www.prestigeinteractive.com/wmems
I would appreciate a fresh set of eyes.
Thanks for your time,
Greg
files are attached

The Spry menu customisation tutorial that David wrote may be of help to you: (this takes you to the width customisation page - but start at the beginning to understand all the style rules that apply to the menu).
http://foundationphp.com/tutorials/sprymenu/customize3.php
You need to specify a width in three places, so that IE doesn't show the submenus horizontally instead of vertically - explained in the tutorial link above.

Dreamweaver CS6 - Spry Menu for iPhone

Similar Messages

Maybe you are looking for