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.
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?
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: eBay.com) so now hopefully they all have a home to go to.
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?
“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.