[Pro] CSS menu indent question

Is there a way to indent a portion of a vertical CSS menu list? I would the menu to look like this on the website:

ITEM ONE
ITEM TWO
ITEM THREE
ITEM FOUR
ITEM FIVE

Many thanks for any help.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As you may have found, indenting another level means that the Action will create a sub-sub-menu out of these elements. You could make these items indent with pure CSS, but what is the meaning behind this indent? What will it mean to the user? You may want to stick with the actual indent and resulting sub-sub-menu depending on that meaning.

The CSS to do this is likely to be very specific to your exact menu, and you’ll need to post a link to show us your page in order for anyone to give you the exact “incantation”, but the basic premise would be something like this:

#fwNav1 > .fwNavItem:nth-of-type(2) .sub > .fwNavItem:nth-of-type(3) { padding-left: 1em }
#fwNav1 > .fwNavItem:nth-of-type(2) .sub > .fwNavItem:nth-of-type(4) { padding-left: 1em }

As you can see, that is extremely specific, and thus very fragile should you make changes later. It also doesn’t lend itself well to application on any other site without working out the precise offsets needed. Finally, I believe it stops working around IE 8 or so, so backward compatibility is going to be something of an issue. Thankfully, this is something that would lend itself to the notion of “progressive enhancement”, in that it is something that you don’t absolutely NEED in order to navigate the site. It’s a grace note on top of the rest of the usable content.

Walter

On Jul 13, 2014, at 8:25 AM, kingofsquid wrote:

Is there a way to indent a portion of a vertical CSS menu list? I would the menu to look like this on the website:

ITEM ONE
ITEM TWO
ITEM THREE
ITEM FOUR
ITEM FIVE

Many thanks for any help.


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

Thanks for the quick response. The website is here:

I’d like to add a new item in the middle of the menu list called Older Works:

Below it would be five of the existing menu items, each indented maybe two spaces.

I thought it would look better this way but it seems there is no easy way to do it (I’m no expert).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, the easy way to do this would be to make the “older works” header the trigger to open up a sub-sub menu of those older works. The Action does this for you automatically. Just click into the HTML box containing the source list for the menu, highlight the list items for the “older” works (but not the list item before them) and use the right-pointing arrow button in the List Inspector to indent them to another level. Preview in the browser, and see if that looks good to you.

Walter

On Jul 13, 2014, at 8:53 AM, kingofsquid wrote:

Thanks for the quick response. The website is here:

www.annekrinsky.com

I’d like to add a new item in the middle of the menu list called Older Works:

Below it would be five of the existing menu items, each indented maybe two spaces.

I thought it would look better this way but it seems there is no easy way to do it (I’m no expert).


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

I tried that but the older menu items became invisible unless I clicked on Older Works:

When I did click on it, they all appeared to the right side. Is there a setting to make them appear all the time on the menu list and only indented a couple of spaces?

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jul 13, 2014, at 9:02 AM, kingofsquid wrote:

I tried that but the older menu items became invisible unless I clicked on Older Works:

Yes, that’s how this easy method would work.

When I did click on it, they all appeared to the right side. Is there a setting to make them appear all the time on the menu list and only indented a couple of spaces?

Only if you configure all of your menus to appear that way, and I’m not sure there are settings in the Action that would let you do that precisely. Tim Plumb may know, he’s done a ton of work around styling these menus.

If you wanted to make the list appear the way you describe, then you could try the harder way, using the long-hand CSS declaration I outlined for you earlier. Restore your menu to your original settings, and publish again, and I’ll see if there’s a simple way to declare this for the desired indent.

Walter

Thanks again.


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