Moving to CSS Menus

Yes, css menus are a dog. Sorry but they are functional but limited.


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

Compared to what? Hand coding!

Limited? in what way?

On 14 Jan 2009, 10:31 am, John-Paul Kernot wrote:

Yes, css menus are a dog. Sorry but they are functional but limited.


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

Compared to what you might come up with let’s say in Photoshop for instance?


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

oh … and I forgot to mention the constant css errors when you change anything.


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

Hi JP,

Are you getting JavaScript errors in Freeway? If so could you send us
your Freeway file so we can see what is causing this please
(support(a)softpress.com).

JDW, I am just putting together some answers to your questions, will
have them shortly.

Joe

On 14 Jan 2009, at 13:08, John-Paul Kernot wrote:

oh … and I forgot to mention the constant css errors when you
change anything.


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

Do you design CSS menus in Photoshop?

You can and put background images in the CSS menus, this gives lots of extra styling scope.

BTW I don’t get any errors

On 14 Jan 2009, 12:04 pm, John-Paul Kernot wrote:

Compared to what you might come up with let’s say in Photoshop for instance?


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

On 13 Jan 2009, at 13:26, JDW wrote:

I am interested in a pull-down type menu that pulls straight
(vertically) down. I created a button gradient in Photoshop to use
as the background, which is 35px in height. Setting the line-height
to ‘175%’ accommodates this graphic fairly well. (I tried ‘35px’
but it resulted in a gap under the button and just above the first
submenu.) My aim is to make the sub-menus (and of course, sub-sub
menus) to be about half the height of the main menu button.

Ok, two way to do this, I will go with the all-in-Freeway one:

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).

How do I use CSS Menus to span the entire width of my menu bar to
exactly 800px?

I do this by drawing an item the width I want it to be (so 800px) and
placing the CSS Menus inside this as an in-flow item. To do this cut
the menus from the page if you have already created them and double
click
in the item you just drew and paste. Apply the same image
you’re using in the menus to the background of the first item using
the Inspectors ‘Image’ pulldown. I would recommend using CSS layout
items for both. Doing this will give the menus the appearance of being
the width of the page when in fact they aren’t.

When I use anything higher than 100% in the line-height attribute,
sub-submenu arrows get shifted up. Of course, that makes no sense
at all. The arrows need to be the same vertical height as the text
in each menu row. The text in each row automatically centers itself
vertically, so why not the arrows? How do I force the arrows to be
vertically centered when using custom line-heights?

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.

Is it possible to make a different color scheme for sub-sub menus?
I ask because I have a sub-sub menu with the same number of rows as
its parent submenu. It’s a Product menu on my website. And I want
our most popular product placed at the top of that menu. But when I
mouse-over that first row in the parent sub-menu, the sub-sub
appears to the right and looks odd (looks like a single fat submenu
with two columns of text). The sub-submenus on softpress.com don’t
look bad because you don’t invoke any sub-subs until part way down
the parent submenu. But again, I want to start at the topmost row.
Hence, coloring the sub-subs differently would make it clear there
is a sub-sub menu on screen, not just a submenu with two columns of
text.

Not through the Action no, if you wanted to do something as specific
as this you would need to roll your own (there was a tutorial floating
around in the tutorials section that explains how). The Action takes
full advantage of CSS inheritance meaning that the set of CSS
selectors is finite and generalized (one set of selectors in the CSS
target many different areas of the menus), if you wanted to do things
like categorizing submenus and using different CSS selectors for each
category then the amount of code that would need to be generated would
double (potentially) for each different submenu.

When we develop Actions we try to make them as easy to use and at the
same time as functionality rich as possible; in the case of the CSS
menus the interface is already quite full so adding more options would
make for a worse user experience. We are taking note of all the things
that are being asked and will see if they can be incorporated into the
Action in the future with no compromise to usability.

I hope this helps.

Joe


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

Hi,

This is my first post on FreewayTalk and I’m not sure if I should add it here or create a new one but it is related to to the original post above as I am also having problems fine tuning the css menu. I have read the other posts on the forum and realise I’m not the only one who finds freeways approach to css menus very limiting.

My problem is that I wold like to create a menu where the item dividers are 30px high, with the menu text centred and aligned to the bottom of the dividers and a border at the left and right hand sides of the menu itself, (nothing at the top or bottom). I have tried extended type styles and extended div styles etc but nothing seems to work. The rules I have created show up in the css code on the page but I think these are being overridden by the following line of code that is automatically generated by freeway:

#fwNav1 li a, #fwNav1 dd a { background:transparent none repeat scroll 0 0; color:#666633; display:block; padding:3px 10px; text-decoration:none; }

If I change the padding in this rule to: padding: 30px 0px 0px 0px; I get the result I’m after which is great, unfortunately it also effects the drop down menu which is not great. So I am assuming I would need a separate rule for:

#fwNav1 li a { 30px 0px 0px 0px ; }

I have found the rule for the border and changed that easily but I’m wondering is there a way of altering this code permanently whilst keeping the menus on separate pages still linked to the masterpage? I have tried using Source Code Snooper to alter the menu css but once changed the menu is no longer linked to the masterpage. Any alterations made to the menu are not updated automatically and have to be applied to every menu on every page individually! The masterpage implementation is also something that I am finding extremely frustrating with items being duplicated, no longer synced and so on, even applying a blank masterpage and then reapplying the original master doesn’t seem to work, but thats another post!

Any help with advanced control over the css menus and keeping them synced to the masterpage would be greatly appreciated.

Regards.

Tom.


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

May I suggest that if you roll a a more comprehensive CSS Menu Action,
which quite a few of us would welcome, you provide a ‘Basic’ or
‘Advanced’ selector in the pallet. Basic would serve to produce
‘easy’ menus much as now and Advance give the extensions for those
prepared to spend a little more time and effort on configuration. That
way the key benefit of Freeway, as a user friendly code generator, is
not compromised

Colin

On 14 Jan 2009, at 16:25, Joe Billings wrote:

When we develop Actions we try to make them as easy to use and at
the same time as functionality rich as possible; in the case of the
CSS menus the interface is already quite full so adding more options
would make for a worse user experience.


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

Hi Tom,

On the Master page go to the Page menu and choose HTML Markup. In the
dialog that appears select “Before ” (the / is important,
“Before ” is different) and paste the following code:

<style type="text/css">
	#fwNav1 li a { padding: 30px 0px 0px 0px; }
</style>

This will cause all the menus on all the pages that use this Master to
use this padding.

Hope this helps.

Colin, suggestion noted, thanks.

Joe

On 14 Jan 2009, at 20:43, Tom wrote:

Hi,

This is my first post on FreewayTalk and I’m not sure if I should
add it here or create a new one but it is related to to the original
post above as I am also having problems fine tuning the css menu. I
have read the other posts on the forum and realise I’m not the only
one who finds freeways approach to css menus very limiting.

My problem is that I wold like to create a menu where the item
dividers are 30px high, with the menu text centred and aligned to
the bottom of the dividers and a border at the left and right hand
sides of the menu itself, (nothing at the top or bottom). I have
tried extended type styles and extended div styles etc but nothing
seems to work. The rules I have created show up in the css code on
the page but I think these are being overridden by the following
line of code that is automatically generated by freeway:

#fwNav1 li a, #fwNav1 dd a { background:transparent none repeat
scroll 0 0; color:#666633; display:block; padding:3px 10px; text-
decoration:none; }

If I change the padding in this rule to: padding: 30px 0px 0px 0px;
I get the result I’m after which is great, unfortunately it also
effects the drop down menu which is not great. So I am assuming I
would need a separate rule for:

#fwNav1 li a { 30px 0px 0px 0px ; }

I have found the rule for the border and changed that easily but I’m
wondering is there a way of altering this code permanently whilst
keeping the menus on separate pages still linked to the masterpage?
I have tried using Source Code Snooper to alter the menu css but
once changed the menu is no longer linked to the masterpage. Any
alterations made to the menu are not updated automatically and have
to be applied to every menu on every page individually! The
masterpage implementation is also something that I am finding
extremely frustrating with items being duplicated, no longer synced
and so on, even applying a blank masterpage and then reapplying the
original master doesn’t seem to work, but thats another post!

Any help with advanced control over the css menus and keeping them
synced to the masterpage would be greatly appreciated.

Regards.

Tom.


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

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 sent you my document by email so you can have a look.

…go to the Page > HTML
Markup menu option and choose "Before ". Paste the following
code in:

Joe, your excellent code works beautifully to vertically center that arrow now! But the only problem is that the arrow is no longer slammed against the rightmost side of the menu. Instead the arrow is 10px to the right of the menu text, which means the location of each arrow will vary by the length of the text. How can I change your code to slam the arrow against the right side of the menu?

How do I use CSS Menus to span the entire width of my menu bar to
exactly 800px?

I do this by drawing an item the width I want it to be (so 800px) and
placing the CSS Menus inside this as an in-flow item. To do this cut
the menus from the page if you have already created them and double
click
in the item you just drew and paste. Apply the same image
you’re using in the menus to the background of the first item using
the Inspectors ‘Image’ pulldown. I would recommend using CSS layout
items for both. Doing this will give the menus the appearance of being
the width of the page when in fact they aren’t.

Hmmm. That’s interesting. Well, I used another technique before I read your email today. I simply sketched a box, imported my background button graphic, and then placed that behind the rightmost list item. It seems to work well in giving the impression of a button bar that spans the width of the page. You can see that in the FW doc I just emailed you. Please let me know your thoughts on my technique versus your suggestion.


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

Hi Joe,

Thank you very much for that, worked a treat :slight_smile: Placing ccs rules like this should help me customise a lot of other page elements too!

Thanks again.

Tom.

On 15 Jan 2009, 6:27 am, Joe Billings wrote:

Hi Tom,

On the Master page go to the Page menu and choose HTML Markup. In the
dialog that appears select "Before " (the / is important,
"Before " is different) and paste the following code:

This will cause all the menus on all the pages that use this Master to
use this padding.

Hope this helps.


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

For this and many other extracurricular CSS adventures, I strongly recommend Xyle scope from http://culturedcode.com

It allows you to see exactly which rules, and in what order of priority, are attaching to each element on the page. Click on an object, and you see it in terms of the page hierarchy and the css cascade. Very often (for me, anyway) the rule you thought was in charge has taken a back seat to another more specific rule.

Walter


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

Hi Walter,

Thanks for the heads up on this, just checking it out now, very interesting indeed :slight_smile:

On 15 Jan 2009, 12:36 pm, waltd wrote:

For this and many other extracurricular CSS adventures, I strongly recommend Xyle scope from http://culturedcode.com

It allows you to see exactly which rules, and in what order of priority, are attaching to each element on the page. Click on an object, and you see it in terms of the page hierarchy and the css cascade. Very often (for me, anyway) the rule you thought was in charge has taken a back seat to another more specific rule.

Walter


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

Sometime around 15/1/09 (at 03:56 -0500) JDW said:

I simply sketched a box, imported my background button graphic, and
then placed that behind the rightmost list item. It seems to work
well in giving the impression of a button bar that spans the width
of the page.

Check this in Firefox as well as Safari on the Mac, and in Windows
browsers. I tried something like this, and Firefox rendered the menus
at a slightly different height. :frowning:

k


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

An undefined height on the container item should fix this.

Joe

On 15 Jan 2009, at 21:27, Keith Martin wrote:

Sometime around 15/1/09 (at 03:56 -0500) JDW said:

I simply sketched a box, imported my background button graphic, and
then placed that behind the rightmost list item. It seems to work
well in giving the impression of a button bar that spans the width
of the page.

Check this in Firefox as well as Safari on the Mac, and in Windows
browsers. I tried something like this, and Firefox rendered the
menus at a slightly different height. :frowning:

k


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

Sometime around 15/1/09 (at 23:30 +0000) Joe Billings said:

An undefined height on the container item should fix this.

I don’t think so, not in my case. :slight_smile:

I was using a vertical menu structure - the one in
http://www.panoramaphotographer.com/ - and I wanted to have it be
not particularly long but look like it went the width of those
standard-sized rectangles. I used a graphic that matched the height
spacing of the menu, but the spacing of the individual items and
hence the whole thing grew slightly in Firefox. When I realised what
the problem was and had looked at how the navigation menu works under
the hood I decided it wasn’t likely to be a fruitful task.

k


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

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


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

Hi there

I’ve done something similar on this website http://www.shrs.org.uk/ but using the alternative Menu Bar action rather than CSS menus.

For the background image I used a semi-transparent png graphic. This should work in newer browsers but will become non-transparent in older ones.

Hope this helps

Gordon


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

Hi Gordon,

Thanks for the reply.

In the “directed” link I provide above, you will notice that they also have semi-transparent selection highlights. Currently on your shrs.org.uk site the selections are opaque. Could you use a PNG to make the selections partially transparent as well?

Best,

James Wages


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