I was experimenting with the WY menu action and had a question about
styling menus. Let’s say you have a simple horizontal menu with 10
links and between each link is a bullet:
link1 <bullet> link2 <bullet>
Naturally the links use a ul style and the bullets use the default
body style. The problem with using the WY menu action is that there’s
no way (that I can see) to differentiate between the link and the
bullet so the bullet ends up as part of the link. I could use a
separate menu action for each menu link as opposed to one action for
the entire menu but that seems a bit clunky or suppose I could use a
long/rich text item and add the appropriate tags manually but that’s
a bit much for a non-technical client to manage. So the question is
is there a way to maintain different styles using the menu action?
The only way I can think of to have the bullet be part of the link
would be to suppress the regular bullet:
li.yourClass { list-style-type: none; }
… and then manually add the bullets back in: • or Option-8
on a US keyboard in regular Freeway text.
Otherwise, the bullet is expressly not a part of the LI’s content,
it’s an outside “marker” to indicate where the LI starts.
Walter
On Jul 30, 2008, at 1:25 PM, Todd wrote:
I was experimenting with the WY menu action and had a question about
styling menus. Let’s say you have a simple horizontal menu with 10
links and between each link is a bullet:
link1 <bullet> link2 <bullet>
Naturally the links use a ul style and the bullets use the default
body style. The problem with using the WY menu action is that there’s
no way (that I can see) to differentiate between the link and the
bullet so the bullet ends up as part of the link. I could use a
separate menu action for each menu link as opposed to one action for
the entire menu but that seems a bit clunky or suppose I could use a
long/rich text item and add the appropriate tags manually but that’s
a bit much for a non-technical client to manage. So the question is
is there a way to maintain different styles using the menu action?
I should have been more clear, I did remove the list-style and the bullets are manually added back in after each link. What the WY menu action does is wrap everything on the same line in an tag which is not what’s needed.
Add the bullet back in as a background image on the a, using the
position right center to pop it over to the end, and right padding to
force it out of the box.
li.mystyle a {
background: url(icns/bullet_blue.png) no-repeat right center;
padding-right: 16px;
}
li.mystyle {
list-style-type: none;
}
Walter
On Jul 30, 2008, at 2:47 PM, Todd wrote:
I should have been more clear, I did remove the list-style and the
bullets are manually added back in after each link. What the WY
menu action does is wrap everything on the same line in an tag
which is not what’s needed.
If you were using a loop the bullets could be placed in Freeway between the WY fields and would get added, but I don’t see how you can do the same with menu.
Add the bullet back in as a background image on the a, using the position right center to pop it over to the end, and right padding to force it out of the box.
Walter, yes, I could add it via CSS but I was hoping to avoid using a graphic.
chuckamuck, I’ll have to look at the loop as I haven’t investigated what it does in depth yet.
I know there are at least a couple ways around this minor problem, none of them difficult, but I want to find the easiest method for the client and so far the CSS approach is probably the best option.
Thanks Guys.
Todd
On Jul 30, 2008, at 5:55 PM, chuckamuck wrote:
If you were using a loop the bullets could be placed in Freeway between the WY fields and would get added, but I don’t see how you can do the same with menu.
Add the bullet back in as a background image on the a, using the position right center to pop it over to the end, and right padding to force it out of the box.