Folder Menu Tabs

Freeway
1

I need to create a CSS horizontal menu bar, that will appear as Folder tabs in the menu. and the tabs change colour when clicked or hovered, and I am not sure were to start this

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

2

Hi David,
I designed a site many years ago that had a navigation bar not too dissimilar to this where the button sides were angled at 45 degrees. I ended up slicing the tabs up so each one was made up of three separate graphics (the left side, the middle and the right side) put them in a table to hold them together and then wrote some JavaScript to change the correct images when a button was hovered over or clicked. Needless to say I’ve not revisited that nav bar design for a while!

Do your tabs need to overlap? Does the active tab need to come to the front of the rest of the tabs? If they don’t then the CSS Menus Action will be able to do this for you perfectly well. If they do then you may have to look at making the menu manually using rollovers and images.
Regards,
Tim.

On 27 Feb 2013, at 22:51, David Wise wrote:

I need to create a CSS horizontal menu bar, that will appear as Folder tabs in the menu. and the tabs change colour when clicked or hovered, and I am not sure were to start this

Experienced Freeway designer for hire - http://www.freewayactions.com

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

3

Hi Tim, the way they function is not so fancy, they are more for appearance, they need faint lines and shadows. I tried looking at using CSS Menu action by loading images, but could get to work, then I looked at making a strip of tab in photoshop, using that as a graphic image and placing the CSS menu on top, with no colour or borders, and just changing colour when hovered, but as there is sub menus, it looked all wrong.

David

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

4

but as there is sub menus, it looked all wrong.

Have you found an example with sub menus that does look OK

If you can post a link we can see if we can help you replicate it.

David

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

5

Hi David,
Here’s a very simple example that I did earlier using the CSS Menus Action;
http://www.freewayactions.com/test/folder-tabs/

There are a number of things to consider, however, with this menu design;

  1. The tabs cannot overlap as they all occupy the same layer on the page. To give the impression of them overlapping you would either need to write some code to adjust their stacking order (z index) or fake it using sliced images as I mentioned in my previous email.
  2. Because the tabs cannot overlap they can’t cast shadows on other tabs.
  3. The tabs need to be a fixed size as the CSS Menu Action can’t support flexible backgrounds that have differently designed ends.

I have no idea of what you want this to look like so this example is almost certainly way off on the design. If you have an example or an image of what you want to achieve then it should be easier to advise you as to how best to get the menu created.
Regards,
Tim.

On 28 Feb 2013, at 11:32, David Wise wrote:

Hi Tim, the way they function is not so fancy, they are more for appearance, they need faint lines and shadows. I tried looking at using CSS Menu action by loading images, but could get to work, then I looked at making a strip of tab in photoshop, using that as a graphic image and placing the CSS menu on top, with no colour or borders, and just changing colour when hovered, but as there is sub menus, it looked all wrong.

FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

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

6

It kind of looks like the tabs are one piece of art going across you might be able to use a rollover or show/hide layer Action to have the appearance of an entire folder being brought to the front when a tab is clicked.

So, the white area is a stacked set of layers and the tabs are stacked set of layers and when you click the tabs the tabs and bottom white areas change, but they are two separate stacks of layers.

I’m sure I’m looking at this too simplistically, but I’m not a coder and I’m just looking at it as I see it working.

Bob

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

7

Here’s some CSS code examples that might work:

http://webdesign.about.com/od/layout/ss/css-3-tabs.htm

http://webdesign.about.com/od/layout/a/aa042307.htm

Not sure how complicated this is as Im not a coder.

Bob

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