pageoneresults - 4:23 pm on Feb 21, 2008 (gmt 0)

Theres got to be loads more, like your nested menu which perhaps you would share?

Hehehe, don't get me started now. I've perfected the nested list element in FP and EWD. If you have your buttons and CSS configured properly, it's just a matter of opening a new page, positioning your cursor where you want the list to appear, click the "Bullets" button (its the one that has the three squares and lines suffixing the sqaures), that starts your <ul> or unordered list. That button and the other list item buttons will remain in your toolbar. Those work from the external stylesheet and the global styles applied to that particular element or that <div> surrounding the elements.

<ul>
<li>List Item 1</li>
<li>List Item 1A</li>
<li>List Item 1B</li>
<li>List Item 1C</li>
<li>List Item 2</li>
<li>List Item 2A</li>
<li>List Item 2B</li>
<li>List Item 2C</li>
<li>List Item 3</li>
<li>List Item 3A</li>
<li>List Item 3B</li>
<li>List Item 3C</li>
</ul>

Once you've got your first level of the list set up, including all your "nested" sub-levels which you won't see yet because you haven't created them, you can now start the process of nesting. All you've done to this point is created a full list of the items that need to be in the list. Here comes the fun part. Next to that "Bullets" button are two buttons labeled Decrease Indent and Increase Indent. When used in conjunction with list elements, this is where you perform your nesting routines. When used by themselves, they create the <blockquote> element.

Now you highlight those <li>'s that need to be nested at the second, third, fourth or however many levels down you are going. You click the "Increase Indent" button (the second button in the series which has a blue arrow pointing right suffixed by lines). You'll notice that those list items <li> just indented and the bullet disappeared (FP only, EWD immediately goes to second level). Okay, this is Step 1 of creating the nest, you are not done yet because one more click of the "Increase Indent" button will now add your second level bullets (FP only). In plain view, you'll see the default list style elements such as discs, squares, open discs, etc. You'll see the nesting hierarchy. All of that will change once your global styles get applied to the list. And, that is the fairly tough part which I'll address toward the end of this reply. Here's an example of what the first nested level might look like in code mode.

<ul>
<li>List Item 1
<ul>
<li>List Item 1A</li>
<li>List Item 1B</li>
<li>List Item 1C</li>
</ul>
</li>
<li>List Item 2
<ul>
<li>List Item 2A</li>
<li>List Item 2B</li>
<li>List Item 2C</li>
</ul>
</li>
<li>List Item 3
<ul>
<li>List Item 3A</li>
<li>List Item 3B</li>
<li>List Item 3C</li>
</ul>
</li>
</ul>

Now that you've created your second level, its time to add a third level. From that second level list of <li>s, you highlight the ones that are to become the third level and perform the same routine. Click once, then twice (FP only) which will give them the default third level list style which again is going to be controlled at the external CSS file. Unfortunately at this point, the level of complexity goes beyond WYSIWYG and we now have the CSS rules to work with. I was lucky to have worked with SuzyUK a few years ago on a CSS menu system using the .htc solution from Peterned. I've been using that ever since and it works flawlessly with FP and EWD once you set everything up. Understanding the CSS is the really tough part. The nesting of the lists is simple. Now, getting them to perform in a dropout/dropdown UI is tricky. :)

You can also structure your lists semantically which is always the recommendation. Use the appropriate list item for the job. The <ul> element is just one of many list items that you can use. There is the <ol> or Ordered List element. The <dl> or Definition List element. Nested <h> elements within the lists, all sorts of "deep" stuff. All of those can be accessed through the default buttons and menus that you have left after preconfiguring your application to work in your environment.

[edited by: pageoneresults at 4:15 pm (utc) on Feb. 22, 2008]