Combining hor and vert spry menus

Hi,
My client wants to have their horizontal nav menu display the
drop down choices horizontally like the
http://www.businessweek.com/
Can this be done with a spry menu widget?
(shouldn't have to add this but...) If so, how?
Thanks,
J

B_Nemo wrote:
> A little history... I am new to DW (CS3) and am trying
to teach myself. I
> have built a couple sites prior so I know just enough to
be dangerous... :)
Obviously not enough to know that each frame in a frameset is
a separate
window. You cannot make the content of one frame display over
the
content of another. It's one of the many disadvantages of
frames.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Similar Messages

Double vertical spry menus and IE8

I am trying to use two vertical spry menus on one page. This works in Chrome and Firefox, but the fly outs will not work in IE8. I am using Dreamweaver CS4, Operating System is XP Pro. Is there a fix for this issue? Bushmom

I am trying to use two vertical spry menus on one page. This works in Chrome and Firefox, but the fly outs will not work in IE8. I am using Dreamweaver CS4, Operating System is XP Pro. Is there a fix for this issue? Bushmom

Accessibility for spry menus and tabs?

How do you activate key navigation for accessibility for spry menus and tabs? What needs to be done in order to use menu for persons with screen readers to tab through?

Have a look here http://labs.adobe.com/technologies/spry/articles/data_api/apis/menubar.html inparticular the section on Constructor Options.
I hope this helps.
Ben

Trouble with Spry menus in Firefox and Chrome

I am working on a site for my library and the spry menu drop downs are working well in Internet Explorer, but are not working at all in Chrome or Firefox. I have been trying to figure this out, but I am at a loss. I am using Dreamweaver CS5. Please let me know if you have any insight. I seem to be doing well with it aside from this problem!
Here is the site in its current state. The only active drop down is under ABOUT in HISTORY.
http://mysite.pratt.edu/~jdekoff
Here is the css as it stands.
@charset "utf-8";
/* CSS Document */
#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow:hidden;
background-color: #6699CC;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000
#banner {
font-size: 18px;
color: #000;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
border: medium double #000;
#menu_bar {
position: absolute;
padding-top: 5px;
#current_info {
padding-top: 40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
#left_column, #center_column, #right_column {
width: 316px;
float: left;
font-size: 14px;
font-weight: normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#center_column, #right_column {
margin-left: 10px;
#bottom_nav {
text-align: center;
font-size: small;

Remove position: relative; and all is well
#current_info {
    padding-top: 40px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;

How do I get rid of the white space between my header and my spry navigation bar?

I have been grappling with a problem for the past 2 days and cannot seem to work my way around it. I have been working on a page in dreamweaver cs4 that seems to have whitespace between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari show it correctly. Could you steer me in the right direction for getting rid of that space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here is my code and thanks in advance for your help:
<!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>Untitled Document</title>
<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 3.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 3.swf" width="1000" height="250">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="#">Lunch</a></li>
          <li><a href="#">Dinner</a></li>
          <li><a href="#">Cocktail</a></li>
          <li><a href="#">Take Out</a></li>
        </ul>
      </li>
      <li><a href="#">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="#">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Directions</a></li>
    </ul>
</div>
<div id="maincontentlayout3">Content for id "maincontentlayout3" Goes Here</div>
<div id="specials"><img src="png-gif-jpg/Tuesday Night Banner.jpg" width="200" height="70" alt="Margarita's Tuesday Night Special" /><img src="png-gif-jpg/Wednesday Banner.jpg" width="200" height="70" alt="Wednesday 2 for 1 dinner special at Margarita's" /><img src="png-gif-jpg/Thursday Banner.jpg" width="200" height="70" alt="Ladie's Night Thursdays at Margarita's Cafe" /><img src="png-gif-jpg/Friday Banner.jpg" width="200" height="70" alt="TGIF Happy Hour on Friday's at Margarita's Cafe" /><img src="png-gif-jpg/Sunday Banner.jpg" width="200" height="70" alt="Sunday Kids Eat Free at Margarita's Cafe!" /></div>
<div id="footer"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /> <img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

CSS:
#navigation {margin-top: -3px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Is there an easy way to replace spry menus with jQuery menu system?

I just learned that Adobe is no longer using spry or that spry does not work on mobile devices. My entire site (built in CS5.5 moved to CS6) is built with 3 different spry menu systems. I have been told about jQuery, and many other menu system options. I work in design view and can copy and paste code, read code etc...but cant write it to save my life. I cannot seen to understsand how a different menu software system will integrate with DW especially when I use design view. My question is, is there an easy way to change my spry menu's? I have 2 spry menu bars, spry tabbed menus on EVERY page and a spry accordian menu that repeats on all pages. I am working with a template I built, so hopefully it is an easy fix.
Any walkthrough help would be greatly appreciated. Below is the code for my template minus the div set up.
</style>
<script src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="container">
<div id="search">
    <form action="http://www.cft-aft.org" method="get" onSubmit="Gsitesearch(this)">
Search our website:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 150px" /> <input type="submit" value="Search" />
</form>
</div>
<div id="top_nav_bar">
    <ul id="FT" class="MenuBarHorizontal">
      <li><a href="../index.html">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Quick Links</a>
        <ul>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/quicklinkpdf/cftfinal2010_1.pdf" target="_blank">CFT CBA</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/quicklinkpdf/acpsopfinagree2010.pdf" target="_blank">CFOP (previously ACPSOP) CBA</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/quicklinkpdf/cftsalaryschedule.pdf" target="_blank">CFT Salary Schedule</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/strs_sers" target="_blank">STRS - SERS</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/healthcare" target="_blank">Health Care</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/newsliners" target="_blank">CFT Newsliners</a></li>
        </ul>
      </li>
      <li><a href="../buildingreps.html" target="_blank" class="MenuBarItemSubmenu">For BR's</a>
        <ul>
          <li><a href="../pdf_br/handbook13.14.pdf" target="_blank">2013-14 Handbook</a></li>
          <li><a href="../pdf_br/grievance.pdf" target="_blank">Grievance Form</a></li>
          <li><a href="../br_forms/assault.doc" target="_blank">Assault Form</a></li>
          <li><a href="../br_forms/notifyassault.dot" target="_blank">Notification of Assault Form</a></li>
          <li><a href="../br_forms/assaultleaverequest.dot" target="_blank">Request for Assault Leave</a></li>
          <li><a href="../br_forms/prsnlpropdmg.dot" target="_blank">Personal Property Damage Report</a></li>
          <li><a href="../br_forms/tchrselectionpanel.doc" target="_blank">Teacher Selection Panel Form</a></li>
          <li><a href="../br_forms/chptmtgsign.doc" target="_blank">Chapter Meeting Sign In Sheet</a></li>
          <li><a href="../br_forms/chptrmtgrept.doc">Chapter Meeting Report</a></li>
        </ul>
      </li>
      <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/contact.html" target="blank" class="MenuBarItemSubmenu">Contact Us</a>
        <ul>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/cft_acpsop_office" target="_blank">Office Information</a></li>
          <li><a href="Staff" _mce_href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/cft_acpsop_office">Staff">f ile:///C|/Users/kelly/Desktop/website2/cft.acpsop/cft_acpsop_office">Staff Contacts</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/pdf_contact/directions.pdf" target="_blank">Directions</a></li>
        </ul>
      </li>
    </ul>
<div align="center"></div>
</div>
<div id="fb">Content <a href="https://www.facebook.com/pages/Cincinnati-Federation-of-Teachers-Official/235429363160967" target="_blank"><img src="../images/facebooklogosm.gif" width="24" height="24" align="middle" /></a></div>
<div id="header"><img src="file:///C|/Users/kelly/Desktop/PS images for web/banner.jpg" width="980" height="155" /></div>
<div id="mid_nav_bar">
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="../unionbusiness.html" target="new" class="MenuBarItemSubmenu">Union Business</a>
        <ul>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/about" target="_blank">About Us</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/dues" target="_blank">Dues Structure</a></li>
          <li><a href="#" target="_blank">C.O.P.E</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/internal_comm" target="_blank">Internal Committees</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/joint_comm" target="_blank">Joint Committees</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">CFOP</a>
        <ul>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/acpsop" target="_blank">About ACPSOP</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/focus_newsletter" target="_blank">ACPSOP Newsletter</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/tuition_reim" target="_blank">Tuition Reimbursement</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/www.ohsers.org" target="_blank">SERS Updates</a></li>
          <li><a href="http://www.cincinnati-oh.gov/cityhr/pages/-4279-/" target="_blank">Civil Service Commission</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">CFT-R</a>
        <ul>
          <li><a href="#">About CFT-R</a></li>
          <li><a href="#">CFT-R Officers</a></li>
          <li><a href="#">CFT-R Meeting Schedule</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Professional Issues</a>
        <ul>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/tes" target="_blank">Teacher Evaluation System</a></li>
          <li><a href="#" target="_blank">Common Core</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/cit" target="_blank">Career In Teaching</a></li>
          <li><a href="http://staffnet.cps-k12.org/Staffnet/ProfDevFund/" target="_blank">PD Fund</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/rttt" target="_blank">RttT</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/fft" target="_blank">Fund for Teachers</a></li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/resources" target="_blank">Resources</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Affilliates</a>
        <ul>
            <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/www.aft.org" target="_blank">AFT</a>            </li>
          <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/www.oft-aft.org" target="_blank">OFT</a></li>
          <li><a href="http://www.cincinnatiaflcio.org/" target="_blank">AFL-CIO</a></li>
          <li><a href="http://ohio.gov/" target="_blank">State of Ohio</a></li>
          <li><a href="http://www.ode.state.oh.us" target="_blank">OH Dept of Ed (ODE)</a></li>
        </ul>
      </li>
      <li><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/forms" target="_blank">Forms/Documents</a>      </li>
    </ul>
</div>
<div id="left_fill"></div>
<div id="news_zone">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Hot Topics</li>
        <li class="TabbedPanelsTab" tabindex="0">News Zone</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content </div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
</div>
<div id="events">
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Events</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Announcements</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Meeting Dates</div>
        <div class="AccordionPanelContent">Content 3</div>
      </div>
    </div>
</div>
<div id="right_fill"></div>
<div id="blue_line"></div>
<div id="button_bar">
    <table width="880" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr valign="middle">
        <td height="96" align="center"><a href="mailto:[email protected]" target="_blank"><img src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/images/kifbutton.jpg" width="242" height="72" border="0" align="middle" /></a></td>
        <td align="center"><a href="http://hq-afl.salsalabs.com/o/4013/c/505/getLocal.jsp" target="_blank"><img src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/images/legislature.jpg" width="242" height="72" border="0" align="middle" /></a></td>
        <td align="center"><a href="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/get_involved.html"><img src="file:///C|/Users/kelly/Desktop/website2/cft.acpsop/images/getinvolved.jpg" width="242" height="72" border="0" align="middle" /></a></td>
      </tr>
    </table>
</div>
<div id="footer"><img src="../images/footer.jpg" width="980" height="75" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("FT", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Thanks in advance
Kelly

These links point to files OUTSIDE your local site. Did you define your site in DW?
file:///C|/Users/kelly/Desktop/website2
Nancy O.

Using images in Spry menus

Can someone please point me to instructions on how to incorporate button images in horizontal Spry menus?

Here's the working model for the menu I created using images for the main menu tabs: http://mmfc.org/HomePage_CleanUp/index_working.html. And here is the style sheet: http://mmfc.org/HomePage_CleanUp/SpryAssets/working.css.
I have one remaining problem, and hope someone can help.
There are three states/images for the main menu tabs: normal state, hover state (when the cursor is over the tab), and visible state (when a submenu is open and the cursor is over a submenu item).
In OS10.6.4/Safari, it works correctly:
Normal state
Hover state
Visible state
In Windows XP/IE 6, the 3rd state works incorrectly -- the hover state doesn't get replaced by the visible state:
In OS10.6.4/Opera and OS10.6.4/Firefox, it also works incorrectly -- but this time the hover state gets replaced by the hover color, not the visible state image:
For reference, I've copied the CSS below.
@charset "UTF-8";
/* SpryMenuBarHorizontal.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, an auto width box with no margin or padding */
ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
float: right;
/* 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: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
background-color: #FDE9BB;
/* 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 variable width according to submenu item text */
ul.MenuBarHorizontal ul li {
width: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* No borders on all sides */
/* ul.MenuBarHorizontal ul
border: 1px solid #666666;
/* Menu items are a light colored block with no padding and no text decoration */
ul.MenuBarHorizontal a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
white-space: nowrap;
text-decoration: none;
display: block;
cursor: pointer;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 11px;
/* For setting the background color of the spry menu you need to edit the background in the CSS pane. Click on the spry menu bar and then open up the CSS pane. Window > CSS Styles. There's a few CSS items that set the background by default. The "a" item sets the background for the items that don't have a dropdown and the MenuBarItemSubmenu sets the background for the items that have a dropdown. You can set the background to an image just like you would any other element in your HTML. */
/* The following selectors define images for the (orange) normal state of tabs */
ul.MenuBarHorizontal a #AboutUs {
background-image: url(../img/DropDownMenu_aboutus.gif);
ul.MenuBarHorizontal a #Missions {
background-image: url(../img/DropDownMenu_missions.gif);
ul.MenuBarHorizontal a #Help {
background-image: url(../img/DropDownMenu_help.gif);
ul.MenuBarHorizontal a #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents.gif);
ul.MenuBarHorizontal a #Media {
background-image: url(../img/DropDownMenu_media.gif);
ul.MenuBarHorizontal a #PatientStories {
background-image: url(../img/DropDownMenu_patientstories.gif);
ul.MenuBarHorizontal a #ContactUs {
background-image: url(../img/DropDownMenu_contactus.gif);
/* The following selectors define images for the (bright) active state of tabs.*/
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #AboutUs, ul.MenuBarHorizontal a.MenuBarItemHover #AboutUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Missions, ul.MenuBarHorizontal a.MenuBarItemHover #Missions, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Missions {
background-image: url(../img/DropDownMenu_missions_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Help, ul.MenuBarHorizontal a.MenuBarItemHover #Help, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Help {
background-image: url(../img/DropDownMenu_help_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarItemHover #NewsAndEvents, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #Media, ul.MenuBarHorizontal a.MenuBarItemHover #Media, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #Media {
background-image: url(../img/DropDownMenu_media_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #PatientStories, ul.MenuBarHorizontal a.MenuBarItemHover #PatientStories, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_vis.gif);
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover #ContactUs, ul.MenuBarHorizontal a.MenuBarItemHover #ContactUs, ul.MenuBarHorizontal a.MenuBarSubmenuVisible #ContactUs {
background-image: url(../img/DropDownMenu_contactus_vis.gif);
/* The following selectors define images for the (red) hover state of tabs.*/
ul.MenuBarHorizontal a:hover #AboutUs, ul.MenuBarHorizontal a:focus #AboutUs {
background-image: url(../img/DropDownMenu_aboutus_hover.gif);
ul.MenuBarHorizontal a:hover #Missions, ul.MenuBarHorizontal a:focus #Missions {
background-image: url(../img/DropDownMenu_missions_hover.gif);
ul.MenuBarHorizontal a:hover #Help, ul.MenuBarHorizontal a:focus #Help {
background-image: url(../img/DropDownMenu_help_hover.gif);
ul.MenuBarHorizontal a:hover #NewsAndEvents, ul.MenuBarHorizontal a:focus #NewsAndEvents {
background-image: url(../img/DropDownMenu_newsandevents_hover.gif);
ul.MenuBarHorizontal a:hover #Media, ul.MenuBarHorizontal a:focus #Media {
background-image: url(../img/DropDownMenu_media_hover.gif);
ul.MenuBarHorizontal a:hover #PatientStories, ul.MenuBarHorizontal a:focus #PatientStories {
background-image: url(../img/DropDownMenu_patientstories_hover.gif);
ul.MenuBarHorizontal a:hover #ContactUs, ul.MenuBarHorizontal a:focus #ContactUs {
background-image: url(../img/DropDownMenu_contactus_hover.gif);
/* Menu items that have mouse over or focus have a dark background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background-color: #bf2e1a;
color: #FFFFFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a dark background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color: #bf2e1a;
color: #FFFFFF;
/* Sets width of submenus and makes text non-wrapping */
ul.MenuBarHorizontal ul li {
display: block;
float: none;
width: 12em;
white-space: nowrap;
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;
/* 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; */

Help with Dreamweaver CS5 spry menus. Submenus are not showing.

Hello.
I am working on a new website, and added 2 vertical spry menus to the page (left hand side under SEARCH). All of my submenus were working properly except for the fact that I couldn't see the entire list once it dropped down past the container window. I tried adding "overflow: visible" to the ul.MenuBarVertical ul AND ul.MenuBarVertical ul li and all of my submenus disappeared. Both spry menus were saved with different names. I tried UNDO multiple times, but they are still not working. HELP! I really don't want to have to go back and re-create these 2 menus.
Thank you.
Heres the link to my website
http://www.advertools.net/pmgdemo/index.html
P.S. I am Mac based and have only viewed my site on Safari, so I'm not sure how this looks on IE or any other browsers.

I looked at your linked site from a PC on Chrome 12, Firefox 4 and IE9. Your menus show albeit that they sometimes overlap a little in an unpleasant (but workable) way. I have not checked with Safari, need to get an updated copy.
So the problem does not show up in the browser.
Is the problem with Contribute?
PS: You submenus show out horizontally, not vertically - is that what you intended?

Horizontal Spry Menus are not showing up in ANY browser HELP!

www.tvnewsjunkie.com
I am a novice web designer and I need help!
The above site listed is the site I am currently working on. As you can see the menu bar...is not a menu bar at all but a long list of links along the left side.
HOWEVER, when I click on LIVE VIEW in DreamWeaver everything looks fine.
There should be 7 total menu bars with 7 Dropdown menu options each (except on the bottom menu bar which there will only be 4 I believe)
What am I doing wrong??

Thank you so much for your help!This matter is certainly closed.
I just want to add, however, that somehow my Spry Assets folder was placed somewhere outside of the rest of my files! no wonder I was confused.
Thank you again!
Grant
Date: Fri, 17 Dec 2010 23:43:25 -0700
From: [email protected]
To: [email protected]
Subject: Horizontal Spry Menus are not showing up in ANY browser HELP!
You have forgotten to upload the support files - SpryMenuBar.js and SpryMenuBarHorizontal.css - to the server.
Gramps
>

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

Spry Menus on Spry Tabbed Panels?

Hi,
I'm designing a site that has major tabs at the top, each of which takes the visitor to an appropriate section of the site... each with a default section overview page and a horizontal nav menu that's appropriate for that section. (This design is similar to going to a site like AT&T and clicking on top tabs for Home, Small Business or Enterprise. Once you've done so, the menu below then presents links appropriate to the Home, Small Business or Enterprise products.) I've been trying to implement this by putting instances of Spry Menus in Spry Tabbed Panels within the TabbedPanelsContentGroup div. Specifically, I have the MenuBarHorizontal class is each TabbedPanelsContent div/class.
I have the basic layout working, but the wiring is mystifying me. Clicking the various tabs indeed presents the correct corresponding menus. But I also need to figure out how to make clicking a section tab go to the section overview page (which happens to also correspond the first menu item, "Overview", in each section). There's no real <a href> kind of option that's apparent in conjunction with the TabbedPanelTabs in the TabbedPanelsGroup. Is there a way to force a particular page to display when switching tabs? Or am I trying to use the wrong tool for the job and there's a better technical approach to implementing this design?
I've tried David Powers' blog entry re "Opening Specific Tabs and Panels from Another Page" (http://foundationphp.com/tutorials/spry_url_utils.php), but it describes exactly what the title implies.
Thanks!
Jeffrey

Hi, Jeffrey,
I think I'm going to need to diagram this out!
Let's see...when you say "major tabs at the top" are you referring to a separate MenuBar or are you speaking of Spry Tabbed Panels?
You of course realize that if you are speaking of Spry Tabbed Panels, that EVERYTHING on the panels is on one page. If that is your main organization, yeah, it's a little hairy.
Now, if you have a "normal" one-level set of nav buttons that each takes you to a page that contains a set of Tabbed Panels for that "department," that will get you where you need to be without quite as much mind-blowing follow-the-wire through the wall hijinks, if you know what I mean.
Here is a site that I put together using Spry Tabbed Panels: http://www25.uua.org/uuhs/index.html Although the top "tabs" nav looks like Tabbed Panels tabs, the Tabbed Panels don't start until you get inside the site, and there I use Vertical tabs (on the left side) and on the Panels have put lots of Spry Accordions.
By using this technique, you have an effective "landing page" on each "department" linked to with the top navigation buttons.
Best of luck, and watch out for short-circuits!
Beth

Dreamweaver cs4 spry menus issues with asp

I am having problems using spry menus with dreamweaver cs4
and asp pages. When I inset the spry menus they look fine on the
screen, except when I look at them through a browser the menu is
displayed as in my attachment. This doens't happen with html, so is
there an issue in dreamweaver 4 asp. Can anyone help me with this
one?
Julie

Julie,
Not a asp problem can you post a link or code for the page in
question?
Dave
"JulieThompsonaus" <[email protected]> wrote
in message
news:gqovvm$c0g$[email protected]..
> I am having problems using spry menus with dreamweaver
cs4 and asp pages.
> When I inset the spry menus they look fine on the
screen, except when I
look at
> them through a browser the menu is displayed as in my
attachment. This
doens't
> happen with html, so is there an issue in dreamweaver 4
asp. Can anyone
help
> me with this one?
> Julie
>
> * About Us
> o Our Staff
> o Testimonials
> o Customer Survey
> * Service Requst
> * Recruitment
> o Training
> o Job Descriptions
> o Job Applications
> * Contact Us
>
> c
>
>
>
>
>
>
>
>
> ? Home Carers 2009 Site Map Email Us
>

Are Spry Menus SEO friendly?

Hi,
I read that Spry Menus are not SEO friendly.
Are Spry Menus created in Dreamweaver CS3 SEO friendly?
I can see the <a> links in the html. It looks OK to me.
Thanks,
Jeff:confused

macapples wrote:
>
quote:
Originally posted by:
Newsgroup User
> "danilocelic AdobeCommunityExpert"
<[email protected]> wrote in
> message news:g45mo1$2c0$[email protected]..
> > Murray *ACE* wrote:
> >> I think that there is Ajax involvement, but
it's not involved so that the
> >> links are 'obfuscated'.
> >
> > There is no Ajax involved in the Spry menus, only
dynamically showing and
> > hiding of the sub menus with JavaScript. Granted
some have come to call
> > anything dynamic like this Ajax these days, but
it's technically not got
> > anything to do with Ajax.
>
>
>
>
> Here's some language that would lead some to believe
that Spry is "AJAX"
>
> "Spry is a JavaScript-based framework that enables the
rapid development of
> Ajax-powered web pages."
>
> From the Adobe Labs page on Spry. These types of
references are made
> throughout DW books and training materials.
http://en.wikipedia.org/wiki/AJAX
AJAX: Asynchronous JavaScript and XML
With Ajax, web applications can retrieve data from the server
asynchronously in the background without interfering with the
display
and behavior of the existing page. Data is retrieved using
the
XMLHttpRequest object or through the use of Remote Scripting
in browsers
that do not support it. Despite the name, the use of
JavaScript, XML,
and asynchrony is not required.
So, maybe as the sub-menu is being exposed without a page
refresh it is
considered AJAX? I myself wouldn't call it AJAX.
Steve

A single report can't combine portrait and landscape oriented pages

Post Author: joelo2
CA Forum: Crystal Reports
Hi,
Can a single report in Crystal report XI (version 11.5.8.826) combine portriat and landscape oriented pages like Crystal report 2008? For example, I have one main report with several subreports in the main report. I want one subreport be in portrait page orientation and the other subreports in landscape. Can I do something like that in Crystal report XI version? I even tried writing a small .net program to do this, but it doesn't seem to allow me to do that programmatically either. Please help

Post Author: ngra
CA Forum: Crystal Reports
I'd like to elevate this issue with Crystal Reports XI. There is a critical application which we developed in-house which needs both portrait and landscape orientation in each of the 30,000 plus documents we are sending out every month.If developers in Business Objects are picking this thread up - we need a patch for this limitation - quick. Right now, we are toying with the possibility of exporting the documents into a text format with markers indicating if a page is portrait or landscape. This is to be loaded into a Xerox machine (which costs hundreds of thousands of dollars), where it is mapped automatically to portrait or landscape. Note to Business Objects: This will provide us and countless others with much value. Think 80/20 rule - most bang for your development bucks and value for your customers!

How do I combine text and photos on the same page in iPhoto using photobook

How do I combine text and photos on the same page in iPhoto using photobook?

You mean while creating a book in iPhoto? Click on the layout button while viewing a page and select the layout that includes both text and photos. Most themes will have those options.
OT

Combining hor and vert spry menus

Similar Messages

Maybe you are looking for