I’m working on a project that requires drop down menus in the menu bar at the top of page. (normally I don’t do drop downs - probably because I don’t know how).
I’ve read that CSS Menu action is the way to go. But when I try it, it looks very crude on screen. In 5 Pro, I can’t seem to get the choices under the main heading to remain hidden until the main heading (at the top) is rolled over. Is it suppose to work this way?
Next I tried building a menu out of individual graphic boxes with rollover actions and target actions.
• main heading has rollover action to aqua 1
• 3 sub headings each have target action of aqua 1
• also, each sub heading has rollover action (to sub-subhead), first to indigo 1, second to indigo 2, and third to indigo 3.
(all graphic boxes are set to not refresh, which keeps them visible during rollovers).
So far so good. Next I added a tried to add a page link to one of the sub-sub heads. When I preview this, it does not change to the targeted page. I can see the cursor change shape on screen, so Freeway is sensing the page link, but it’s not changing pages.
So, is there a best way to build nice menus in Freeway? I am open to an advice you can give me.
I’ve read that CSS Menu action is the way to go. But when I try it, it
looks very crude on screen. In 5 Pro, I can’t seem to get the choices
under the main heading to remain hidden until the main heading (at the
top) is rolled over. Is it suppose to work this way?
It is hard to tell without seeing an example page (hint, hint) but it
could be simply that you’re not doing it quite right.
Type your menu items like this:
Main menu item 1
Sub-menu 1 item 1
Sub-menu 1 item 2
Main menu item 2
Sub-menu 2 item 1
Sub-menu 2 item 2
Sub-menu 2 item 3
Main menu item 3
Sub-menu 3 item 1
Simply the menu and sub-menu items with a return between each.
Once this is done, select all the text and use the List panel in the
Inspector palette to indent it ONCE.
Then select the first set of sub-menu items and indent them once more.
Do the same to the other sets of sub-menus. The end result should look
something like this:
• Main menu item 1
° Sub-menu 1 item 1
° Sub-menu 1 item 2
• Main menu item 2
° Sub-menu 2 item 1
° Sub-menu 2 item 2
° Sub-menu 2 item 3
• Main menu item 3
° Sub-menu 3 item 1
Click out of the HTML box, then select it as an object, go to Item >
Actions and apply the CSS Menus action.
From here, pretty much all formatting other than actual font and size
is done in the Actions palette. Play! It takes a little practise, but
you should have no problem at all with your main and sub-menus.
ThatKeith: Yep, I must be doing the CSS Menu action wrong, the question is what. Is there a menu-for-dummies somewhere online? You can view my test at:
I sometimes wonder, what the “real needs are” are if I read requests like this. I may judge sometimes a bit rough and if it sounds “harsh” apologize.
Actually I recognize a flood of requests that are typically:
“First write, than think” and I’d prefer the other way round. And by the way: The Manual is not so bad that it should be totally ignored.
But the best lessons are: “Play and Try to get practice”. Nearly all - including the CSS Menu action is self-declaring - except then when I haven’t got the wish to come further.
There is probably one thing to keep in mind using the css menu action:
Do as less as possible styling in the inspector (just FONT and Size) all other stylings are to be done within the actions dialogue.
Once understood, once given a chance more than half an hour I promise you to get the same results as David.
Ohh - and I’m sure that David (and Joe or Tim) somewhere even provided examples to download to have a chance to investigate how they did it (and David did a lot of stuff, offering his time for us).
And this is another good thing to do:
Seek FWT for other lists by typing keywords (eg “css menu action”) in the search field. You might wonder how much there’s already written about the theme.
Again - apologize - this is nothing personal, and I’ll repeat this on other places as well if necessary - especially for the actual power posters.
Strange. The two different examples look like they’re trying to do
somewhat different things.
Could you take screengrabs to show how things are looking? First take
one of the HTML box that contains the list text, while you’re clicked
into it so we can see the list structure. Then select the box and take a
screengrab of the Actions palette showing the way things are set up.
Press Command (Apple) - Shift - 4, then drag around the area you want to
capture. You’ll get some PNG files on your desktop. Then put the images
online somewhere - perhaps by putting them into Freeway pages.
Maybe you could also sketch out a visual mockup of how you want the
menus to look?
Hi Craig,
I’ve created a new site (FreewayStyle - http://www.freewaystyle.com) purely to share example Freeway files like the ones you mention. Previously I had these littered around in odd corners of the web (for example: http://www.freewayactions.com/test/css-menus-example/) so now hopefully they all have a home to go to.
As I get a chance I’ll add the CSS Menu examples I’ve already created to the site but for now there are three sample menus on there to download and play with; http://www.freewaystyle.com/category/cssmenus
I hope these help in getting your menus up and running. If you have any questions be sure to ask.
Regards,
Tim.
On 21 Dec 2011, at 02:35, Craig wrote:
DeltaDave: Nice menu examples! The siteinspire and ebay menus are what I’m trying to make. Any ideas why my test menu looks and acts so bad?
Thomas, Yes, it can be difficult asking proper questions when one does not speak the language. I did read pages 98-99 and 353-354 in the Freeway manual. Could use a bit more insight.
Tim, Thanks for sharing those examples!
ThatKeith,
I have cleaned up my “test menu” example at:
Only “Products” has sub and sub-sub choices. When you hover over “Products”, subheads “Heads, Sticks, Apparel” appear.
When you hover over “Sticks” , sub-subheads ‘30" 60"’ appear to the right. What I would like to have happen is the space between “Sticks” and “Apparel” would expand and ‘30" 60"’ would appear between them.
Also, notice that “Home” is underline. I do not want these headings to be underlined. From a design standpoint, this looks real crude.
But there are a still a few things I can’t get to work.
How do you center menu headings between the dividers?
Is it possible to have different widths on menu headings (for short or long words)?
How do you add page links to menu headings in CSS Menu? If I select the text “About” that is part of the menu headings, it works – but, I am then stuck with an underline and no way to change color of text on hover.
Background color change on hover seems to work okay, but I can’t get color change of text. I read in one forum that it’s important to “not assign color” in the text body. But if I highlight the text in the html box, there is no choice for “none”. What am I overlooking?
Thomas said:
“Seek FWT for other lists by typing keywords (eg “css menu action”) in the search field. You might wonder how much there’s already written about the theme.”
Yes, there is a lot (30,700) “css menu action” on Google. Only about 100 unique entries and I’ve already read those. Unfortunately, I still haven’t solved my little problem.
Any help you would like to give would be greatly appreciated.
How do you add page links to menu headings in CSS Menu? If I select the text “About” that is part of the menu headings, it works — but, I am then stuck with an underline and no way to change color of text on hover.
All these settings are in the Action interface - there is a tickbox for Links to underline or not.
You can also set your Link behaviour in other ways.
On a page wide basis - with nothing selected on the page look in the Page Inspector under the paintbrush Tab. There is a Links section where you can choose Link colours. Note that the U next to each controls underlining of links. One click turns underlining off but it can be difficult to see what state the button is set to. Best to create a link and then look at it while clicking the Underline button.
On a per item basis - same principle as above but with the HTML container for your links selected - settings here will over-ride those made on a Page wide basis.
Thank you for pointing me to the “Freeway Moment” on CSS Menus (now did I overlook that?). It was helpful to see it done step-by-step. This is where I should have started - Mea culpa!
I went back and recreated my list in a fresh html box, being careful not to touch anything in the inspector window except font size and style. This cleared up the issue with underlined links and the text color change on hover.
It seems that CSS Menu is very sensitive to this. Once any color changes are made to a list, it corrupts the list and it can’t be uncorrupted. You have to start over with a new html box.
On the issue of centering menu headings between dividers, it looks like CSS Menu does not supported this feature. That’s life.
Although it works okay to use text color change to indicate a hover, it would better if I could add a glow around the text as well. Is this possible?
Again, thanks to Thomas, Tim, DeltaDave and ThatKeith.
We stand on the shoulders of giants - and try not to step on their noses in the process.