PHP-Like Menu for iWeb

Posted July 25, 2011 by Kathy Davie in Book Reviews

I like to play in Apple’s iWeb. I especially like to play with pushing it past its limitations and creating dropdown menus in it. One menu which I created for a genealogy website,Family Tree, is similar to the concept of a php menu.

An iWeb Menu

iWeb creates a horizontal menu for you at the top of each page. It works fine if you don’t have too many links. Once you start getting complicated, you can end up with a web page, which is half eaten up with links. Hence the usefulness of a dropdown menu. A dropdown menu which you can drop in with an HTML Snippet.

iWeb’s HTML Snippet widget is a useful little creature. Just about anything you can code can be pasted into a snippet and positioned on a web page—including dropdown menus. Just include the CSS, the JavaScript, and the HTML in one file. Then cut-and-paste it into the snippet you dragged onto your iWeb page.

A Custom iWeb Menu Has Its Issues

Most of the websites I create in iWeb need a custom menu. The negative side of this is that for every tiny change you make to the menu on one page, it has to be changed on every single page in the website. The old, very, very old cut-and-paste. Admittedly, I love that iWeb will paste whatever you’ve copied into the same x-y dimensions as it was originally, but you still have to select the object you are replacing.

PHP-like Menu Solves the Multiple-Changes Issue

A php menu is one file connected to every page in a website with an external link. Make one (or 40) changes in that external menu file and the change is reflected in every page to which it is linked. A standard menu (not php) has to be changed in every single web page. Yes, you can simply cut-and-paste. But it still has to be done on every single web page.

Menu From DHTML Goodies

I used a sliding menu from DHTML Goodies which I tweaked to suit the parameters of the website after I created an external HTML file in a standard web editor. I ran into a few issues and got some help from the people at Apple, specifically, Senda Shallow and Gabe Walford.

The first problem was that the dropdowns were moving so fast we were getting dizzy and Senda suggested we change the onclick to onmouseover and we changed the timing as well, which helped slow the flickering down. The next problem involved the <a href="#"> link which wasn’t supposed to go anywhere. Yeah, right. The dropdown link kept leaping over to its very own page and nothing we googled on the ‘net was helping until Gabe suggested we create an <iframe> for it.

The <iframe> is brilliant! There are three key points: include a target="_top" in the HTML, create a “menu” page in iWeb, and build an <iframe> snippet on your home page.

Add target=”_top” in your HTML

  • <div id=”dhtmlgoodies_slidedown_menu“>
    • <ul>
      • <li><a href=”http://…/home.html” target=”_top”>HOME</a></li>
      • <li><a href=”#“>BLOG</a>
        • <ul>
          • <li><a href=”http://…/blog.html” target=”_top”>Blog</a></li>
          • <li><a href=”http://…/Archive.html” target=”_top”>Archives</a></li>
          • <li><a href=”feed://…rss.xml” target=”_top”>Subscribe</a></li>
        • </ul>
      • </li>
    • </ul>
  • <div>

Note that the only link which did NOT receive a target="_top" was the “BLOG” which has an address of <a href="#">.

<a href="#"> is a nowhere link. It doesn’t take the viewer anywhere. You must repeat your primary dropdown text (Blog, About, My Publications, whatever) in the second layer of the dropdown if there is such a page and you want to link to it. If you created a real link, the viewer wouldn’t have time to use the resulting dropdowns before the browser whisked him/her off to that primary page. Try it. You’ll see it my way…!

Create a “Menu” Page in iWeb

  1. Create a blank page in iWeb
    1. Name it “menu”
    2. Drag in an HTML Snippet
    3. Paste the CSS-JavaScript-HTML menu into the snippet
  2. Publish the site
  3. In the browser’s location bar, manually change the “home.html” URL to read “menu.html”
    1. Once your menu-only page appears in the browser window, copy the URL

Create an <iframe> Snippet

  1. Back in iWeb, drag in a new HTML Snippet onto your home page
    1. In the snippet, type: <iframe src=”
    2. Paste the menu-only URL in, probably something like menu_files_widget0_markup.html“
  1. Note the double forward slash just before “menu”
  1. Give it some style with:
    1. <iframe frameborder=”0” scrolling=”no” width=”” height=”880” margin-left:” ” margin-top=”0” target=”_parent“>
      </iframe>
      1. An expanding menu, like a dropdown, takes up space when the viewer clicks on a dropdown link. In a standard, coded website, a z-index allows for layers. iWeb does not allow for layers so you have to physically allow for the maximum amount of extra space the menu will require, which is why I have specified “880” for a height.
  1. Deselect the HTML Snippet on your homepage and reselect it
  2. Copy it
  3. Now paste it onto every web page in your site
  4. Save
  5. Publish

Check it out on the Internet. Play with the menu. The best part of this is whenever you want or need to make a change to this menu, you only have to change it in one file—the “menu”. And Save and upload it of course!

Legend
  Purple is the property coding
  Orange is the information particular to your requirements
  Green is the hyperlink coding
«
»