To use the CSS Menus Action effectively, you need to think differently about text styling. First, remove all style from your menu items. Highlight all the text in the HTML box, then press the [No Style] option at the top of the styles palette. Next, switch to the Inspector, and make sure that the linked text is a regular bulleted list. One level in for each level of menu, so if you have submenus, these are indented one level below their parent:
- Home
- Products
- Customer Service
- Corporate Office
This should be an entirely unstyled list, with boring blue default links in it. Do not adjust anything at all about it.
The important thing to realize at this point is that the content of the list is nothing except data. It does not contribute to your styling in the finished menu at all.
Now, switch to the Actions palette and make all the adjustments to your menu’s style there. Set the colors, background colors, borders, etc. Resist the urge to adjust fonts at this point, you will do that last. But make sure that you only make styling changes in the Action, never anywhere else. Publish every now and then to see a preview of how it’s going. Notice how all the bullets are gone? That’s not an accident. Click into the HTML box, and your bullets will return immediately. Again, they are data, not presentation.
Finally, to adjust the font for your menu, click once on the HTML box containing it, and open up the Inspector’s Style tab, Link segment. Use the link tools to change the font. Be careful to only adjust the link, not the hover, active and visited states – those will still be managed by the Action.
Walter
On Apr 24, 2014, at 3:31 AM, Roger Burton wrote:
Forgive me - I’ve started a new thread - following Thomas’s advice I’m trying to create a CSS Menu.
Here’s how I set it up, I created the html item and pasted in my menu names and kinked them to relevant pages, and styled the text. (Image 1 in the link) then hit the right arrow in the inspector ‘list’ and all the leading became scrunched up (2), then I removed bullets and indentation and a new style was created (3) - so I edited the new style to correct the leading problem … fine so far.
I then applied the CSS Menu action and get (4) previewing in browser it looks like (5) removing borders then makes the item in F/way look like (6) … so I think I’ll edit the style again and click in the item to highlight the text and it reverts to (7).
I must be doing something wrong … help please (I know I’m asking a lot - forgive me).
here’s an image
https://dl.dropboxusercontent.com/u/12879319/freeway%20.jpg
many thanks Roger
www.christchurchview.co.uk
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
