Dreamweaver, Spring 2011

Weekly Recap for February 10

by  •  • 11 Comments

Lecture Notes

  • Review Quiz 1
  • Review Project 2
  • Creating a Drop Down Menu navigation system with PHP includes

Assignments

  • Project 3: Drop Down Menu Navigation with PHP includes due February 27.
    Create a new PHP webpage with a UL-based drop down menu navigation system.   You can use the SPRY Menu 2.0 widget, or you can choose another menu system based on Javascript, JQuery, CSS.
    Use a sitemap structure from a large public website with sub-sub menus such as whitehouse.gov.   Store the   sitemap in a separate PHP file that you will include into the main file using php include().
    (Extra credit): Add a second navigation element to the page using the same sitemap, but styled differently than a drop down menu.

11 comments for “Weekly Recap for February 10”

  1. Deb
    February 11, 2011 at 11:49 am

    Jay, my website uses a large number of photos to display my portfolio and I need pages to load quickly. Which menu system loads the fastest, SPRY, Javascript, JQuery or CSS? (This is for a WordPress blog, if that makes any difference.)

    • jayperetz
      February 11, 2011 at 12:23 pm

      Take a look at the tinydropdown menu by leigber – very small footprint with full features and customizable via CSS. Not sure about how to integrate it with a wordpress site.

  2. Mark Alarie
    February 13, 2011 at 2:28 pm

    I have browsed through many websites. I haven’t found many that use 3 levels, many with 2 levels but most of the second levels are links to other pages.

    • jayperetz
      February 13, 2011 at 5:42 pm

      You’re right, I haven’t been able to find any other than the White House. And that was the first one I tried.
      You can use that one, or you can use a 2 level sitemap and add sub levels to some of the selections.

  3. Tom Chadsey
    February 14, 2011 at 7:55 am

    Pressdemocrat uses 3 level navigation –
    http://www.pressdemocrat.com

    Check out superfish – jquery – for WordPress navs.

  4. jayperetz
    February 14, 2011 at 12:03 pm

    pressdemocrat.com has a sort of modified 3 level navigation – there are actually sidebars in several of the dropdowns that are similar to a 3rd sublevel, but not quite. The sitemap is visible in the code and can easily be replicated and modified into a 3 tier sitemap.

  5. jayperetz
    February 14, 2011 at 12:52 pm

    The Superfish Drop Down menu is a jQuery plug-in that is very popular and also has a WordPress plug-in.

  6. Tom Chadsey
    February 14, 2011 at 3:40 pm

    San Diego Union-Tribune site may also be another option…

    http://www.signonsandiego.com/

  7. Mark Alarie
    February 14, 2011 at 3:53 pm

    I found the Baseball Hall of Fame navigation with 3 levels
    Not all the nav items have links but they do popout, etc.

    http://baseballhall.org/

  8. Mark Alarie
    February 23, 2011 at 8:21 pm

    “…The menu is already styled by it’s own style sheet, all we need to do is PREPEND each rule with the nav rule selector…”

    Is there a way to have Dreamweaver do this automatically? I have searched and can’t find anything.

    Mark

  9. jayperetz
    February 23, 2011 at 10:42 pm

    That’s a great question Mark. Dreamweaver has great a great Tag editing facility for HTML markup, there is no similar tool for doing complex global search & replace for CSS rules.

    In many cases you just have to use text-based search & replace on stylesheets, and do so very carefully. For example, using the Superfish menu I prepended “nav” to all of the selectors starting with sf-menu, but this broke several of the rules where the selector was written as ul.sf-menu.

Comments are closed.