Modify horizontal menu widget to bar menu

Can someone please explain how to change horizontal menu widget to bar menu widget, since the bar widget is missing on my Muse?

Well if I understand your question correctly, I think what you would do is just create the "bar" in the background using the rectangle tool, and then overlay the horizontal menu widget over top. Then you would set the rollover states on the menu widget to have transparent backgrounds, so that the bar behind would show through. There isn't a separate "bar" widget available in Muse - just horizontal and vertical.
Hope this helps!
Cheers,
SH

Similar Messages

Nube needs help inserting a JQuery horizontal menu bar into my site-help.

Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
This post is in regard to the menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
or how to insert it into my site.
Please help.
Why can't I see the nav bar in the site when I paste in?
All I see is the text and no images. I know I am pasting the code in the wrong place.
Where do I insert it?
Below is the code for the site and below that is the code for the menu bar.
Where do I insert it? Help.
Thank you in advance for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
    <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #ffffff;
background-color: #<span class="navmainbg">003366</span>;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffff00;
background-color: #<span class="submenubg">003366</span>;
ul#navlist li a:active
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
<div id="slideshow">
<div id="slideshow">
    <div align="center">
      
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
          <div data-ertype="content" style="display: none;"><ul data-erlabel=>
          <li>
                    <img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
                    <img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
          </li>
</ul>
</div>
          <div data-ertype="layout" data-ertemplateName="NONE" style="">                              <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
                                        <div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> 
                                                  <span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                  </span>
                                                  <span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
                                                  </span>
                                                  <span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                  </span>
                                        </div>
                              </div>
                              <div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
                                        <div align="center">
                                          
                                </div>
                                        <div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
                                          <div align="center">Title1 </div>
                                  </div>
                                        <div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
                                          <div align="center">Title2 </div>
                                        </div>
                              </div>
                              <div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
                                        <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
                                                  <div class="erimgMain_slide">
                                                            <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                                                  </div>
                                </div>
                                        <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                                        <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                    </div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
                              This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
                              <br /><br />
            Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
                              <br /><br />
                              <a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
                    </div>
                    <noscript>
                              Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
                    </noscript>
                    <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
          </div>
</div>

      <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
    </div>
</div>
</div>
<div id="body">
    <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
    <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>
Below is the code for the JQuery menu with sub and secondary sub menus:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexNav - Flexible, Device Agnostic Navigation</title>
    <link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
    <style type="text/css">
    body,td,th {
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 14pt;
    body {
          background-color: #FFF;
    a:link {
          color: #FFFFFF;
          text-decoration: none;
a:visited {
          color: #FFF;
          text-decoration: none;
    a:hover {
          color: #F00;
          text-decoration: none;
a:active {
          color: #900;
          text-decoration: none;
    </style>
    <script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
    <div class="container">
      <header id="site-header">
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="HOME">HOME</a>
            <li><a href="About Us">ABOUT US</a>
            <li><a href="Products">PRODUCTS</a>
              <ul>
                <li><a href="Bound Products">Bound Products</a>
                  <ul>
                    <li><a href="Booklets">Booklets</a></li>
                    <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                    <li><a href="Newsletters">Newsletters</a></li>
                    <li><a href="Presentation Books">Presentation Books</a></li>
                    <li><a href="Manuals">Manuals</a></li>
                  </ul>
                </li>
              <li><a href="Brochures">Brochures</a></li>
                <li><a href="Business Cards">Business Cards</a></li>
                <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                <li><a href="Copies">Copies</a></li>
                <li><a href="Corp. ID">Corporate ID</a></li>
                <li><a href="Flyers">Flyers</a></li>
                <li><a href="Forms">Forms</a></li>
                <li><a href="Menus">Menus</a></li>
                <li><a href="Photo Collages">Photo Collages</a></li>
                <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                <li><a href="Postcards">Postcards</a></li>
                <li><a href="Rack Cards">Rack Cards</a></li>
                <li><a href="Wide Format">Wide Format</a>
                  <ul>
                    <li><a href="Banners">Banners</a></li>
                    <li><a href="Posters">Posters</a></li>
                    <li><a href="Signs">Signs</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="Services">SERVICES</a>
              <ul>
                <li><a href="Litigation">Litigation Services</a></li>
                <li><a href="Creative">Creative Services</a></li>
              </ul>
            </li>
            <li><a href="FAQs">FAQs</a>
            <li><a href="Contact Us">CONTACT US</a>
          </ul>
        </nav>
      </header>
      \ </div>
    <script type="text/javascript">$(".flexnav").flexNav();</script>
</body>
</html>

Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list.
(see below).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<title>Home Page</title>
<meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9 />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<style type="text/css">
img {margin:6px; border:solid 2px #FFF;}
img:hover {background: #666;}
</style>
<link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
    <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
    <div class="#"
        <div class="menu-button"></div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="HOME">HOME</a>
            <li><a href="About Us">ABOUT US</a>
            <li><a href="Products">PRODUCTS</a>
              <ul>
                <li><a href="Bound Products">Bound Products</a>
                  <ul>
                    <li><a href="Booklets">Booklets</a></li>
                    <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                    <li><a href="Newsletters">Newsletters</a></li>
                    <li><a href="Presentation Books">Presentation Books</a></li>
                    <li><a href="Manuals">Manuals</a></li>
                  </ul>
                </li>
              <li><a href="Brochures">Brochures</a></li>
                <li><a href="Business Cards">Business Cards</a></li>
                <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                <li><a href="Copies">Copies</a></li>
                <li><a href="Corp. ID">Corporate ID</a></li>
                <li><a href="Flyers">Flyers</a></li>
                <li><a href="Forms">Forms</a></li>
                <li><a href="Menus">Menus</a></li>
                <li><a href="Photo Collages">Photo Collages</a></li>
                <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                <li><a href="Postcards">Postcards</a></li>
                <li><a href="Rack Cards">Rack Cards</a></li>
                <li><a href="Wide Format">Wide Format</a>
                  <ul>
                    <li><a href="Banners">Banners</a></li>
                    <li><a href="Posters">Posters</a></li>
                    <li><a href="Signs">Signs</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="Services">SERVICES</a>
              <ul>
                <li><a href="Litigation">Litigation Services</a></li>
                <li><a href="Creative">Creative Services</a></li>
              </ul>
            </li>
            <li><a href="FAQs">FAQs</a>
            <li><a href="Contact Us">CONTACT US</a>
          </ul>
        </nav>
      </header>
      </div>
    <script type="text/javascript">$(".flexnav").flexNav();</script>
</div>
<div id="body">
    <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
    <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>

Horizontal Menu Bar works when index.html is appended to url, but not otherwise

My spry horizontal menu bar works like I want when I put /index.html at the end of the url for my website, but when I just go to the website without typing that in the index page shows up fine, but some of the links in the menu don't work. How is that possible if the index page is what shows up when you put in the usual www.domain.com?

You're fine; don't worry about how you sound!
I did not get two different pages when I went for your ...tennis.com address vs. your ...tennis.com/index.html address. Were you looking at the pages locally (preview in a browser) or looking at them on your website?
If your local site contains the files you want to have on the server, synchronize your files [entire local site] (on the files panel, the 'recycle' symbol) to see which files are different, remote from local. Then upload (being sure to include associated files).
The basic reason for a Spry menu bar not working is if the javascript and the menubar css file are not accessible or not linked to the page. The other reason would be if Javascript is turned off (but you said it worked with one file...) or if the javascript code at the bottom of the page is somehow either not there or broken:
<script type="text/javascript">

</script>
Well, I've been pretty long-winded about this. I hope you have been able to sort out the difficulty!
Beth

Horizontal menu bar in cs5

Im fairly new to dreamweaver, and im trying to make a horizontal menu bar with rollover images. Every tutorial I have found online tells me how to make a spry menu bar, or just a rollover image. I know how to do both now, but nobody can seem to tell me how I can customize the spry menu bar with rollover images. So can anyone help me? or is that not even possible? Thanks anyway!

@John
Sorry John, I did not mean real rollover images, only so called rollovers. What I have in mind is an image that changes when the state of the menu item changes as can be seen in the following
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal a, ul.MenuBarHorizontal a.MenuBarItemSubmenu, ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
    background: url(menu_button.png);
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
    background: url(menu_button_down.png);
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Although the following images do not fit the width of the menu items, they are the nest I have for this illustration.
menu_button.png is:
and menu_button_down.png is :
Just copy and paste the markup into a new document and copy the images to the same directory. Then view in a browser of your choice.
Gramps

Project Seven Horizontal Menu Bar

QUESTION
What must I do to get individual menu items to fill the width
of a document?
BACKGROUND
Recently I switched from a SRPY horizontal menu bar to a
Project Seven horizontal menu bar. After substantial manipulation
of this latter I have achieved all of my goals except for one --
individual menu items that expand to fill the width of the page.
For the moment everything is crowded to the left.
Unfortunately every tweek of which I can think to adjust the
menu bar results in disaster. Perhaps there is a combination of
tweeks that I must apply simultaneously that I simply do not know.
This is a really clean page that has been validated for both
HTML and CSS.
The WEBPAGE
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.html
Roddy

http://www.maxdesign.com.au
has some nice ones....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Al Sparber - PVII" <[email protected]>
wrote in message
news:[email protected]...
> Hi Roddy,
>
> You'll need to lay out the page a bit differently so
that the menu bar is
> part of the main column. Since you are using Adobe CSS
it is problematic.
> You might want to check a few online CSS positioning
tutorials for some
> better approaches to doing a 2-column flexible layout.
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> The Finest Dreamweaver Menus | Galleries | Widgets
>
http://www.projectseven.com/go/pop
> The Ultimate DW Menu System
>
>
>
>
> "kiusau" <[email protected]> wrote in
message
> news:[email protected]...
>>
quote:
Since your layout is flexible rather than fixed-width, the
only way to
>> get
>> those links to stretch so that they
>> fill the available would be to assign a percentage
width to each root
>>
>> element.
>>
>> The following adjustments fail:
>>
>>
CSS CODE
>>
>> #p7menubar li {
>> float: left;
>> width: 17%;
>> }
>> #p7menubar #previous li {
>> float: left;
>> width: 16%;
>> }
>> #p7menubar #next li {
>> float: left;
>> width: 16%;
>> }
>>
>>
HTML CODE
>>
>> <div id="menuwrapper">
>> <ul id="p7menubar">
>>
>> <li id="preview"><a
href="#">Previous</a></li>
>> <li id="view"><a href=""
>>
onclick="openFunctionalityWindow()">Viewing</a></li>
>>
>> <li id="copyright"><a class="trigger"
href="#">Copyright</a>
>>
>>
<a href="#">Author</a></li>
>>
<a href="#"
>>
onclick="openCitationWindow()">Citation</a></li>
>>
<a href="#">Plagiarism</a></li>
>>
<a href="#">Sources</a></li>
>>
>> </li>
>>
>> <li id="print"><a class="trigger"
href="#">Print</a>
>>
>>
<a href="#" onclick="printPage()">This
Page</a></li>
>>
<a href="#">Entire Document</a></li>
>>
>> </li>
>>
>> <li id="contact"><a
href="mailto:[email protected]">Contact</a></li>
>>
>> <li id="next"><a
href="#">Next</a></li>
>>
>>
>> <br class="clearit" />
>> </div>
>>
>>
A POTENTIAL SOURCE OF CONFLICT?
>>
>> Please look at the unadjusted page again and notice
(visually it is
>> impossible) that the <div> tag containing the
menu bar extends across the
>> entire width of the page including that portion
contained by the sidebar.
>> I am
>> guessing that your suggested adjustments might work,
if the menu bar
>> could be
>> made to begin after the sidebar. The current
<div> structure is
>>
>> <div id="sidebar1"></div>
>> <div id="menuwrapper"></div>
>> <div id="maincontent"></div>
>>
>>
WEBPAGE
>>
>>
>>
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.
>> html
>>
>> Roddy
>>
>

Spry Widget Horizontal Menu IE Issue

Hi,
I am new to spry widgets. I am building this site in dreamweaver and am using the spry widgetfor my nav bar.
The issue is, in Firefox the menu looks the way it is supposed to, but in IE it has a black box. I have tried a few things,
but no luck. I am sure this is simple but I couldnt figure it out.
http://prorecllc.com/home.html
Any help will be appreciated, thanks in advance.

I've been having problems with the horizontal menu in IE as
well. I have discovered that to center the main menu items without
having the submenu begin at the center of the parent item, put the
"text-align:center" under "ul.MenuBarHorizontal a" rather than the
"ul.MenuBarHorizontal li". I'm still working on making the submenu
items look nice - I don't like them centered but if they are
text-aligned left then they end up beginning far to the right of
the parent item (because the parent is centered with respect to
it's container).

Spry horizontal menu bar and accordion panels not working when published

Hi,
I'm a newbie to Dreamweaver and have been asked to design an intranet site. On the site, I added both Spry widgets for a horizontal menu bar and an accordion panel. Both of these widgets work in preview, however, neither work when I publish. I uploaded the Spry asset folder (with all the CSS and JS files) to the remote server, but still no luck. What am I missing?
Thanks.

Despite of what you have staed, my bet is on the fact that the SpryAssets folder and/or the included files are not being found by your page..
Open the site in FF, click on view Source and in the source code click the link to the JS file. If it can be found, it will show the content of the file and you will have the satisfaction of knowing that the page can find the file.
If it does not show the content, you need to correct that.
Good luck.
Ben

Can you pin a horizontal menu widget to the sides of the browser so it resizes with browser width?

Any ideas how I recreate the auto re-sizing of the horizontal menu bar depending on the size of the browser using muse that I've seen on the following site that I presume wasn't developed on Muse? http://www.thechequersbath.com/
So far I've put a slideshow widget at 100% width, which creates the fixed slideshow in the background. I would love the menu to work in a similar way. Do I have to create a tablet version of it or what? Thanks for any feedback.

Any ideas how I recreate the auto re-sizing of the horizontal menu bar depending on the size of the browser using muse that I've seen on the following site that I presume wasn't developed on Muse? http://www.thechequersbath.com/
So far I've put a slideshow widget at 100% width, which creates the fixed slideshow in the background. I would love the menu to work in a similar way. Do I have to create a tablet version of it or what? Thanks for any feedback.

How can I get a horizontal menu widget to display at 100% width?

I have created a horizontal menu with uniform spacing and have stretched it out to each side. I can't get the red indicator line to show up on the left side, but it does show on the right. No matter what I do, the menu continues to show up short on the right side of my screen in preview mode.
Does anyone know how to do this properly? Has anyone else had issues with it?
Thanks!

Hi,
We are aware of this limitation with the Menu and Panel Widgets and hope to address the same in future.
Thanks,
Vikas

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* 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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* 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
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
/* 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
    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: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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: inline;
        float: left;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

Horizontal Menu Bar Help Needed

Hi there, I am somewhat new to web design but I've been helping a friend update his business's page recently. We use Dreamweaver CS3 and our hosting is thru GoDaddy.
My problem appears when I try to insert a horizontal menu bar (Insert>Spry>Menu bar) so that a dropdown menu will appear when I hover over an option, much like the top menu on the GoDaddy homepage, among others. It works correctly when I preview my page in a browser from Dreamweaver, (Firefox, IE) but when I actually upload my page to the GoDaddy servers and view it, it shows up not as a bar with hidden options, but as a long unformatted vertical list.
The site in question is here: http://www.notyouraveragebookkeeper.com/indextabs
I thought it might be a problem with CSS, but I made sure that all of the style sheets are properly uploaded to the servers, and I made sure that my browser accepted any Javascript applets. I've also tried it with my Dreamweaver CS5 trial. Like I said, I am an amateur in every sense of the word and I'm still learning technical terms for things so some of my jargon may be a bit flawed. I have done a good bit of online research in forums and otherwise, and I've tried solutions that have been given to similar problems. Maybe someone could view the source code and find out where I've gone wrong, or suggest tips to identify problems in Dreamweaver. I feel like the problem lies within the Spry framework, but I have very little knowledge on how it works or what it does.
Any assistance in this regard would be extremely helpful and appreciated.

Neither SpryMenuBar.js and SpryMenuBarHorizontal.css can be found by your online site.
Possibly these have not been uploaded or uploaded to a wrong location.
Gramps

Horizontal Menu Bar - Not displaying correctly in Internet Explorer

My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
I am currently using DW CS5, Spry 1.6.1
The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
Below is the source for my menubar
CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 12pt;
    cursor: default;
    width: inherit;
    font: calibri;
    font-family: Calibri;
    font-weight: bold;
    background-color: #4F91CD;
    /* [disabled]height: 27px; */
    /* [disabled]border-bottom: 1px solid #A7C9E5; */
    /* [disabled]border-top: 1px solid #A7C9E5; */
/* 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: 6
.em;
    float: right;
/* 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: 8.2em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* 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
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #4F91CD;
    padding: 0.2em 0.75em;
    color: #FFF;
    text-decoration: none;
    border-bottom: 1px solid #A7C9E5;
    border-top: 1px solid #A7C9E5;
/* 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: #A7C9E5;
    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: #A7C9E5;
    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
    /* [disabled]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
    /* [disabled]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
    /* [disabled]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
    /* [disabled]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 ifram=e
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
HTML
<tr>
    <td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
      <li><a href="contact_us.html">Contact Us</a>        </li>
      <li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
        <ul>
          <li><a href="helpful_links.html">Helpful Links</a></li>
          <li><a href="community_agencies.html">Community Agencies</a></li>
          <li><a href="of_interest.html">Of Interest</a></li>
</ul>
      </li>
      <li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
        <ul>
          <li><a href="safety_checklist.html">Safety Checklist</a></li>
          <li><a href="things_to_bring.html">Things to Bring</a></li>
          <li><a href="child_safety_plan.html">Child Safety Plan</a></li>
</ul>
      </li>
      <li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
        <ul>
          <li><a href="what_is_abuse.html">What is Abuse?</a></li>
          <li><a href="signs.html">Signs of Abuse</a></li>
          <li><a href="characteristics.html">Characteristics</a></li>
          <li><a href="why_women_stay.html">Why Women Stay</a></li>
          <li><a href="donate.html">Survivors Speak</a></li>
        </ul>
      </li>
      <li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
        <ul>
          <li><a href="donate.html">Donate</a></li>
          <li><a href="events.html">Events</a></li>
          <li><a href="volunteering.html">Volunteering</a></li>
          <li><a href="statistics.html">Statistics</a></li>
</ul>
      </li>
      <li><a href="join_us.html">Join Us</a>        </li>
      <li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
        <ul>
          <li><a href="residential.html">Our Services</a></li>
          <li><a href="our_mission.html">Our Mission</a></li>
          <li><a href="our_story.html">Our Story</a></li>
          <li><a href="board_of_directors.html">Board of Directors</a></li>
        </ul>
      </li>
    </ul></td>
    <td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>

/* 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: 6
.em;
     float: right;
The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
Advice:
change the float to left so that the listed items start on the left hand side
change the listed items in the order that you want them to appear.

Horizontal menu bar mac to pc

Recently created this page: http://musicnotes.net/MNI/SPRY.html using Dreamweaver CS3 but it does not look the same in all browsers.
It starts out with the table width set for 100% and then hard sets the
column widths to force the complete heading to something like 1600 pixels
wide. The cell widths should be allowed to set themselves.
In IE 6.0, and probably IE 7.0, the mouse over point to change colors is a
narrow strip between the links. Results in white flashes as you move down.
In IE 8.0, which is now similar to FireFox, the mouseover color changes work
okay but the secondary panels overlap the primary column. It's workable but
doesn't look quite right.
Except for being forced super wide and too big, everything seems to work
okay in Firefox.
Does anyone know if these issues are resolved using CS4.

Thanks Gramps, will take a look and get sorted!
Date: Mon, 14 Feb 2011 19:00:03 -0700
From: [email protected]
To: [email protected]
Subject: I am having problems with my spry horizontal menu bar defaulting to the top of page in IE
The structure of your document needs fixing. You will be able to get a lot of information from here http://www.adobe.com/devnet/dreamweaver/css.html
After you have fixed the structure start with a fresh copy of SpryMenuBar. Read this before making any changes http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps
>

Horizontal Menu Bar not formatting correctly in IE

I am trying to get my menu bar to properly format in IE. It
works fine in Opera, Firefox, and Safari. What I am having problems
with is with how the sub menus pop up. In IE they show up above the
menu bar instead of below the menu bar. Any help would be
appreciated. My web page is www.artsbeercans.com Thanks!

OK, I went ahead and posted it live, even though it's not how I want it.
I think if I could make the horizontal menu boxes smaller, they could
all fit across - is there anyway to make each box fit the word that's
in it, instead of them all being 160 px? That might make room for
them all to fit across.....
Because can you see that the "Other" is now on the second row, and
pushes over the vertical menu box?
www.itsaboutourkids.org
thanks!!

Horizontal menu bar appears vertical after upload

Hi,
I am new using Dreamweaver CS4 and have encontered a problem. I have made a nice looking (I think so) horizontal menu bar on my web project and it works/looks fine in the "LIve View" of DW. However on the web page after upload it looks like this:
http://www.competenciagroup.com/ColombiaTravel/index.html#
It has changed from horizontal to vertical and all formats are gone. Anybody have a clue?
Thanks in advance,
Ivan

The Spry stylesheet cannot be found.
The Spry CSS should be:
http://www.competenciagroup.com/SpryAssets/SpryMenuBarHorizontal.css
In your local working folder on your computer, is the Spry folder inside the working folder, or is it outside of that folder. The Spry Assets folder should be inside the folder where all your other html/image files are. The link in your html pages, shows that the Spry folder goes one level deeper than that.
The paths to both the spry css and the spry js file are wrong, you need to fix that and then upload the files again.
Hopefully you are working within a Defined Dreamweaver site - this is a very important first step before working on your site.
Define a site:
http://kb2.adobe.com/cps/140/tn_14028.html
Via the File Panels window, move the spry folder into your working folder *do not do it via windows explorer* it has to be done through Dreamweaver so that DW can correctly the file links. If everything goes correctly, you should be asked whether you want to update any links, so yes.. and hopefully the links will be corrected.
Usually the link should look like this if the Spry folder is inside your working folder structure:
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
Your link however shows as:
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
This means that the browser is trying to find the files one level down from where you website files are stored on the server.. and it's not there.

Modify horizontal menu widget to bar menu

Similar Messages

Maybe you are looking for