Dreamweaver Navigation Bar

First off should I use the Insert>Image Objects>Navigation Bar option? If so, is there a way to get text on top of the images that I use so that I dont have to use 20 different images?

I'm not a huge fan of the DW image based navigation menus. I think it's fair to say that the code is bloated and awkward to work with when you need to make menu changes later.
I feel there are much better solutions out there using pure CSS, or a combination of CSS and JavaScript.
If your requirements are simple, this free DW extension will build vertical or horizontal CSS menus for you.
http://www.dmxzone.com/go?5618
Project seven menus are all top notch and rigorously pre-tested to work in various browsers and user settings.
http://www.projectseven.com/products/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Similar Messages

How to Incorporate "fade" Into the Navigation Bar with iWeb?

I started wondering about and exploring this topic in another thread. I would like to make the navigation bar shine brightly and then slowly fade whenever the cursor overlaps the navigation buttons. Does anyone have any idea how to do this? For an example of what I'm looking for, please visit Neonsky.com. This company is a website builder that has, as one of its features, the fading navigation bar option that I'm looking to incorporate into iWeb. Just look at some of their featured websites for an example. I also found the following doing a google search. Any thoughts and ideas of how to get this feature on my iWeb designed website would be helpful. Thank you.
http://dreamweavermenu.com/dreamweaver-navigation-bar-fade.html

Leave all files in the folder as you downloaded them. Drop the index.html file on the browser icon. You will then see what the menu will look like when published on a page. Edit the index.html file to your needs. Your edits will be shown in the browser window (save file upon edit - don't worry, you can still undo in most editors - and refresh the browser window).
If required, also edit the main.css and image files.
When done, copy the contents of the index.html file into a HTML snippet in iWeb. Position the snippet to exactly where you want it to be (height and width accordingly) and publish. Upload the other files manually and make sure that their path on the iDisk/server matches the path mentioned in the index.html and main.css files.
As you will have gathered, you need to understand some HTML and CSS. You may acquire understanding and knowledge by trial and error.

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now ?

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now that they do not have the spry option?

bbull2005 wrote:
Preran, why wouldn't Dreamweaver include it's own menu/navigation bar widget?
I can't answer on Preran's or Adobe's behalf, but I think you'll find at least part of the answer here: http://wiki.jqueryui.com/w/page/38666403/Menubar
Adobe decided to discontinue development of Spry in August last year, and Dreamweaver CC made the switch to using jQuery UI widgets and effects. One reason for dropping Spry was that it failed to work correctly in some browsers. Judging from the fact that the jQuery UI menubar is now "on ice", creating a flyout menu that works reliably across all devices is proving more difficult than originally envisaged.
Because all other widgets in Dreamweaver CC use jQuery UI, it's a reasonable assumption that Adobe hoped the jQuery UI menubar would be ready in time, but it wasn't.

Problems inserting a Fireworks navigation bar in Dreamweaver

I designed a navigation bar in Fireworks. When I preview it
works fine and I exported it as a "HTML and Images" file type. I
used Dreamweaver to insert it through Insert, Image Objects,
Fireworks HTML, I browse the html file, but when I click OK it
displays the message: "The selected file is not the correct format.
Please select an HTML file which was exported from Fireworks". What
am I doing wrong. Is it the file format when I export it? Please
help me, I am a rookie with this, have no manuals, no training at
all, just you.

I have the same problem: I designed a navigation bar in
Fireworks. When I preview it works fine and I exported it as a
"HTML and Images" file type. I used Dreamweaver to insert it
through Insert, Image Objects, Fireworks HTML, I browse the html
file, but when I click OK it displays the message: "The selected
file is not the correct format. Please select an HTML file which
was exported from Fireworks". What am I doing wrong. Is it the file
format when I export it? Please help me, I am a rookie with this,
have no manuals, no training at all, just you.
I followed your directions and still received the same error.
What can I do?

Navigation Bar Question in Dreamweaver

How do put text on the links in the navigation bar in dreamweaver - this is text the person would see when they rollover the link in the navigation bar

There are two attributes that may be used to place text on a navigation bar in Dreamweaver but I would strongly urge you to not create navigation that is not easy for the visitor to figure out.
The first is through the use of an alt tag thusly:
<a href="where_this_links_to"><<img src="images/your_nav_image" alt="What_the_link_is" /> </a>
This will be picked up in Firefox.
You may use the title attribute for all other browsers, which will cause a tool tip to appear after a certain hover time thusly:
<a href="where_this_links_to"><<img src="images/your_nav_image" alt="What the link is" title="What the link is" /> </a>
alt tags are required for screen readers to assist persons without sight and title tags are generally used to make what is not apparent, apparent.
Again, if your navigation is not understandable, your website design should be corrected so that it is.

Dreamweaver help! creating navigation bar?

how do i create a navigation bar. my dreamweaver help says a
nav bar has a up. down and over image but doesn't actually tell me
where to get this image or how to create it??
if this is going to be too complex i don't mind just having
my nav bars as text link but can't seem to spread my 7 links out
horizontally as i can only have two space bar in between each text?

You and me both my friend! I just got off the phone with
"tech support" trying to pay for a single incident ($35) so they
could walk me through putting a navigation bar on my website. It's
so frustrting dealing with some of these techs. I don't want to be
politically incorrect here, but I always wind up with someone I can
hardly understand ( accent ). This stuff is hard enough to follow
with a language barrier. Then I called in to tech support, they
told me I had to pay that I was out of complitmentary assistance,
so they transferred me to sales, who after speaking to two more
people I had trouble understanding, I was transferred back to tech.
support who asked me if I had paid for a plan! Then she says she
can take the credit card etc., when I got through with that she
tells me that she can't walk me through putting the nav. bar
directly on my web site, that I'll have to open a new page and to a
sample one. ( which means when I finish I'll have to remember all
the steps and try to duplicate it on my own site. ( you know how
that goes! ) It's infuriating. I wound up spending an hour and got
nothing, they couldn't even just charge my card so I'd have credit
toward one call later. ( I had to go after dealing with this for 45
minutes)
Anyway, You have to go to Firefox or maybe photoshop to
create the background image. I did some in Firefox, but for the
page background, not the nav. bar. You would open a new page, put
in the size ( pixels ) you need, then use the rectangle tool to
outline that which selects it. Then you can go to the bottom of the
screen and select the color and gradient tool to create some cool
color effects. The thing I don't know is how to know exactly what
size your navigation bar is going to be ahead of time so to size it
right. I understand it has to be exact. This tech told me that they
can't help with any "design issues", like color, where it goes in
your website, etc. If they talk you through how to do it on a blank
page and then you have trouble on your real website, well that's
another issue and another $35. But I don't even understand if they
will help you on the real website. NIGHTMARE!!!!

How to create this cool navigation bar in CS5 Dreamweaver

Dear All,
Can somebody please walk me through how to create this cool navigation bar?
Please see the link below:
http://www.viesso.com/viesso/home.php
Thank you for all your help!
I am designing my own website and I stuck at the beginning...
Agi

You can either use CSS to style the SpryMenuBar or there are commercially available options like Project Seven's Pop Menu Magic: http://www.projectseven.com/products/menusystems/pmm2/index.htm . If you have the money I personally recommend the latter of the two, but you can easily style the Spry menu as well.

Navigation Bar Drop Down Menu for Dreamweaver CS5

Does anybody know how to make a navigation bar with drop down menus in CS5 flash?
-Harley

Does anybody know how to make a navigation bar with drop down menus in CS5 flash?
-Harley

Cannot edit my navigation bar / drop down menu

Somebody pls help me! I am new to Dreamweaver, but have been
studying it heavily the pst 3 weeks (using Sams Teach Yourself
book).
I have inherited a site and switched their navigation bar
from the current one to a different (drop down) that was stored in
the library folder. I have TRIED AND TRIED to edit these links ,
add drdop down items, delete some, etc but cannot seem to access
the 'show pop up menu' option...it is GRAYED OUT.
When I open the library file...only a navigation bar is in
it. I select one of teh nav buttons, and I am SUPPOSE to see the +
sign in the behavior panel in bold, but it stays grayed out no
matter what I do. I have tried double clicking the text (on
MouseOver), as an MX user suggested, but no menu of options pops up
here at all (although it did for her). Furthermore, I even tried
right clicking on the behavior panel where the "on Mouse Over"
identifies the action as "ShowPop Up Menu" (vs. hide pop up menu)
and I DO get a pop up menu with "EDIT BEHAVIOR" as an option. I
click on this, and nothing happens.
UGH! WHY CAN'T I EDIT THIS???
Thanks so much for your help!

I think your friend is confused. You have never been able to
edit the DW/FW
pop-up menus in a template controlled page in any version of
DW. This is
but one of the many reasons one would never want to use these
menus. There
are so many better ways to do them, and Alan has given you
some links....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"wwjen" <[email protected]> wrote in message
news:ed41u9$k5q$[email protected]..
> Hmmmm. So even though my friend could edit the file in
her Dreamweaver
> MX, you
> are saying Dwvr 8 it does not work right?
> I did try re-creating the navbar in a 'basic page' by
setting it up like a
> table (library item was also set up like a table vs.
"inserting navgation
> bar"), but then I had a code error that affected ALL my
pages (totally
> erased
> the body of all pages). I do not understand code , but
my friend said
> having
> the html navbar file vs the library item created
overlapping <head> tags.
>
> What else might you suggest? I appreciate your time and
insight!
>

Page numbers navigation bar instead of the standard first-next-previous-last

I want to add page numbers to my navigationbar instead of the standard "first next previous last".
For example I have a repeat region with a navigation bar (standard) I have 7 records per page and I would like it to say at the bottom:
1 2 3 4 5 ect. Is there any way I can code this up with php or with dreamweaver or is there an other way to do this.
Any help welcome

You can do it in DW
Add the below code
<div class="pages">
<ul>
<li class="prev"><a href="#">« Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="ellipsis"><strong>…</strong></li>
<li><a href="#">6</a></li>
<li class="current"><strong>7</strong></li>
<li><a href="#">8</a></li>
<li class="ellipsis"><strong>…</strong></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="next"><a href="#">Next »</a></li>
</ul>
</div>
style it as
.pages{display:block; width:100%; text-align:center; clear:both; font-family:Verdana, Geneva, sans-serif;}
.pages ul{margin:0; padding:0; list-style:none;}
.pages li{display:inline;}
.pages strong{font-weight:normal;}
.pages .next{margin:0;}
.pages a,.pages .current strong, .pages .ellipsis strong{display:inline-block; padding:2px 6px; margin:0 2px 0 0;}
.pages a{border:1px solid #DFDFDF;}

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.

Image Object Navigation Bar

Hi.
I am using DWCS3 to insert the navigation bar into my
templates. Everything is woorking smoothly, except one little
problem.
My navigation bar contains rollever images are in different
colors (e.g., red, blue, green) Home | Contact | About Us.
When I clicked on About Us, I would like the rollerover
button stay pressed down (green), so I know that I am visiting the
page.
Does anyone know what I need to tweak to get it to work like
I mentioned above?
thanks.
S

I am finding browsers like IE6 increasingly impossible to
work with, every error that dreamweaver seems to report for browser
compatability seems to be because of this. As far as I know there
is no simple way around this, I will be watching this thread to see
what others have to say though!
I have seen when looking at HTML some site's have a <IF
IE6> or something along them lines, can anyone shed anymore
light?
Thanks,
Dave

Navigation bar moves

I've inserted a Flash navigation bar to the left of the
larger photos on my galleries. It's positioned just fine for a
panoramic but when I load another image, a vertical or full frame
horz. the nav bar moves up or down according to the size of the
photograph. I would like to have it anchored at a set distance from
the thumbnail images in the upper bar so it's not bouncing up and
down.
Here is a test page showing what I mean.
http://www.westlight.net/gallery/wildlifetest2.htm
This is probably DW8 101... or less but...help!

Put your navbar in a div above the gallery itself, center and
style it as
you wish .. then put the gallery in a div under that and it
should stay
within its div without interfering with the navbar.
Nice gallery. :)
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"westlight" <[email protected]> wrote in
message
news:esuj8u$h2f$[email protected]..
> I've inserted a Flash navigation bar to the left of the
larger photos on
> my
> galleries. It's positioned just fine for a panoramic but
when I load
> another
> image, a vertical or full frame horz. the nav bar moves
up or down
> according to
> the size of the photograph. I would like to have it
anchored at a set
> distance
> from the thumbnail images in the upper bar so it's not
bouncing up and
> down.
>
> Here is a test page showing what I mean.
>
http://www.westlight.net/gallery/wildlifetest2.htm
>
> This is probably DW8 101... or less but...help!
>
>
>
>

Any tutorials on simple responsive navigation bar?

I made a simple navigation bar using using lists with 4 links.
The problem I'm having is adjusting the navbar for different media like the ipad or desktop where the navbar has to go from display:block (mobile) to display inline horizontally. for a desktop view. I can't find any tutorials that deal with dreamweaver cc and inserting a responsive navbar. Can anyone help me? Thanks in advance.

Very simple, very basic....can be elaborated on to include a sandwich icon which are common with mobile menus. Alternatively Google youtube there's plenty of tutorials, some complex and some simple - solution depends what it is you want to do.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Menu</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#showMenu').css('cursor' , 'pointer').click(function() {
$('nav').slideToggle();
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() >= 600) { $('nav').show(); }
if (win.width() <= 599) { $('nav').hide(); }
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 15px;
nav {
display: block;
background-color:#333;
nav ul {
margin: 0;
padding: 0;
nav li {
margin: 0;
padding: 0;
list-style: none;
display: block;
width: 100%;
nav a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
border-bottom: 1px solid #fff;
nav a:hover {
background-color: #999;
#showMenu {
display: block;
padding: 10px;
nav {
display: none;
@media screen and (min-width: 600px) {
#showMenu {
display: none;
nav {
display: block;
nav li {
display: inline;
nav a {
display: inline-block;
border-bottom: none;
</style>
</head>
<body>
<div id="showMenu">Show Menu</div>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</body>
</html>

Changing hight of navigation bar

I am new to dreamweaver. I have created an unordered list navigation bar that sits in an absolute-position div. I had set the div with at 770 pix and the height for a hundred pix. I then created an <u>l pressing return on my mac between each list item. I then used the <li> in the tag selector to creat an css rule making the list float left.
My problem: I would like to reduce the height of the div to just accomodating the list items. I changed the div height in the property inspector to 0px. But the actual visage image of the div does not change. There is too much space within the div, above and below the list items of the navigation bar and I can't seem to adjust it. How can this be done? Is it to do with the div box set up?
I have already removed "padding" from the top and bottom as well as "white space" of the navigation div.
Help.....
Dulce

A link to your page is what is needed to get any positive and meaningful response.
Good luck.

Dreamweaver Navigation Bar

Similar Messages

Maybe you are looking for