Maaskant Projecten — How To

_MyMenu_

 

Maaskant is a quick iWeb project that uses a custom menu + a shaded background image.

To clarify :

  1. I.The title in the browser title bar is from a hidden textbox behind the menu.
    The text is made invisible with the opacity slider in the color palette.

  2. II.A JavaScript in a HTML Snippet at the bottom of the page, but outside the visible area, adds a JavaScript to the <head> of this page : maas_menu.js

  3. III.The maas_menu.js  JavaScript in the <head> loads a Stylesheet (maas_menu.css), a text file with the menu (maas_menu.txt) and the shaded background image (MaaskantShade.png).

  4. IV.The menu is added to a textbox in the Header layer of the page. It has a unique word, _MyMenu_, which the maas_menu.js JavaScript will find and replace with the menu.

  5. V.The JavaScript in the HTML Snippet adds a class to a menu item with the same name as the page. You’ll notice a slight delay to allow time for the browser to build the page.

You can download this iWeb site (the domain file) plus a folder with the external files and use them for your own pleasure.

Put the Maaskant.sites2 file in folder : ~/Library/Application Support/iWeb/ where ~ is your Home directory and double-click the file to open it in iWeb. Use iWebSites to merge the file with other domain files.

The Maaskant Site should be published by iWeb as usual.

The Maaskantassets folder should be outside the Maaskant folder on the server.

The maas_menu.js JavaScript uses a relative path to the files in the Maaskantassets folder : ../Maaskantassets.

You can edit the maas_menu.css stylesheet to change the colors and font of the menu.

You may have to learn HTML, CSS and JavaScript.

The pages are designed to fit an iPad display without scrolling.

More iPad friendly pages here : http://www.wyodor.net/mfi