There is no EW tool for editing menus.
The menu in a template is an HTML list, using <ul> and <li> tags.
It has been styled using CSS to look like a menu.
These instructions have you extend that simple one-level list
into a nested (two-level) list, which then can be displayed as drop-down menus.
[TBD: Also tell how to replace with
two-row menu.
But first change my two-row example to use nested lists.
Explain that each menu head must link to main page of section.
]
- - - - - download the needed files - - - - -
Go to "Page Templates".
Right-click on "Download all", and save as "Samples.zip".
Open Samples.zip. In folder Samples / layout, find files
. drop-menu.css
. menu.js
Copy these into the "styles" folder of your Organization 1 (or other
template) website.
(Or copy anywhere you like)
- - - - - Attach these two files to master.dwt - - - - -
Open master.dwt.
Format / CSS Styles / Attach Style Sheet,
browse to "drop-menu.css"
Switch to Code view.
Add the following line just before </head>:
<script type="text/javascript" src="styles/menu.js"></script>
NOTE: the "src" property must match the path to where you copied "menu.js".
- - - - - Move the menu to a separate file - - - - -
Make a New HTML Page.
Save it with name "menu.htm".
Switch back to "master.dwt".
Click anywhere inside the menu.
Look near top of screen in the breadcrumbs.
Should be something like
<body> <div#container> <div#navigation> <ul> <li> <a>
with the <a> currently in orange, showing it is selected.
Click on <ul> to select it.
Copy.
Switch back to "menu.htm".
Click anywhere on page.
Paste.
You should now see the menu items as an HTML bulleted list.
This will be easier to edit, to add the sub-menu items.
Switch back to "master.dwt".
Switch to Code view.
<ul> through </ul> should be selected.
Paste over it with:
<!--webbot bot="Include" u-include="menu.htm" tag="BODY" -->
NOTE: if you try doing this with "Split" view, you must re-select the text
within code view itself before pasting in the new line, or you will get
something that looks like:
<!--webbot bot="Include" ...
Save "master.dwt". It asks whether to update attached files, say "yes".
- - - - - Check that the basic menu still works - - - - -
Open one of the attached web pages, such as "default.htm".
Preview in browser.
[TBD: Security warning when local viewing -- tell how to eliminate]
make sure the menu items still hover-highlight, and can be clicked on.
- - - - - Wrap the <ul> in a <div class="menu"> tag - - - - -
[TBD]
- - - - - Add sub-menu items - - - - -
Lets add a sub-menu to the "News" menu.
First, create some additional "News" pages.
For this example, create two pages. Give them page titles "News 1" and "News 2", type something into them, and save them as "news-1.htm" and "news-2.htm".
To each one, do Format / Dynamic Web Template / Attach Dynamic Web Template,
browse to "master.dwt". Now they look like other pages in this website.
Now, to add them as a nested list below the "News" menu head item.
Open "menu.htm" (which you created above).
Click after the 's' in list item "News".
Hit 'Enter' key to start a new line.
Indent this line to start a sub-list (Ctrl-M, or toolbar icon "Increase Indent Position").
Right-click, select "Hyperlink".
OK to close Insert Hyperlink dialog.
Repeat for News 2. See menu.htm.
Save all pages.
Open master.dwt.
News 1 & 2 should appear below "News" -- but they overlap the content text.
This makes it hard to edit that text.
Click on "Heading 2" or on "Insert content here".
In the "breadcrumbs" near top of screen, click on "<div#page_content>".
Format / CSS Properties.
Click "+" by section "Layout".
Click textarea by property "clear".
Click drop-down triangle, select "both". -- TBD NO, THAT ISN'T THE RIGHT FIX
TBD: need to remove "position: relative" from #content & #page-content.
TBD: need to remove the #navigation colors, etc, and move them into drop-menu.css.
-OR- rework drop-menu.css to use #navigation instead of .menu.
Preview any page in browser.
The News sub-menu should appear when you hover over menu
"News".
- - - - - Mark the current page - - - - -
...