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.

Similar Messages

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

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.

Dreamweaver Spry menu bar focus state

How do I keep the link highlighted when I am on that page using the Spry menu bar feature in DreamWeaver CS5.5?
Thank you,
Denise

I understand what you are saying but do not have a clue how to implement this script. I am more on the designer end of things. I am comfortable editing CSS but this is a bit out of my radar. How do I make a separate SpryDOMUtils.js file?
What and where of this info do I copy into my html file?
Here are the pages I am trying to get this to work on. On this page I want the Dwell link on the left to be the orange color:
http://www.techart.com/staging/DavidBWeb/press/dwell.html
Thank you for your time.
Denise

DreamWeaver Spry Menu Help

OK! So im pretty good with Adobe DreamWeaver and have no problem creating or editing a Spry Menu. My issue is how to Edit a Spry Menu so that i can add or remove topics across multiple pages, without having to individualy edit each page.
I am looking to have a website of over 500 Pages and i want one Spry Menu bar that can be edited once, but changes the drop down options for all 500+ pages that. I will frequently want to update the Spry Menu.
If anyone here has any idea how i do that, please let me know, i have been searching google all day, with no luck.
Thanks

You would use a SSI file (Server Side Include)
The idea is that you create one file (containing all the spry menu coding) and then via the server side include the spry menu coding is inserted into all of the pages that you apply it to.
When you come to update the menu you just change the one file and upload that to your server instead of 500 pages.
Google 'server side include'

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
>

Effects not appearing in Dreamweaver Spry menu

Hi Folks,
I've installed the Spry updater in Dreamweaver CS3 then used
it to update the Spry assets. I selected all assets, including
effects. All were updated (some added for the first time) except
for effects. It does not appear in the Spry menu at all. Does
anybody know why effects might not be available on the Spry menu in
Dreamweaver even after being selected for update?

quote:
Originally posted by:
Donald Booth
Spry Effects are found in the Behaviors panel, in the Effects
category.
They are not in the Insert Panel because they aren't
'objects'.
I know it's hard to discover and rest assured we argued about
it a bit.
Hope this helps.
Don
Ah ha! That's it. (I can see why they belong there, of
course, but I sure didn't think to look there.
In case any other newbies are in the same boat, you not only
have to select Windows/Behaviors, which will bring up the Behavior
panel, you then need to select an element (like a div) to which you
want to apply the effect, click on the plus sign in the behaviors
panel, then select Effects from the list.
Thanks for the help, Don.

Dreamweaver Spry Menu Not Working Properly

Hello,
I'm putting a horizontal spry menu bar into a table cell (I haven't had the time to learn how to use divs yet and tables have been working fine for me). I have 6 items in the menu with 2 or3 drop down menus for each one. When I view it in live view, when I roll over the menu items, the whole bar drops down to the left side and becomes vertical. Why is this happening? It is shorter than the table cell so that shouldn't be the problem. Thank you for your help.

Okay, this is crude, but it's as far as I got. Only some of the buttons cause the menu to move down. Please keep in mind that I am a designer, not a programmer. I'm learning, but am very weak when it comes to coding knowledge. Thanks.
http://littlechisel.com/Ideal_Window/

Dreamweaver Spry Menu not working on I pad

Hi
I have built a website and currently have issues with the spry menu bar not working with the ipad i phones etc.
When you press the link the dropdown menu does not appear.
Any help would be greatly appreciated.
The website is www.jkwindowsanddoors.co.uk and the link is the products in the spry menu bar.
Many Thanks

The Spry menu system was created prior to the advance of touch screens. The action that causes the Spry sub-menu to appear is the hover event, an event that does not exist in touch screen technology.
What I am trying to say is that the Spry menu system cannot be used for touch screens. You are better off using pure CSS menus or jQuery menus.

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.

PHP and Dreamweaver Spry Menu

I have been searching for help with this - I have been getting an "internal error" message when I submit the form. I was having an issue with it working but not receiving anything... so I changed the php code and now it's taking me to an error page. Need this fixed soon.... I just went to a networking meeting... please help.
I've been reading other people's posts and I just don't know enough about php to know what to change. I know how to write HTML/XHTML and CSS but with the form, obviously that's going to be harder.
I've pasted both pages below - if anyone can take a look and let me know. Thank you!
- C
The Confirmation Page: (what's supposed to be there instead of the internal error.)
<?php
if(isset($_POST['email'])) {
$email_to = "[email protected]";
$email_subject = "Caity_FitzGerald_Designs_Contact_Form";
$message=
"Customer: ".$_POST['name'] . "\r\n" . "\r\n" .
"\r\n" .
"Email: ".$_POST['email'] . "\r\n" . "\r\n" .
"Phonenumber: ".$_POST['phonenumber'] . "\r\n" .
"BusinessName: ".$_POST['bizname'] . "\r\n" .
"\r\n" .
"Howtheyfound me: ".$_POST['referral'] . "\r\n" . "\r\n" .
"Location: ".$_POST['location'] . "\r\n" . "\r\n" .
"\r\n" .
"Servicesinterested: ".$_POST['wantedservices'] . "\r\n" .
$_POST['clientrequest']; $from=$_POST['email'];
$headers="From:$from" . "\r\n";
mail($to.$subject,$message,$headers);
?>
<!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>Caitlin FitzGerald Designs</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

</head>
<body>
<div class="container">
<div class="header"><a href="index.htm"><img src="images/Caitlin-FitzGerald-Designs.png" alt="logo" width="508" height="298" class="imgcentered" /></a>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.htm">Home</a></li>
<li><a href="portfolio.htm">Portfolio</a></li>
<li><a href="services.htm">Services</a> </li>
<li><a href="contact.htm">Contact</a></li>
</ul></div>
</div>
<div class="content">
<p><img src="pics/surfboard-cutout.png" width="1000" height="750" alt="thanks" /></p>


<div class="footer">
<table width="26%" border="0" align="center" cellpadding="2" summary="Find us on these social networks and connect with us.">
<tr>
<td width="17%"><a href="https://www.facebook.com/CFitzDesigns" target="_blank"><img src="pics/facebook.png" width="42" height="42" alt="facebook" /></a></td>
<td width="17%"><a href="http://www.linkedin.com/in/caityfitzgerald" target="_blank"><img src="pics/linkedin.png" width="42" height="42" alt="facebook" /></a></td>
<td width="18%"><a href="https://twitter.com/FitzGeraldCaity" target="_blank"><img src="pics/twitterbird.png" width="43" height="42" alt="twitter" /></a></td>
<td width="20%"><a href="http://pinterest.com/caitlindesigns/" target="_blank"><img src="pics/pinterest.png" width="44" height="44" alt="pinterest" /></a></td>
<td width="20%"><a href="http://www.behance.net/Cfitz" target="_blank"><img src="pics/behance.jpg" width="44" height="43" alt="behance" /></a></td>
<td><a href="http://bit.ly/12l8tfu" target="_blank"><img src="img/g+.png" width="39" height="39" alt="google+" /></a></td>
</tr>
<tr>
<td colspan="6"> <div align="center">
<p>Caitlin FitzGerald Designs<br />
2013© All rights reserved </p>
</div></td>
</tr>
</table>
<p></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The Contact Form:
<!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>Caitlin FitzGerald Designs - Contact Me</title>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

</head>
<body>
<div class="container">
<div class="header"><a href="index.htm"><img src="images/Caitlin-FitzGerald-Designs.png" width="508" height="298" class="imgcentered" /></a>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.htm">Home</a>      </li>
      <li><a href="portfolio.htm">Portfolio</a></li>
      <li><a href="services.htm">Services</a>      </li>
      <li><a href="contact.htm">Contact</a></li>
      <p> </p>
    </ul>
</div>
<div class="content">
     <table border="0" cellspacing="5" cellpadding="0" width="100%">
      <tr>
        <td valign="top"><h1><strong>Contact</strong></h1></td>
      </tr>
      <tr>
        <td valign="top"><p>To contact me you can: call 805.291.1358 or <a href="mailto:caity@caitydesignedthat.com" target="_blank">email me.</a> </p>
        <p>You can also fill out the form below and I will contact you.</td>
      </tr>
    </table>
      <form action="email_form.php" method="post" name="clientrequest" target="_blank" id="clientrequest">
      <p><span id="namefield">
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" tabindex="1" />
      <span class="textfieldRequiredMsg">Please enter your name.</span></span><br /><span id="spryemail">
      <label for="email">Email:</label>
      <input type="text" name="email" id="email" tabindex="2" />
      <span class="textfieldRequiredMsg">An email address is required.</span><span class="textfieldInvalidFormatMsg">Please enter a valid email address.</span></span><br />
      <span id="sprytextfield7">
      <label for="phonenumber">Phone Number:</label>
      <input type="text" name="phonenumber" id="phonenumber" tabindex="3" />
</span><br />
Business Name<span id="biznamespry">
      <label for="bizname">:</label>
      <input type="text" name="bizname" id="bizname" tabindex="4" />
</span>
<br />
<span id="sprytextfield5">
<label for="referral">How did you hear about me?</label>
<input type="text" name="referral" id="referral" tabindex="6" />
</span><br />
<span id="sprytextfield6">
<label for="location">Where do you live?</label>
<input type="text" name="location" id="location" tabindex="7" />
<span class="textfieldRequiredMsg">Please tell us where you live.<br />
<input type="text" name="textfield" id="textfield" />
</span></span><br />
<br />
<span id="describespry">
<label for="wantedservices">What services are you interested in?<br />
</label>
<textarea name="wantedservices" id="wantedservices" cols="45" rows="5" tabindex="7"></textarea>
<span id="countdescribespry"> </span><span class="textareaRequiredMsg"><br />
    Please fill in a description.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span><br />
      </p>
      </fieldset>
      <input type="submit" name="Send" id="Send" value="Send" tabindex="9" />
      <input type="reset" name="clear" id="clear" value="Clear Form" tabindex="10" />
    </form>
<p> </p>
    <p><a href="https://www.sitelock.com/verify.php?site=www.caitydesignedthat.com" onclick="window.open('https://www.sitelock.com/verify.php?site=www.caitydesignedthat.com','SiteLock','width=600, height=600,left=160,top=170');return false;" ><img alt="malware removal and website security" title="SiteLock" src="http://shield.sitelock.com/sshield/www.caitydesignedthat.comhttp://shield.sitelock.com/sshield/www.caitydesignedthat.com"/></a><br />
</p>
<div id="sitelock_shield_logo" class="fixed_btm" style="bottom:0;position:fixed;_position:absolute;right:0;">
    <p> </p>
<p> </p>
</div>
    <script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryemail", "email", {validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("namefield", "none", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("biznamespry", "none", {isRequired:false});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("describespry", {maxChars:1000, counterType:"chars_remaining", counterId:"countdescribespry", isRequired:false});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {isRequired:false});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {isRequired:false});
var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "none", {isRequired:false});
    </script>


<div class="footer">
    <table width="26%" border="0" align="center" cellpadding="2" summary="Find us on these social networks and connect with us.">
      <tr>
        <td width="17%"><a href="https://www.facebook.com/CFitzDesigns" target="_blank"><img src="pics/facebook.png" width="42" height="42" alt="facebook" /></a></td>
        <td width="17%"><a href="http://www.linkedin.com/in/caityfitzgerald" target="_blank"><img src="pics/linkedin.png" width="42" height="42" alt="facebook" /></a></td>
        <td width="18%"><a href="https://twitter.com/FitzGeraldCaity" target="_blank"><img src="pics/twitterbird.png" width="43" height="42" alt="twitter" /></a></td>
        <td width="20%"><a href="http://pinterest.com/caitlindesigns/" target="_blank"><img src="pics/pinterest.png" width="44" height="44" alt="pinterest" /></a></td>
        <td width="20%"><a href="http://www.behance.net/Cfitz" target="_blank"><img src="pics/behance.jpg" width="44" height="43" alt="behance" /></a></td>
              <td><a href="http://bit.ly/12l8tfu" target="_blank"><img src="img/g+.png" width="39" height="39" alt="google+" /></a></td>
      </tr>
      <tr>
        <td colspan="6"> <div align="center">
          <p>Caitlin FitzGerald Designs<br />
           2013© All rights reserved </p>
        </div></td>
      </tr>
    </table>
    <p></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
I used a self-made template for both pages (as you'll see in the comments... but I don't think that should affect it..) None of the other pages have been having issues.

Where is the closing bracket????
<?php
if(isset($_POST['email'])) { //NO CLOSING BRACKET
$email_to = "[email protected]";
$email_subject = "Caity_FitzGerald_Designs_Contact_Form";
$message=
"Customer: ".$_POST['name'] . "\r\n" . "\r\n" .
"\r\n" .
"Email: ".$_POST['email'] . "\r\n" . "\r\n" .
"Phonenumber: ".$_POST['phonenumber'] . "\r\n" .
"BusinessName: ".$_POST['bizname'] . "\r\n" .
"\r\n" .
"Howtheyfound me: ".$_POST['referral'] . "\r\n" . "\r\n" .
"Location: ".$_POST['location'] . "\r\n" . "\r\n" .
"\r\n" .
"Servicesinterested: ".$_POST['wantedservices'] . "\r\n" .
$_POST['clientrequest']; $from=$_POST['email'];
$headers="From:$from" . "\r\n";
mail($to.$subject,$message,$headers);
?>

Spry menu bar questions

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

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

Spry Menu Issues - Not functioning correctly in Microsoft IE

Hi there,
I am fairly new to web design and dreamweaver.
I have constructed a simple page that I am happy with complete with Spry Menu which again I am happy with. However this spry menu works perfectly in firefox but for some reason on IE my spry menu does not function correctly and goes all over my page!
CORRECT VERTICAL MENU - FIREFOX -
INCORRECT MENU FUNCTION! - IE -
See my CSS Code below for the spry menu in questions - if this helps -
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: inherit;
    font-size: 100%;
    cursor: default;
    width: 1000px;
    height: 47px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: medium;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 318px;
    float: left;
    height: auto;
    background-color: #000000;
    border: 2px solid #FFF;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: auto;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 318px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0px;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #FFFFFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #bcbdb9;
    padding: 0.5em 0.75em;
    color: #FFF;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #000;
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #000;
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inherit;
    f\loat: left;
    background: #FFF;
** I am also using Windows 8 and Dreamweaver CS6 If this helps.**
Any help with this would be fantastic as I need this to be resolved before the end of the week.
Any further information required please message me to find out.
Thanks,
Jamie

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

Spry menu how to different hover background for submenu options??

Hi
CS4 dreamweaver, Spry menu.
I am trying to design a spry horizontal menu such that the main menu bar boxes accross the top all share a background image and a hover image.
I would like all the boxes in the dropdown area to share a diferent background and hover image.
My problem is in the hover styles. In particular, when the main menu bar accross the top has an option that is not a submenu.
The target css rule is "ul.MenuBarHorizontal a:hover" and is used for any link that resides on the menu bar as well as for links that reside in the dropdown area. I wish to distinguish (via background image, and background hover image) the two types of buttons.
The other challenge is that my menu is dynamic and is using a spry dataset to drive it.
I guess i need a "ul.MenuBarHorizontal ul li a:hover" or something like that.
I hope that i am explaining myself.
Anyone run into this?
Thanks
Jerry C

Hi - I just read
The other challenge is that my menu is dynamic and is using a spry dataset to drive it.
Some time back I did the same for a number of websites - and then realised that search engines dont read the data. ie - the links and they could not be followed since they needed to be generated on the fly in the browser.. So as a result, Google was not going thru my nav menu links.
I then changed to another method (PHP / MySql) for my dynamic menus.
My menu system has some extra CSS to style the subnavs and the currently selected page.
Just my 2bobs worth. Hope it is of some use..

Multi-Color Spry Menu Bar

I want to create a multi-color spry menu bar by hand like the one on this page:
http://projectseven.com/products/menusystems/pmm2/multicolor.htm
Any tips?
Thx.

For those interested, I found a simple solution at Jim Cook's website, DWcourse.com:
The best thing to do would be to create a new style class, say “oddball” and apply it to the odd link like this:
<a href="#" class="oddball">Item 2</a>
Then create a new style in your style sheet named ul.MenuBarHorizontal a.oddball:hover and apply your hover formatting there. At the same time you might as well avoid the inline style (it’s better to avoid them if you can) and create a new style, ul.MenuBarHorizontal a.oddball to handle the normal state of the odd menu item.
You can read the entire thread here: http://dwcourse.com/dreamweaver/spry-menu-bars.php
Thanks.

Dreamweaver / Spry Menu / iWeb question

Similar Messages

Maybe you are looking for