This script presents an HTML unordered list (<ul>
) as an icon bar similar to the Mac OS X dock. The top-level items are presented as icons (which zoom in when the mouse moves near) and the secondary lists as popup menus.
This script will only work on a properly formed HTML unordered list (<ul>
). For example:
<ul id="navigation">
<li id="item1"><a href="url">Label</a></li>
<li id="item2">Label
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
The script style is most easily applied to the element as a ScriptSheet. By default it will match <ul>
elements with a class
or id
of "navigation". You may override that by setting the OSXBar.scriptSheetSelector
to your own CSS selector string.
If you wish to use the script outside the ScriptSheet framework, you can call it like var bar = new OSXBar(elt, edge, minSize, maxSize, iconSpacing, scaleReach);
where:
elt
<ul>
Element node to be styled.edge
"left"
, "top"
, "right"
, or "bottom"
.minSize
maxSize
iconSpacing
scaleReach
Known to work in Mozilla 1.3+, MSIE 5.0+ (icon PNG alpha transparency in MSIE5.5+ only)
The contents of this file are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.mozilla.org/MPL/
Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language governing rights and limitations under the License.
The Initial Developer of the Original Code is Jason Johnston (jj{at}lojjic[dot]net). Portions created by the Initial Developer are Copyright (C) 2004 the Initial Developer. All Rights Reserved.
This code is provided for you to use free of charge. If you find it useful please consider making a donation to help me continue to create tools like this one. You can find my contact info at http://lojjic.net.