[Pro] Navigation Bar

Freeway
1

How do you make a navigation bar where the sides go to the edge of the screen like the red navigation bar here Verizon: Wireless, Internet, TV and Phone Services | Official Site

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

If you’ve made your navigation bar using the CSS Menu Action, simply
insert that navigation bar into a same-height HTML box. Apply the same
background color to the HTML box as you do the navigation bar. (Or, to
truly duplicate the 3D shaded look of the Verizon site, use a
background image set to tile horizontally in both the HTML box and the
menu bar.)

Make that HTML box 100% width, don’t set your page alignment to any
value, and the box will grow to fit the width of your browser window.
Use the Margin: Auto setting on the menu bar to center it within the
HTML box, or some other positioning to make your page appear to align
a different way.

Walter

On Dec 7, 2010, at 11:16 PM, Nate wrote:

How do you make a navigation bar where the sides go to the edge of
the screen like the red navigation bar here Verizon: Wireless, Internet, TV and Phone Services | Official Site

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I’m also new using FW but I went through this before and I hope I can help you.

First, you have to create a background with the same size in pixels width as your page. Suppose your page is 960 px , then you have to create a gif or jpg file with the same size. After that, on “page’s appearance settings” go to “image” and import the image. Remember to set “horizontal” as tile and “vertical” as top. The menu buttons you do it using the CSS menu applying the same menu bar you created and with the CSS menu settings you can play till you match it. That’s the best thing I can think of.

Hope it helps,

Marcus

On Dec 7, 2010, at 11:16 PM, Nate wrote:

How do you make a navigation bar where the sides go to the edge of the screen like the red navigation bar here Verizon: Wireless, Internet, TV and Phone Services | Official Site

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Almost.

If you carefully follow Walter’s description, there is no need to create an image same size similar to your page. Enough app. 10px wide (tiling is tiling).

First, you have to create a background with the same size in pixels width as your page. Suppose your page is 960 px , then you have to create a gif or jpg file with the same size. After that, on “page’s appearance settings” go to “image” and import the image. Remember to set “horizontal” as tile and “vertical” as top.

The “buttons” can be done in a graphical way or be faked just playing around with the element divider in the css menu action (the 2nd last). Choose 2 colors, a darker for the left - a lighter for the right and choose a style you like. The advantage of this method is that you can coose “width of content” as it is in this example. Set the hover stat in background to white (choose a different link hover color than white :slight_smile: ) and you’re almost there.

The menu buttons you do it using the CSS menu applying the same menu bar you created and with the CSS menu settings you can play till you match it. That’s the best thing I can think of.

Hope it helps,

Marcus

On Dec 7, 2010, at 11:16 PM, Nate wrote:

How do you make a navigation bar where the sides go to the edge of the screen like the red navigation bar here Verizon: Wireless, Internet, TV and Phone Services | Official Site

The much more interesting part of this menu is its submenu division, showing multiple entries (blocks) horizontal and I wonder, how to manage this? Is it possible with the css-menu-action or what way is to be gone that way?

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Still does not work
On Dec 8, 2010 5:54 AM, “Thomas Kimmich” email@hidden wrote:

Almost.

If you carefully follow Walter’s description, there is no need to create
an image same size similar to your page. Enough app. 10px wide (tiling is
tiling).

First, you have to create a background with the same size in pixels width
as your page. Suppose your page is 960 px , then you have to create a gif or
jpg file with the same size. After that, on “page’s appearance settings” go
to “image” and import the image. Remember to set “horizontal” as tile and
“vertical” as top.

The “buttons” can be done in a graphical way or be faked just playing
around with the element divider in the css menu action (the 2nd last).
Choose 2 colors, a darker for the left - a lighter for the right and choose
a style you like. The advantage of this method is that you can coose “width
of content” as it is in this example. Set the hover stat in background to
white (choose a different link hover color than white :slight_smile: ) and you’re
almost there.

The menu buttons you do it using the CSS menu applying the same menu bar
you created and with the CSS menu settings you can play till you match it.
That’s the best thing I can think of.

Hope it helps,

Marcus

On Dec 7, 2010, at 11:16 PM, Nate wrote:

How do you make a navigation bar where the sides go to the edge of the
screen like the red navigation bar here
Verizon: Wireless, Internet, TV and Phone Services | Official Site

The much more interesting part of this menu is its submenu division,
showing multiple entries (blocks) horizontal and I wonder, how to manage
this? Is it possible with the css-menu-action or what way is to be gone that
way?

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Can you post your non working example online please Nate.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

No, sorry I do not have anywhere to put it so you can see it. I tried to
post it with the file as a download but it did not work.

On Wed, Dec 8, 2010 at 5:41 PM, Nathan Ander email@hidden wrote:

Sure. Im trying to do this with both menu bars.

On Wed, Dec 8, 2010 at 4:33 PM, DeltaDave email@hidden wrote:

Can you post your non working example online please Nate.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

An example for you to download and dissect.

http://www.deltadesign.co/gradmenu.html

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Sounds good I will try it later when I have time. But if I do not set the
page alignment, how can I get the page to center?
On Dec 8, 2010 6:41 PM, “DeltaDave” email@hidden wrote:

An example for you to download and dissect.

http://www.deltadesign.co/gradmenu.html

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Ok that works, but now the part that actually expands, has the same image as
the css menu but its off set from image on the css menu.
On Dec 8, 2010 7:04 PM, “Nathan Ander” email@hidden wrote:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

If you set it as a bg in an html item as Horizontal:Tile and Vertical:Top then you need to use the same setting in your CSS menu which equates to Repeat: x , Top left.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Ok. If I understand right this makes sense. so I have vertical tile and
horizontal center. Do what would that be.
On Dec 9, 2010 11:11 AM, “DeltaDave” email@hidden wrote:

If you set it as a bg in an html item as Horizontal:Tile and Vertical:Top
then you need to use the same setting in your CSS menu which equates to
Repeat: x , Top left.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

The problem is that you have to have the same starting point for your image. If you used horizontal:center on your container then you would have to ensure that the CSS menu was centered vertically in that container which can be tricky.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

O ok I understand I will try to play around with it to get it to work.
On Dec 9, 2010 11:31 AM, “DeltaDave” email@hidden wrote:

The problem is that you have to have the same starting point for your
image. If you used horizontal:center on your container then you would have
to ensure that the CSS menu was centered vertically in that container which
can be tricky.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Hi Dave
I hope you’re well. I have a quick question:
I downloaded the “gradmenu.html” you have done but can’t find the way to reproduce the CSS the same way you did> I realized that on the CSS menu you did the “Item General Setting” is marked as (CSS). Mine is marked as (layer) and I don’t know why. What’s the difference? How can I do it correctly as you did?

Thanks again,

Marcus

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options