How can I create a navigation bar in the template so I can change the down state of a button on a page made from the template in DW3?

We're creating pages from a template in DW3. The template includes a header, footer and a navigation bar. We've made the navigation bar an editable region so that we can change the down state of the buttons on pages where it is required. However, when we make a new page from the template and try to change the behaviors of the buttons in the navigation bar it will not allow us to make those changes.

Have you considered using CSS styled text/list menus instead of image rollovers. It isn't hard really and it's actually a much better choice for web accessibility and for search engines to find and follow your links. Here are some links to several CSS menu systems you can try:
CSS Express Drop-Down Menus (tutorial)
http://www.projectseven.com/tutorials/navigation/auto_hide/
CSS Tab Designer creates 60+ CSS Styled Button and Tab Menus (download)
http://www.highdots.com/css-tab-designer/
List-O-Rama (DW Extension)
http://www.dmxzone.com/go?5618
CSS Menu Maker (On-Line Menu Generator)
http://www.cssmenumaker.com/
Pop-Menu Magic2 by PVII (DW extension purchase)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

How to display table range navigation bar at the bottom of the tr table i

Hello,
While I am using trinidad, I have to face a critical issue. Can I display table range navigation bar at the bottom of the <tr table> in Trinidad? and remove the range dropdown list, only show the "previous" and "next" link? The project is critical on the UI, this problem is very small but has to be fixed? Does anyone have any ideas？

Difficult to do? No.
<ul id="bottom-nav"><li><a hef="whatever.php">whatever</a></li><li class="last"><a hef="whatever2.php">whatever2</a></li></ul>
With this CSS -
ul#bottom-nav {
     list-style-type:none;
     overflow:hidden;
     width:70%;
     margin:0 auto;
ul#bottom-nav li {
     float:left;
     padding-right:10px;
     border-right:1px solid #FFF;
ul#bottom-nav li.last {
     border:none;
ul#bottom-nav a {
     /* your styles here */

How to create a navigation bar that doesn't move

I'll keep it short:
How do I create a navigation bar like abduzeedo.com? It just stays on the screen.

You can use a div with the CSS position: fixed; top: 0 set. This will allow the div to "stick" to the top of the page, regardless of where the document is scrolled.

How to create a navigation bar with custom made buttons?

I'm used to work with a similar program as Muse. In there we can create a single button and link them together into a navigation bar. I have tried all sorts of tutorials but none of them is discussing this possibility.
To summorize. The idea is to create a button in photoshop and to use this as a theme to build a navigation bar. Possible or not and how? Thanks for assistance. Rgds Rufin

Hi Brad,
Thanks for your reply.
No, not really. I used to work with XARA up till now. And being an Adobe Cloud user I think it a bit silly using two different systems. In XARA I can create a custom button and turn them into a navbar. For your information I include a few links to sites I created with Xara and I would like to know if I can create the same type of navbars with Abobe Muse. I already found out that all the other functions are available and some work a lot better in Muse, but I’m stuck on the navbar issue. I know I can create a button in Adobe PS and use it in Muse. But I didn’t manage to figure out how to create a navbar in Muse on basis of a button created in PS.
www.restaurant-cedric.be or www.discoamigo.com or www.radioparadijs.be
Grtz,
Rufin
LOGO-RUFIN'S-REISBUREAU-outlook
Koningslaan 36 – b31
8300 Knokke – Heist
Tel: 050621052
Fax: 050621072
e-mail: <mailto:[email protected]> [email protected]
<http://www.rufins.be/> http://www.rufins.be
<http://www.travelcoop.be/> travelcoop_logo_2013[1] <http://ferventreisagent.be/rufins-reisbureau> klein logo
Van: Brad Lawryk
Verzonden: zondag 12 oktober 2014 19:40
Aan: RUFIN DUWEL
Onderwerp: How to create a navigation bar with custom made buttons?
How to create a navigation bar with custom made buttons?
created by Brad Lawryk <https://forums.adobe.com/people/Brad+Lawryk> in Help with using Adobe Muse CC - View the full discussion <https://forums.adobe.com/message/6817739#6817739>

How to create a navigation bar

I wanted to create a navigation bar exactly like the one seen
at the top of this website
http://stage6.divx.com/ whenever
i seem to insert a table and then insert my navigation buttons i
cant move it to the top of the page, i also wanted to know how to
centralise these buttons if you look on the example i posted
whenever you re-size your inet browser window the buttons go with
it. any help
Thanks in advance
Rph =D

Do you specifically need to use the onclick event, or do you jts want to run Javascript from the navbar entry? If the latter then you can use the URL method and set the URL to:
javascript:myfunction()
If it must be an onclick event then I think you would need to attach it dynamically in Javascript (using jQuery if available) to locate the link somehow (it's not easy to give it a unique ID unfortunately).
Edited by: Tony Andrews on Oct 26, 2010 10:35 AM

How can I create a status bar at the bottom of a window ?

I would like to create a status bar at the bottom of my main window similiar to "Internet explorer" has. I thought of using a tool bar but I can't see how to keep it positioned at the bottom of the window when the window is resizable. Any other ideas on how to do this the bar only needs to contain a small amout of text and maybe an icon or two.

CVI doesn't have a status bar control on UI element like the one available in Visual Studio++. The best way to replicate this is most like through a string control that is resized and positioned to remain at the bottom of the window and colored to look appropriately. I have also seen the combination of a decoration and a text message used.
Best Regards,
Chris Matthews
Measurement Studio Support Manager

How can I hide page thumbnails navigation bar at the start up of Adobe Reader and open a pdf file?

How can I hide page thumbnails navigation bar at the start up of Adobe Reader and open a pdf file? I could not find this option under Preferences tab? Thanks

Hey there,
Thanks for your reply. That works for the files I do what you said. However, for files I have not done that, It still shows the navigation bar. Any idea, how to do it default for any files?
Thanks agian

How can change background color of drop down menu navigation?

Hi,
I am using multi level drop-down-navigation menu in my website.
I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
please help me
Link & code is given below
http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
HTML Code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a>
                <ul>
                <li><a href="#">Level 2.3.1</a></li>
                <li><a href="#">Level 2.3.2</a></li>
                <li><a href="#">Level 2.3.3</a></li>
                <li><a href="#">Level 2.3.4</a></li>
                <li><a href="#">Level 2.3.5</a></li>
                <li><a href="#">Level 2.3.6</a></li>
                <li><a href="#">Level 2.3.7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS CODE
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
#nav ul {
        margin:0;
        padding:0;
        list-style:none;
#nav ul li {
        float:left;
#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;

Change this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
to this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #new color code;
width: 100%;
And repeat this on other selectors.
Nancy O.

How do I copy a Navigation Bar?

I've created a Navigation Bar, and I want to copy&paste
into other documents, or into a cell in a table.
But it stops working after the simplest cut&paste I can
devise.
What don't I understand here? Sure would LOVE some
help.

I know what you mean, I haven't found a specific fix, I tend
to go the other way and build a template including the Nav bar and
paste other stuff in. If you find a better fix I would love to find
out.
Good luck

HT1918 Created an apple I'd using a wrong e-mail address. Can't access the e-mail to varify the Apple ID in order to be able to change the account settings. Any idea how can change the account information without having to varify the account through the e

Created an apple I'd using a wrong e-mail address. Can't access the e-mail to varify the Apple ID in order to be able to change the account settings. Any idea how can change the account information without having to varify the account through the e-mail?

You are trying to find a loophole to circumvent a basic rule that prohibits the transfer of purchased content from one Apple ID to another.
Content tied to an Apple ID are bound to that Apple ID forever. You can not merge or trade accounts. Well, not (officially) anyway...

How do I create a stacked bar chart - Crystal Excelsius 4.5

How do I create a stacked bar chart using Crystal Excelsius 4.5? I do not see the stacked bar chart in my components window. - Erik

I just opened an old file that I created with Crystal Excelsius and I see the stacked bar chart visible in the components window of my old files.
Why has stacked bar chart disappeared from the components window in my new files? It seems many of the components have "disappeared" including stacked bar, candlestick charts, area charts and most of the background components.

How to find the navigation bar at the apps, PDF reader Lite? after i zoom in, the navigation bar dissapear~ what should i do to make the navigation bar reappear?

How to find the navigation bar at the apps, PDF reader Lite? after i zoom in, the navigation bar dissapear~ what should i do to make the navigation bar reappear?

Hello,
Yes it will be in your page template. You just need to move #NAVIGATION_BAR# substitution under the #LOGO# substitution tag, probably something like this should work
#LOGO#<div>#NAVIGATION_BAR#</div>
Carl

How do i make a navigation bar for all pages

Hi friends !
I want the same navigation bar to appear on all the web pages of my website. (As these are the common things that all the webpages will have). But I didn't find any option to use the navigation bar as a template.
Will I have to copy and paste the same navigation bar on all the pages (let's say 50 to 60 pages, I will have). It will be very tiresome and tedious job to do.
And also if I make even a minor change in the navigation bar then I will have to change it in all 50-60 pages.
What should I do ?
Please help me in this regard.
Imagine a 100 or 200 page site, perfectly functioning and on the air. Then, one day, you need to add or delete some button, or simply change a link. You need to change the menubar in ALL 200 pages, and then re-publish them all. Quite a work, ah ?
Regards,
Jtechmiami

Although Dreamweaver Templates and Library items are suitable tools for doing this, they're tedious and cumbersome at best. They get old very quickly.
By far the most efficient method is to set your navigation bar up as a Server Side Include (SSI).
SSIs are not Dreamweaver specific, they're a general web technology available on any server.
A good primer here
http://www.projectseven.com/products/menusystems/pmm2/ug-examples/includes/index.htm
Do you already have a hosting account? Does it have PHP available?
jtechmiami wrote:
Imagine a 100 or 200 page site, perfectly functioning and on the air. Then, one day, you need to add or delete some button, or simply change a link. You need to change the menubar in ALL 200 pages, and then re-publish them all. Quite a work, ah ?
Not with SSIs. Simple sitewide menu updates take a few seconds.
You edit a single text file locally (either button labels or a CSS rule for styling the button), upload (1-2 seconds) and every page on the site is instantly updated.
Much better than DW Templates.

How do I create a duplicate image inside the same page? Then how do I change the color of that image

how do I create a duplicate image inside the same page? Then how do I change the color of that image from black to red?

Hello there!
Here is one way to create a duplicate image and colorize it. As you can see below, I have one image right now, that I want to duplicate.
My layers panel looks like below.
To duplicate your image, click the downward arrow on the right side of your Layer Panel.
Select Duplicate Layer. This will duplicate the layer that the image is on.
Select "OK" to approve the duplication.
As you can now see in the Layers panel, the image is duplicated. The new layer is now at the top of the Layer panel.
Now to colorize your image, go to Window > Adjustments.
The Adjustments panel will now be opened. Select the Hue and Saturation icon as seen circled in red.
The Hue and Saturation propertied panel will be opened. I selected "Colorize", and adjusted the hue and saturation bar to achieve the level red in my photo.
As you can see below, the image is now red.
Now i want to make sure only ONE of my image layers is red. I moved the Hue and Saturation layer to only be on top of the bottom layer. The image on the top layer now will not be affected by the red.
Select the move tool, so I can now move the image layers so we can see both of them.
With each image layer selected, you can take the move tool and move the images. I moved mine on top of eachother and you can see my red layer (bottom) and the non red layer (top).
I hope that helps. i have also included helpful links.
Please post back with any questions,
Janelle

How do I get my menu bar at the top of the page with no gaps?

How do I get my menu bar at the top of the page with no gaps? Whenever I move it there is a huge gap at the top of the page which I cant seem to get rid of, i posted about this before but none of the suggestions seemed to work for me. i'm not very good with css so im not really sure where to find the problem. There are generally gaps everywhere which looks at absolute mess, no clue how they got there and why, there is a huge gap underneath my menu bar too which wasnt there before. how do i get rid of this too? its probably some padding a or margin but no clue where.
<!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>Home</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"> <a href="home.html"><img src="_Business_Cards/banner copy.jpg" alt="banner" width="1064" height="374" align="top" /></a>

<ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="home.html">Home</a></li>
   <li><a href="#" class="MenuBarItemSubmenu">Lingerie</a>
     <ul>
       <li><a href="#">Camis & Nightslips</a>        </li>
       <li><a href="#" class="MenuBarItemSubmenu">Garter Belts & Girdles</a>
         <ul>
           <li><a href="#">Tops</a></li>
           <li><a href="#">Bottoms</a></li>
           <li><a href="#">Accessories</a></li>
         </ul>
       </li>
       <li><a href="#">Sets</a></li>
       <li><a href="#">Knickers</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Swimwear</a>
     <ul>
       <li><a href="t-shirt shop.html">Bikini</a></li>
       <li><a href="t-shirt shop.html">Tankini</a></li>
       <li><a href="t-shirt shop.html">One-Piece</a></li>
       <li><a href="#">Monokini</a></li>
     </ul>
   </li>
   <li><a href="#" class="MenuBarItemSubmenu">Men's</a>
     <ul>
       <li><a href="#">Boxer's</a></li>
     </ul>
   </li>
   <li><a href="#" class="MenuBarItemSubmenu">Extras</a>
     <ul>
       <li><a href="#">Bags</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Dancewear</a>
         <ul>
           <li><a href="#">Leotards</a></li>
           <li><a href="#">Crop Tops</a></li>
           <li><a href="#">Hotpants</a></li>
         </ul>
       </li>
     </ul>
   </li>
   <li><a href="clearance.html">Clearance</a></li>
<li><a href="pastpro.html">Gallery</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<h2> </h2>
<div id="thumbs" width="192">
<p 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: 1064px; height: 561px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-87-105-108-108-105-97-109 -47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-10 1-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1, autoplayDelay:3000, autoplayStopOnInteraction:false}" data-erName="HomepageSlideshow" data-erTID="{zp7zmhgwl9549847691831}">
          <div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
          <li>
                    <img class="main" src="slideshowpictures/966629_346958598773375_2105784298_o.jpg" alt="One-Off Triangular Soft Bra & High-Waist Knicker Set" />
                    <img class="thumb" src="slideshowpictures/966629_346958598773375_2105784298_o.jpg" />
                    <span class="title">One-Off Triangular Soft Bra & High-Waist Knicker Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/thong ebay.jpg" alt="Pink + Aqua Thongs (Part of Nightslip and Thong set)" />
                    <img class="thumb" src="slideshowpictures/thong ebay.jpg" />
                    <span class="title">Pink + Aqua Thongs (Part of Nightslip and Thong set)</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_7405z.jpg" alt="Floral High-Waist Lace Panel Knicker" />
                    <img class="thumb" src="slideshowpictures/DSC_7405z.jpg" />
                    <span class="title">Floral High-Waist Lace Panel Knicker</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_0018 copy.jpg" alt="Navy Blue Velvet High-Waist Bikini Set" />
                    <img class="thumb" src="slideshowpictures/DSC_0018 copy.jpg" />
                    <span class="title">Navy Blue Velvet High-Waist Bikini Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_7420.jpg" alt="Pink & Aqua Nightslips (Part of Nightslip & Thong set)" />
                    <img class="thumb" src="slideshowpictures/DSC_7420.jpg" />
                    <span class="title">Pink & Aqua Nightslips (Part of Nightslip & Thong set)</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1208838_345346948934540_826580146_n.jpg" alt="Black Floral Bandeau & Lace Girdle Set" />
                    <img class="thumb" src="slideshowpictures/1208838_345346948934540_826580146_n.jpg" />
                    <span class="title">Black Floral Bandeau & Lace Girdle Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1176249_10201020390646766_1642170049_n.jpg" alt="Aqua Polka-Dot High-Waist Bikini" />
                    <img class="thumb" src="slideshowpictures/1176249_10201020390646766_1642170049_n.jpg" />
                    <span class="title">Aqua Polka-Dot High-Waist Bikini</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1012714_10151762577141348_907183642_n.jpg" alt="Maroon Velvet Bikini High-Waist Bottoms" />
                    <img class="thumb" src="slideshowpictures/1012714_10151762577141348_907183642_n.jpg" />
                    <span class="title">Maroon Velvet Bikini High-Waist Bottoms</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/floral ebay.jpg" alt="Floral/Multi Bikini High-Waist Bottoms" />
                    <img class="thumb" src="slideshowpictures/floral ebay.jpg" />
                    <span class="title">Floral/Multi Bikini High-Waist Bottoms</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_0096 copy9.jpg" alt="Purple & Champagne Bandeau Bikini Tops" />
                    <img class="thumb" src="slideshowpictures/DSC_0096 copy9.jpg" />
                    <span class="title">Purple & Champagne Bandeau Bikini Tops</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/1005246_10151762745636348_129531182_n.jpg" alt="Aqua Polka-Dot High-Waist Bikini" />
                    <img class="thumb" src="slideshowpictures/1005246_10151762745636348_129531182_n.jpg" />
                    <span class="title">Aqua Polka-Dot High-Waist Bikini</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/DSC_73612.jpg" alt="Matching Orange/White Lace Crop Top & Thong Set" />
                    <img class="thumb" src="slideshowpictures/DSC_73612.jpg" />
                    <span class="title">Matching Orange/White Lace Crop Top & Thong Set</span>
          </li>
          <li>
                    <img class="main" src="slideshowpictures/logo h copy.jpg" alt="Logo" />
                    <img class="thumb" src="slideshowpictures/logo h copy.jpg" />
                    <span class="title">Logo</span>
          </li>
</ul>
</div>
          <div data-ertype="layout" data-ertemplateName="NONE" style="">                    <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', 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: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
                              <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></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>
</p>
</div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg" alt="PayPal Acceptance Mark" width="192" height="38" border="0" align="right" />
<div align="left">
<p><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside', 'olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=500');">Copyright © Hannah-Rose 2013 > <a href="about.html">About</a> > <a href="terms and conditions.html">Terms & Conditions </a></p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

@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
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: 64em;
          margin-bottom: 0px;
          margin-left: auto;
          margin-top: 0px;
          margin-right: 0px;
/* 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: 8em;
          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: 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-top: -5%;
          margin-right: 0;
          margin-bottom: 0;
          margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
          border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #FFF;
          color: #333;
          text-decoration: none;
          font-family: Pristina;
          font-size: 21px;
          font-weight: normal;
          padding-right: 0.75em;
          padding-left: 0.75em;
          padding-top: 0.5em;
          padding-bottom: 0.5em;
/* 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: #33C;
          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: #FFF;
          color: #666;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #FFF;

How can I create a navigation bar in the template so I can change the down state of a button on a page made from the template in DW3?

Similar Messages

Maybe you are looking for