Moving to CSS Menus

Yes, you could use a transparent png background file in your CSS menu like Gordon said.

But they are using CSS to do the transparency


.SubMenu

{
background-color: #2B3550;
border-left: solid 1px #89898B;
border-right: solid 1px #89898B;
border-bottom: solid 1px #89898B;
-moz-opacity: 0.76;
filter: alpha(opacity=75);
opacity: 0.75;
}

On 17 Jan 2009, at 9:09 am, JDW wrote:

How does one go about making semi-transparent menus like the kind used on the following site?

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.ineedwebhosting.co.uk

Well, if a splattering of CSS in combination with the Freeway CSS Menus action can do the job, why go with a transparent PNG then?


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

why go with a transparent PNG then?

Perhaps browser support? Transparent PNG support can be leveraged,
extra CSS support can’t.

Just thinking…

k


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

This is typical of a CSS menu error - of course I can’t clear the error without rebuilding the menu and attaching the CSS menu action, and I can’t output this to txt file either - so here is a png of the problem.

http://drop.io/iqm4ert/asset/picture-1-png


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

… and this of course results in a complete failure of the program and the inability to publish completely unrelated pages … sorry this is just typical of the constant struggle with FWY.

http://drop.io/iqm4ert/asset/picture-2-png


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

Hi James

Unfortunately the Menu Bar action only lets you select solid colours for the highlight colour, there is no option to select a file as there is for the background as far as I can see. I figured it was clearer to go with a solid colour anyway as, depending on the background and degree of transparency, the readability of the text could be affected.

Using the menu bar action you can vary the width of each drop down menu item whereas using the CSS method I believe they all have to be the same width which is why I’ve stuck with the old method and action.

All the best

Gordon

Currently on your shrs.org.uk site the selections are opaque. Could you use a PNG to make the selections partially transparent as well?


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

Hi JP,

Could you please send you Freeway file into support(a)softpress.com so
we can take a look and log a bug, without knowing what the cause of
the problem is it makes it far more difficult to fix the problem.
Apologies if you’ve done this already.

Joe

On 17 Jan 2009, at 16:14, John-Paul Kernot wrote:

… and this of course results in a complete failure of the program
and the inability to publish completely unrelated pages … sorry
this is just typical of the constant struggle with FWY.

http://drop.io/iqm4ert/asset/picture-2-png


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

Gordon,

In light of your recent post and in light of the document that Joe Billings sent me by email, perhaps I simply do not understand the “proper way” to use CSS Menus. Because according to the way I use it, the width of individual menus and individual submenus are indeed user adjustable.

What I do is create an HTML box, type a list, indent it according to my menu hierarchy, then apply the CSS Menus action and adjust settings. I then repeat that process for each menu in my menubar. Have a look here:

http://www.kiramek.com/test/

I’ve got 6 menus in the menubar. In Freeway, that translates into 6 individual HTML boxes. Note that the submenus are wider than the menu buttons. CSS Menus allowed me to do that. And note the button at the far right is wider than any other buttons. And even though the far right button does not span all the way to the rightmost edge of the page, putting a copy of my background image into a graphic box and then dropping that box behind the rightmost HTML box provides the solution.

Joe sent me a FW document that had everything stuffed inside a container box. But as I told Joe offline, I cannot figure out how to make sense of that method. For when I double-click on any one of the six menus inside the container box in Joe’s file, Freeway only allows me to edit the list of the leftmost button. So I went back to my method.

As you can see, my method is working well now, except for the fact that I cannot seem to get the HEIGHT of the submenus to shrink smaller than the height of the menu buttons above them. The file Joe sent me fixes that height, but again, it had other problems which I found unusable. I show some of those trouble in a video I made:

–James Wages


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

Hi James, I’ve just had a quick look at your site and it seems that you are making 6 individual “vertical” lists to create your menu as opposed to 1 individual vertical list containing 6 main items with indented sub list items to create the drop down items. The difference would be seen by selecting “horizontal menu” in the actions pallete where it says “Main Menu Layout:” maybe this is where the confusion lies?

I simply do not understand the “proper way” to use CSS Menus.

As long as it works for you then i don’t really think there is a “proper” way.

I’ve got 6 menus in the menubar.
Note that the submenus are wider than the menu buttons.

Yes creating 6 individual vertical menus would allow you to specify a different em for the top item and the drop down / sub menu items.

Joe sent me a FW document that had everything stuffed inside a container box. But as I told Joe offline, I cannot figure out how to make sense of that method. For when I double-click on any one of the six menus inside the container box in Joe’s file, Freeway only allows me to edit the list of the leftmost button. So I went back to my method.

I think this is where the confusion lies, Joe would be creating an individual horizontal menu with the sub menus indented in the list. When you click anywhere on the menu to edit it the menu reverts back to presenting itself as an vertical list, you would need to move down through the list items to edit them. The left most items in the list denoted by the black dot bullet would be the top most items in the horizontal menu. Items indented another level denoted by the “o” bullet are sub menus of the item in the list directly above then. Indent once more from one of these and you get a sub menu of a sub menu, indicated by a square bullet. Does this make sense?

Try creating a simple list with about 10 items in it, indent everything once to create a list by selecting the right arrow under list in the inspector pallete, you should now have 10 items with black dot bullets next to them. Select the 2nd and 3rd items and indent once more, these should have an “o” bullet next to them. Now select the 5th 6th and 7th items, (not the 4th) and indent these another level, these should also have an “o” next to them. Select the 7th item again and indent this yet another level, this should have a square bullet next to it. Ignore the 8th element, (should still have the black dot bullet next to it), and indent the 9th and 10th item another level. Select Item/Actions/CSS Menus and select “horizontal menu” in the actions pallete where it says “Main Menu Layout:” When you preview this you should see a horizontal menu with 3 main items, the 1st and 3rd item should have one level of drop down menu and the middle item should have 2 levels. When you try to edit the menu it will revert back to showing you a vertical list.

Does that help?

Too much time on my hands this morning!!

Regards.

Tom.


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

On 15 Jan 2009, 7:56 am, JDW wrote:

On 13 Jan 2009, at 13:26, Joe Billings wrote:

Select the entire list by clicking five times in the HTML item (or
using command-a) and from the Style menu give it Leading of 175%. Now
select each of the indented levels one by one and add a Leading of
100% (if you look in the Styles Inspector you will see two Leading
styles applied to these ‘submenus’, that is correct and exactly what
you want).

I tried that and many variations of it, both with and without the line-height attribute in place (inside Extended DIV Style). But the height of my main menu button shrinks by 25% when I do it.

I’ve been trying to do this myself for several hours, messing around with the extended dialogue and all sorts but just couldn’t get it to work at all, that is until I realised Joe’s instructions were using the Style Menu from the Menu bar at the very top of the freeway interface and not the styles palette at the side of my screen! Not sure why this works differently but it does. Now I have a top menu with a leading of 200% and a drop down menu with a leading of 100%, all using semi transparent .png’s for the menu and rollover effects :slight_smile:


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

Thank you for the detailed reply, Tom. You’ve helped me to see more clearly what Joe Billings is doing. And after fiddling with the document he sent me some more today, I must say that his approach is more “convenient” than creating 6 separate HTML boxes!

However, today I needed to add two more menu buttons (8 total). This requires that I shrink the width of each button using the “Main Menu Width” setting in the Actions palette. But my rightmost Japanese button has some fairly wide text in it that is now getting truncated in Preview. I therefore want all the leftmost buttons to be narrow in width but be able to increase the width of the rightmost button. The only way to do that is to go back to my original method of creating individual HTML boxes. But with 8 menu buttons now, it is very annoying to align them all properly such that I can get a single pixel vertical line separator between them!

Alas, convenience and flexibility are not meant to be, I guess.

I am also very curious as to why I get multiple repeating gray arrows as you can see in my video when I go to Preview. This disappears after several Previews, so I can only assume it is a refresh glitch in Freeway??


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

I also want to have horizontal separators in my submenus, much like how OS X uses them in menus – to better organize separate groups of menu commands. CSS Menus allows you to have no separators at all, or forces you to use a separator after every single submenu command. But how can I selectively add a single submenu separator below a submenu command that I specify?


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

Joe Billings replied to JDW as follows:

When I use anything higher than 100% in the line-height attribute,
sub-submenu arrows get shifted up. The text in each row automatically centers itself
vertically, so why not the arrows?

The Action wasn’t designed with change of height in mind so this is
only possible by adding additional CSS. To do so go to the Page > HTML
Markup menu option and choose "Before ". Paste the following
code in:

<style type="text/css">
   .fwMainPointer1, .fwSubPointer1 {position:relative; >left:10px}
</style>

I’ll get something logged on this so it works this way by default.

Joe, since you are going to get FW to do this magic by default, I would like to offer you more feedback.

To recap, the arrow-shift problem occurs when I use separate HTML list boxes for each CSS menu and a line-height greater than 100%. The goal is to keep the submenu arrow vertically centered and slammed to the right side of the menu. I tried your code, but after some experimenting, I found the following to work best (for a line-height of 175%):

<style type="text/css">
    .fwSubPointer1 {position:absolute; top:33%}
</style>

(I placed that code in “Before ” in Page Markup.)

I’m totally brain dead when it comes to code (my main reason for using Freeway in the first place). How I figured out to use “top” was to experiment with boxes in Freeway, then output to the browser and examine the page Source. When I saw “top” used, I experimented with it and found 33% works great for the vertical centering of the arrow. You can see this in use on my test page now:

http://www.kiramek.com/test/


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

Tried to find the answer on this forum for my question and can’t (forgive me if I’ve overlooked it).

I have used CSS menus on many occasions and mostly I get on fine with it. For a particular project though I want to ensure that the width of the menu items and text DO NOT expand if the user sets larger text in their browser.

I understand the issues regarding accessibility design etc., but I have a specific case where I’d like the navigation menu to be a set width all of the time.

Can this be done for all browsers?

John


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

Good Evening -

I was following the instructions above - and in the “preview” browser it worked like a charm-When uploading But I am getting the error - used the action wrong - and it wont work http://www.grdesigns.net/iphoneapp

here are my additions I want to make - I am doing the vertical menu with the pop out to the side - I would like to have these stable so that they can go back and forth - example:
http://www.apple.com/iphone/appstore/
(bottom of the page)

if this is not the right way to do this - please direct me to how to do this.

My clients want everything to look like apple. And he has switched his thoughts to this and wants things done by tomorrow pm! Oi!!

Thank you for ALL of your help!


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

Is there a tutorial about creating submenus?

thanks for any hint or how to instructions.


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

To create the menus you indent the menu items using the List indenting section in the Text inspector.

By adding a further level of indent you create the sub menus

Menu 1
                  Submenu1 item 1
                  Submenu1 item 2
Menu 2
                  Submenu2 item 1
                  Submenu2 item 2
Menu 3
                  Submenu3 item 1
                  Submenu3 item 2
                                   SubSubmenu3 item 1
                                   SubSubmenu3 item 2

Does that help?

David


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

Looking for help with the width of sub menus. I’ve set the main menus to content width and set the sub menus to use the main menu settings. The sub menus do not however adjust to content width and there is no option to achieve this, only a width adjustment in ems.

(Pro 7.01)


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