A set of JavaScript classes based on Prototype which provide features like menus and lists.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Version 1.2 - Source available on GitHub.

Copyright 2006-2010 Joachim Fornallaz. All rights reserved.


PageKit is a set of JavaScript classes based on Prototype which provide features like menus and lists.


PageMenu is a JavaScript Class which allows you to add menus to a html page. It is completely unobtrusive and requires one JavaScript- and one CSS-file to be included.


  • Use of semantically correct HTML code
  • Arbitrary numbers of menu-bars and menus
  • Menus are displayed when clicking on or hovering over a menu title
  • An open menu is closed if the mouse has left the menu for a certain amount of time
  • Visual feedback when mouse is hovering over menu-title
  • Each menu can have a different visual style
  • Works with Firefox 1.x, Safari 2.x and IE 6.0


Copy javascripts/pagemenu.js and stylesheets/pagemenu.css to your website. Also, make sure that Prototype is present.

Include both file in the HTML header of the page you want to be using PageMenu:

<link rel="stylesheet" media="screen" type="text/css" href="stylesheets/pagemenu.css">
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/pagemenu.js" type="text/javascript"></script>

Create following structure for a menu-bar:

<ul class="menubar">
      <a class="menutitle" href="#">Home</a>
      <label for="editmenu" class="menutitle">Edit</label>
      <ul id="editmenu" class="menu">
         <li><a href="#">Copy</a></li>
         <li><a href="#">Cut</a></li>
         <li><a href="#">Paste</a></li>

This menu-bar consists of one title without a menu and a second title having a menu attached. It is important to use the same element classes as shown in this example.

For adding a custom style, add a CSS class to first-level LI elements like this:

<ul class="menubar">
   <li class="special">
      <label for="filemenu" class="menutitle">File</label>
      <ul id="filemenu" class="menu">
         <li><a href="#">New</a></li>

         <li><a href="#">Open</a></li>
         <li><a href="#">Save</a></li>
         <li><a href="#">Save As...</a></li>


With PageList, you can define lists which have selectable elements. Select several elements using modifier keys, such as shift to select ranges or control/command to select individual elements.