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:
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:
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:
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?
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.