Spry menu bar

Hello, I use dreamweaver 5.5 with horizonal spry menubar. On a PC, everything works fine, but on the Tablet, iPad, I can not for the submenus to show. touch main menu bar does nothing. All of the suggestions. I see the work of downs on other sites, I'm stumped. Thanks Frank

Spry was developed in 2006 long before the touchscreen devices. Spry is dead for 2012. There is no point in trying to re - write the code to work in iPhones and iPads. Simply replace your Spry widgets with something better.

Nancy O.

Tags: Dreamweaver

Similar Questions

Spry menu bar alternatives?

I use DW CS5.5. I understand that Spry is no longer supported and outdated architecture, so what are my options if I want to include drop-down menus on my site? I have never used the drop down menu option before, but now a need to do so. I was eager to try the Spry menu bar in DW CS5.5, until I discovered it is not recommended. I just want to find something that is easy to configure and professional. I'm not a coder by any stretch of the imagination, that's why I'm looking for something I can use and change via CSS, as you can do with Spry.
In CS5.5, there is a jQuery Mobile option in the Insert menu, but do not know how this would be related to what I am trying to accomplish. Thank you for advice or useful links.

Take a look at the seven project. There are a number of different menu options of guys who really know their business of script.

Chris

Dreamweaver CC: Layouts start CSS & missing of the Spry menu bar
- I preset web training and our client updated for Dreamweaver CS4 Dreamweaver CC 2015. That are the CSS Starter layouts in Dreamweaver, for example the column 2 fixed, header and footer layout? I don't find it in Dreamweaver CC 2015. It was a good starting point to teach students to create a web page using one of these start CSS page layouts and then customize.
- I also can't find the Spry menu bar to create a menu (up to three levels) bar.
- What is the best options for me to use instead the CSS starter layouts & the Spry menu bar? Students know nothing about web design when they start with the course.
It is more a spry menu bar, which was crap anyway. You can learn how to make a simple CSS - only menu or a menu jQuery.

The new version of DW includes a starter starter site, which is how many sites asre built these days. Bootstrap also contains a navigation pane.

change the spry menu bar

Just opened my page in the new Dreamweaver 20141. What happened to the easy edit function for the Spry menu bar? I'm sure he's here somewhere, I just can't find it. It was so easy in the previous version. It just appeared at the bottom of the screen when I clicked on the bar. Where is he now?

Never mind. I found it. Window > properties

Spry menu bar and Style sheets

Dreamweaver CS6:

I insert a Spry menu bar in a .dwt file model.
.dwt file seems functional in Live View mode and the Spry menu bar behaves as expected.   I save the .dwt file and then create a new .dwt file .html page.
The new .html page appears in Design view, but when I switch to Live View there is no visible style. Content is present, but it is as if the stylesheet has been turned off.   Both the general style of the page and the Spry menu bar are missing. Even when the page is downloaded.
The general page style sheet is in the folder of css and Spry worksheet menu bar is located in the SpryAssets folder.   The references in the page coding for style sheets look correct.
Advice appreciated please.

Ok. In your model, change this:

Index<p class="reply"> <p class="reply">to do this:</p> <p class="reply"></p> <p class="reply"><title>Index

And this:

to all this:

Save the model. Now try to generate a new page of the child.

Nancy O.

Spry menu bar is not properly displayed in Internet Explorer.

Hello. I just got a new computer at work, and so I had to reinstall Dreamweaver CS6. Now my spry menu bar I have in a model is all disfigured. Instead of "horizontal", it's categories listed vertically and with no style. I tried messing around with turn styles, but the problem is that the spry menu bar seems well in Dreamweaver. I can provide the code if necessary. Let me know how you want to display. Thank you very kindly in advance.

Hi Nancy,.

I thought about it. The error was in my site definition. I had a mistake in "web URL".
What can make a difference of two points.

Thank you.

How do I Center my spry menu bar? (to learn)

I have a simple Web page, I have a background (color) and a background image of the Center and a picture of the top banner. Then, I inserted a "Spry menu bar" but her sitting to the left of the page? IV been tried at the Center, I tried to put a < div align = "center" > all about all this, but nothing works. even if I switch to the design view and click on the menu bar and click on 'align'-> 'Center', but it still does not. can you please help me!

Link code in Green is placed just above of your

Code HTML of Jon added two places below red

The CSS of Jon code in blue could go in a block style above the tag

or it could be added to your stylesheet to distance
Hakisak wrote:

Hello thanks for the reply, sorry I couldn't respond sooner (I've been busy). but I'm still learning the creation of Internet sites, and I don't understand where to put this code, you said?

Dreamweaver has insert 'menu spry bar' that looks like this, but I'm still not sure how to Center?
- Point 1
  - Point 1.1
  - 1.2
  - Point 1.3
- Point 2
- Point 3
  - Point 3.1
    
    Point 3.1.1
    
    3.1.2
  - Point 3.2
  - Point 3.3
- Point 4

Spry menu bar change the mouse click

Hello...
I've created a Spry menu bar, and it works fine. But on phones and tablets the submenu does not work because it's a passage from the mouse, is it possible to change a mouse click?
Thank you!

I found this one and it's great for what I want

https://github.com/MartinBlackburn/responsive-NAV

Cannot change the color of hover in the Spry menu bar

I try to customize my horiztonal Spry menu bar and managed to almost I want, except the point State. It should be easy enough since I want all (top of page menus and submenu items) to go to the image background even when red flew over (as well as having the top red menu item when its submenu is open).
Currently I have while hovering to the correct color, with the exception of the top Menu of the page that contains submenus (even if their submenus are fine, but also high Menu with no submenus items).
I thought that I had put my finger where to change this in the CSS Spry, but something can be in conflict, since change it doesn't seem to work as it has in other menus, I tested it on that...
Here is the project of the site- http://beta.deltsig.com/
(Notice that the elements of the first menu 4 goes to red when hovered on)
Here's the section of the CSS where I think it should be - I can post more of it if necessary:
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: pointer;
Padding: 0.5em 0.75em;
color: #363837;
text-decoration: none;
background-image: url (.. / css/images/menu-graygradient.gif);
}
/ Components menu that have mouse over or focus have a red gradient background text.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}

Try to remove this CSS rule on line 124

UL. MenuBarHorizontal a.MenuBarItemSubmenu {}

background-image: url("..) ("/ css/images/menu-graygradient.gif");

}

Spry menu bar: can I make a tab NOT a link? The child just come off her?

Hi, I have DW CS3. I have a spry menu bar which I DO NOT have each tab to be a link to a page. I want to just fall down and show the links of the child. I.E. I have a link that says "Golf Tips", I don't want that is clickable. I just want that he dropped down to the submenus. 'fix my bracket', 'solve my crochet', etc.). Because it seems that each tab should have a link it requires me to create a page of destination which are licensed in the drop-down list coming out of the tab "golf tips". I tried to let the empty link area, but it won't let me. It pops up "Please insert a link."
Any way around this. Right now I have about 6 of them I need to fix, as landing pages are confusing and unnecessary. Either that or I'll have to get rid of the child and the links just do the landing page. Maybe that's the best option.
Thank you
Ken

If you don't want the link to go anywhere just use an empty anchor «#» You can't leave it empty because of how work meuns CSS. The 'a' tag in the CSS, it's what is used to trigger the drop-down menus, but using an empty anchor will ensure visitors won't go anywhere.

Spry menu bar does not not on Web site

Hey guys,.
I'm currently edit a Web site so that it has a large menus spry horizontal bar on the home page and once you go to other pages there is a small bar of menus spry as a header. For this I created for files .css, for the greater the file CSS is called sections and the css in the header of the smallest file is called SpryMenuBar1.css. I downloaded the current Spry folder on my remote server and a test html just to see if it works. For some reason but it does not work? In DW on Live View and preview in Chrome and IE work perfectly well for both the largest and most small Spry menu bar. Keep in mind that I'm working on a local server in DW. Test html code is http://www.soccerexperience.com/cover_flow_test.html. On this page, I've included the smaller Spry menu bar. I have not really tested yet my home page. Could you please help me shed some light on this problem? I'm pretty new to the website editing so if your answer could be clear would be great.
Thanks in advance

Your menu bar does not work because SpryMenuBar.js has not been uploaded to the server, or if it has, it's in the wrong place.

Spry menu bar does not refresh when published

I am building a webpage in dreamweaver, however a model.
for some reason, it won't change the spry menu bar to update changes made to the links on this subject.
that as well as the links do not work on the site (I downloaded on a test site).
I don't know if it's the same problem.
I changed the site to document links.
I also checked the codes http://validator.w3.org/check and http://jigsaw.w3.org/css-validator/ .
I also read that link, and it did not help me http://helpx.adobe.com/dreamweaver/kb/paths-dreamweaver-templates.html .
Can someone please!
Thank you

There are several problems I see immediately in this TEST file:

1. first of all, there is clearly a problem with your site definition for a number of your links is ill-formed.

("File:///" link should never happen - see the link corresponding to your second file)

also -.
On Jan Kardys

Resources
- Education connection

Model Spry menu bar links does not

I created a site that uses a spry menu bar located in a template file. The css seems to be fine. While the General links on the pages work, links contained in the spry menu bar works either in the preview or download. The pages are set up with apdiv of positioning. The menu bar of BPD is stacked above a picture or a video on the typical page. My site at http://designideation.com/index.html
As I have spent a lot of time trying to solve this problem, any help would be greatly appreciated.
-Thank you, DG

The problem is on the lines 68-83. A: active just to have the colors changed.

GRAMPS

Under unsorted list stuck Spry menu bar

I am completely new to Dreamweaver and try to use it to update an existing Web site. I exported the Web site files on my PC.
When I open a page in DW to edit, the Spry menu bar (which works with a horizontal drop down menu on the site) presents as an unordered list. If I saw it, the list remains, i.e. the menus re bar does not appear.
If I click on the button "turn off styles / we ', nothing happens.
I would be extremely grateful for any advice as to what I can do in order to get the page in DW with the operation of menu bar.
Thank you very much

I wish I knew what that meant... If it's something I have to do, then please explain in detail!

"I found this at the bottom of a page - is of the... / part of the... / SpryAssets/SpryMenuBarDownHover.gif" should also be deleted?

RegNet are...

Teeney little information coming out of my Spry menu bar

Hello all-
Grateful for the help to get rid of the gray background in the Spry menu bar to:
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thank you!
Ken D
Creative Director
grateful creative
www.gratefulcreative.com

Change the value of highlighteded

UL. MenuBarHorizontal {}

top of the margin: 15px;

list-style-type: none;

do-size: 100%;

cursor: default;

Width: 600px;

background-color: #161616;

float: right;

}

GRAMPS

Gap between the header and spry menu bar (school project)?

Hello I have a project for school and they want me to a dw premade layout html, with a header image, and a spry menu bar located in the header. Which I did, but there is this small gap between the header image and the spry menu bar and the header that I can't get rid of. There is no additional line break tag or paragraph in there, I have NO idea what is wrong, please help if you know. Thank you.
Joint below is code html and css. Sorry there all text in dw premade in there too. Basically, I have also attached the css external to the spry menu bar, and the page just in case.
<! DOCTYPE HTML >
< html >
< head >
< meta charset = "UTF-8" >
< title > Rapids Transit - Buffalo River Outfitters < /title >
< link href = "css/rapids_transit.css" rel = "stylesheet" type = "text/css" > "
< style type = "text/css" >
<!--
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
Background: # 42413;
margin: 0;
padding: 0;
Color: #000;
}
/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0; / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
color: # 42413.
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
color: #6E6C64;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
}
/ * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.
. Container {}
position: relative;
Width: 960px;
Background: #FFF;
margin: 0 auto; / * set to auto on the sides, coupled with the width, the layout centres * /.
}
/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background-color: #fff;
padding-right: 5px;
padding-left: 5px;
}
/ * ~ ~ It's layout information. ~~
(1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.
*/
. Happy {}
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
/ * ~ ~ Footer ~ ~ * /.
.footer {}
padding: 10px 0;
background: #CCC49F;
}
/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
->
< / style >
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "
< style type = "text/css" >
{#river_level}
position: absolute;
left: 500px;
top: 325px;
Width: 245px;
height: 80px;
z-index: 1;
background-color: #ffcc33;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: #960;
border-right-color: #960;
border-bottom-color: #960;
border-left-color: #960;
text-align: center;
do-family: Verdana, Geneva, without serif.
font-size: medium;
}
< / style >
< / head >
< body >
< div class = "container" >
< div class = "header" > < a href = "#" > < img src = "assets/rt_banner.jpg" alt = "Banner Rapids Transit" width = "950" height = "120" / > < / a > "
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "index.html" > home < /a > < /li >
< li > < a href = "guides.html" > our Guides < /a > < /li > ""
< li > < a href = "rates.html" > rates < /a > < /li > ""
< li > < a href = "lodging.html" > Lodging < /a > < /li > ""
< li > < a href = "before.html" > Before You Go < /a > < /li > ""
< /ul >
<! - end .header - > < / div >
< div class = "content" >
< p align = "left" class = "body_text" > welcome to rapid Transit. We are a rental service and canoe river guide located on the banks of the beautiful Buffalo River to Gilbert (Arkansas). We also offer kayak and raft rental. Our experienced guides will be pleased to offer trips on the river suitable for all levels - from beginner to expert. They will also be pleased to accompany you all the way! Stop at our country store and pick up your picnic supplies in the process of disappearance. We will even Pack it for you in airtight containers. (Just a precaution!) Call us to make your reservations. < /p >
< p align = "left" class = "contact_info" > Rapid Transit < br / >
Highway 55 North < br / >
Gilbert, Arkansas 75497 < br / >
(555) 365-5228 < br / >
< a href = "mailto: " [email protected] ' > Mike Andrew < /a > < /p > .
< h1 > < / h1 >
<! - end content - > < / div >
< div class = "footer" >
< p > < em > Copyright 2000 - 2012 < br / >
Last updated on
<!-#BeginDate format: Am1-10 April 2012 > <!-#EndDate->
You < /i > < / p >
<! - end .footer - > < / div >
<!-end .container-> < div id = "river_level" > current River Conditions: < br >
good floating today < br >
with a few spots of class II < / div > < / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
< /script >
< / body >
< / html >
-------------------------------------------------------
ALSO, HERE IS MY EXTERNAL STYLESHEET
{.body_text}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: normal;
}
{.paragraph_header}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: normal;
make-weight: bold;
color: #036;
}
{.contact_info}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: italic;
Color: #000;
}
-----------------------------------------------------
HERE'S MY SPRY MENU BAR CSS TOO
@charset "UTF-8";
/ * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
The AVAILABLE INFORMATION: Describes the box model, positioning, the order
*******************************************************************************/
/ * The outermost container for the menu bar, an area of width auto without margin or padding * /.
UL. MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 14px;
cursor: default;
Width: auto;
do-family: Arial, Helvetica, without serif.
}
/ * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */
UL. MenuBarActive
{
z-index: 1000;
}
/ * Menu item containers, position of children relative to this container and are a fixed width * /.
UL. MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
Width: 190px;
float: left;
height: 25px;
}
/ * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
UL. MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
z index: 1020;
cursor: default;
Width: 8.2em;
position: absolute;
left:-1000em;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
{
left: auto;
}
/ * Container of menu items are same fixed width parent * /.
UL. MenuBarHorizontal ul li
{
Width: 8.2em;
}
/ * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
UL. MenuBarHorizontal ul ul
{
position: absolute;
margin:-5% 0 0 95%;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #2E9712;
Padding: 0.5em 0.75em;
color: #fff;
text-decoration: none;
}
/ Components menu that have mouse over or focus have a blue background and white text * /.
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-color: # 33;
color: #FFF;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #3FA7A8;
color: ##ffffff;
}
/*******************************************************************************
Submenu INDICATION: styles if there is a submenu in a given category
*******************************************************************************/
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;
}
/*******************************************************************************
BROWSER HACKS: hacks below should not be changed, unless you are an expert
*******************************************************************************/
/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
UL. MenuBarHorizontal iframe
{
position: absolute;
z index: 1010;
Filter:alpha(opacity:0.1);
}
/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
@media screen, projection
{
UL. MenuBarHorizontal li. MenuBarItemIE
{
display: inline;
f\loat: left;
Background: #FFF;
}
}

Add the below css to your styes css selector:

. Header img {}

display: block;

}

Change your padded 30px high 'content' css selector and also include clear: both; (as shown below).

. Happy {}

padding-top: 30px;

padding-right: 0;

padding-bottom: 10px;

padding-left: 0;

Clear: both;

}

Spry menu bar

Similar Questions

Maybe you are looking for