WebYep - Menu Styles

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?

Todd

quote

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?

Todd

quote

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.

 <ul.mylist>
    <li.mylist><a>Link1</a><li> &bull;
    <li.mylist>Link2<li> &bull;
 <ul>

 <ul.mylist>
     <li.mylist><a>Link1 &bull;</a><li>
     <li.mylist><a>Link2 &bull;</a><li>
 <ul>

As far as I can tell it won’t allow me to keep the bullet outside the tag.

quote

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.

So if I coded it manually it would look like this:

<ul.mylist>
   <li.mylist><a>Link1</a><li> &bull;
   <li.mylist>Link2<li> &bull;
<ul>

But what the action does is:

<ul.mylist>
    <li.mylist><a>Link1 &bull;</a><li>
    <li.mylist><a>Link2 &bull;</a><li>
<ul>

As far as I can tell it won’t allow me to keep the bullet outside the tag.

Todd

On Jul 30, 2008, at 1:37 PM, Walter Lee Davis wrote:

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.

quote

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.

That might just work Walt.

quote

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.

That might just work Walt.

quote