[Linpha-cvs] SF.net SVN: linpha: [4833] trunk/misc/design
Status: Inactive
Brought to you by:
bzrudi
Menu
▾
▴
[Linpha-cvs] SF.net SVN: linpha: [4833] trunk/misc/design
|
From: <fan...@us...> - 2008-01-29 21:15:00
|
Revision: 4833
http://linpha.svn.sourceforge.net/linpha/?rev=4833&view=rev
Author: fangehrn
Date: 2008-01-29 13:14:57 -0800 (Tue, 29 Jan 2008)
Log Message:
-----------
Modified Paths:
--------------
trunk/misc/design/22menuJSCook/indexJSEffectFade.php
trunk/misc/design/info.txt
Added Paths:
-----------
trunk/misc/design/24menuMygosumenu/
trunk/misc/design/24menuMygosumenu/XulMenu.js
trunk/misc/design/24menuMygosumenu/XulMenu.txt
trunk/misc/design/24menuMygosumenu/example1-cache.html
trunk/misc/design/24menuMygosumenu/example1-cache.js
trunk/misc/design/24menuMygosumenu/example1.css
trunk/misc/design/24menuMygosumenu/example1.html
trunk/misc/design/24menuMygosumenu/example2.css
trunk/misc/design/24menuMygosumenu/example2.html
trunk/misc/design/24menuMygosumenu/global.css
trunk/misc/design/24menuMygosumenu/home.css
trunk/misc/design/24menuMygosumenu/images/
trunk/misc/design/24menuMygosumenu/images/arrow1.gif
trunk/misc/design/24menuMygosumenu/images/arrow2.gif
trunk/misc/design/24menuMygosumenu/index.php
trunk/misc/design/25menuDickerFisch/
trunk/misc/design/25menuDickerFisch/global.css
trunk/misc/design/25menuDickerFisch/home.css
trunk/misc/design/25menuDickerFisch/horizontal.html
trunk/misc/design/25menuDickerFisch/ie6.css
trunk/misc/design/25menuDickerFisch/ie7.css
trunk/misc/design/25menuDickerFisch/index.php
trunk/misc/design/25menuDickerFisch/index2.php
trunk/misc/design/25menuDickerFisch/jq_dickerfisch_menue-c.js
trunk/misc/design/25menuDickerFisch/jq_dickerfisch_menue.js
trunk/misc/design/25menuDickerFisch/jquery.js
trunk/misc/design/25menuDickerFisch/optional/
trunk/misc/design/25menuDickerFisch/optional/cookie.js
trunk/misc/design/25menuDickerFisch/optional/dimensions-c.js
trunk/misc/design/25menuDickerFisch/optional/dimensions.js
trunk/misc/design/25menuDickerFisch/optional/jq.cleanCSSanim.js
trunk/misc/design/25menuDickerFisch/rightarrow2.gif
trunk/misc/design/25menuDickerFisch/style.css
Modified: trunk/misc/design/22menuJSCook/indexJSEffectFade.php
===================================================================
--- trunk/misc/design/22menuJSCook/indexJSEffectFade.php 2008-01-29 21:13:19 UTC (rev 4832)
+++ trunk/misc/design/22menuJSCook/indexJSEffectFade.php 2008-01-29 21:14:57 UTC (rev 4833)
@@ -18,10 +18,10 @@
<link rel="stylesheet" href="../14cornersSchill/roundCorners.css" media="screen" />
-<script type="text/javascript" src="./JSCookMenu/JSCookMenu.js"></script>
-<script type="text/javascript" src="./JSCookMenu/effect.js"></script>
+<!-- <script type="text/javascript" src="./JSCookMenu/JSCookMenu.js"></script>
+<script type="text/javascript" src="./JSCookMenu/effect.js"></script> -->
-<!-- <script type="text/javascript" src="./JSCookMenu/JSCookMenuPacked4.js"></script> -->
+<script type="text/javascript" src="./JSCookMenu/JSCookMenuPacked62.js"></script>
<link rel="stylesheet" href="./JSCookMenu/ThemePanelLinpha/theme.css" type="text/css">
<script type="text/javascript" src="./JSCookMenu/ThemePanelLinpha/theme.js"></script>
Added: trunk/misc/design/24menuMygosumenu/XulMenu.js
===================================================================
--- trunk/misc/design/24menuMygosumenu/XulMenu.js (rev 0)
+++ trunk/misc/design/24menuMygosumenu/XulMenu.js 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,322 @@
+/*
+ * DO NOT REMOVE THIS NOTICE
+ *
+ * PROJECT: mygosuMenu
+ * VERSION: 1.4.2
+ * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
+ * LINK: http://gosu.pl/dhtml/mygosumenu.html
+ * LICENSE: BSD (revised)
+ */
+
+function XulMenu(id) {
+
+ this.type = "horizontal";
+ this.position = {
+ "level1": { "top": 0, "left": 0},
+ "levelX": { "top": 0, "left": 0}
+ }
+ this.zIndex = {
+ "visible": 1,
+ "hidden": -1
+ }
+ this.arrow1 = null;
+ this.arrow2 = null;
+
+ // Browser detection
+ this.browser = {
+ "ie": Boolean(document.body.currentStyle),
+ "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
+ };
+ if (!this.browser.ie) { this.browser.ie5 = false; }
+
+ /* Initialize the menu */
+ this.init = function() {
+ if (!document.getElementById(this.id)) alert("Element '"+ this.id +"' does not exist in this document. XulMenu cannot be initialized.");
+ if (this.type != "horizontal" && this.type != "vertical") { return alert("XulMenu.init() failed. Unknown menu type: '"+this.type+"'"); }
+ document.onmousedown = click;
+ if (this.browser.ie && this.browser.ie5) { this.fixWrap(); }
+ this.fixSections();
+ this.parse(document.getElementById(this.id).childNodes, this.tree, this.id);
+ }
+
+ /* Search for .section elements and set width for them */
+ this.fixSections = function() {
+ var arr = document.getElementById(this.id).getElementsByTagName("div");
+ var sections = new Array();
+ var widths = new Array();
+
+ for (var i = 0; i < arr.length; i++) {
+ if (arr[i].className == "section") {
+ sections.push(arr[i]);
+ }
+ }
+ for (var i = 0; i < sections.length; i++) {
+ widths.push(this.getMaxWidth(sections[i].childNodes));
+ }
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.width = (widths[i]) + "px";
+ }
+ if (self.browser.ie) {
+ for (var i = 0; i < sections.length; i++) {
+ this.setMaxWidth(sections[i].childNodes, widths[i]);
+ }
+ }
+ }
+
+ this.fixWrap = function() {
+ var elements = document.getElementById(this.id).getElementsByTagName("a");
+ for (var i = 0; i < elements.length; i++) {
+ if (/item/.test(elements[i].className)) {
+ elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
+ }
+ }
+ }
+
+ /* Search for an element with highest width, return that width */
+ this.getMaxWidth = function(nodes) {
+ var maxWidth = 0;
+ for (var i = 0; i < nodes.length; i++) {
+ if (nodes[i].nodeType != 1 || nodes[i].className == "section") { continue; }
+ if (nodes[i].offsetWidth > maxWidth) maxWidth = nodes[i].offsetWidth;
+ }
+ return maxWidth;
+ }
+
+ /* Set width for item elements */
+ this.setMaxWidth = function(nodes, maxWidth) {
+ for (var i = 0; i < nodes.length; i++) {
+ if (nodes[i].nodeType == 1 && /item/.test(nodes[i].className) && nodes[i].currentStyle) {
+ if (this.browser.ie5) {
+ nodes[i].style.width = (maxWidth) + "px";
+ } else {
+ nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
+ }
+ }
+ }
+ }
+
+ /* Parse menu structure, create events, position elements */
+ this.parse = function(nodes, tree, id) {
+ for (var i = 0; i < nodes.length; i++) {
+ if (nodes[i].nodeType != 1) { continue };
+ switch (nodes[i].className) {
+ case "button":
+ nodes[i].id = id + "-" + tree.length;
+ tree.push(new Array());
+ nodes[i].onmouseover = buttonOver;
+ nodes[i].onclick = buttonClick;
+ break;
+ case "item":
+ nodes[i].id = id + "-" + tree.length;
+ tree.push(new Array());
+ nodes[i].onmouseover = itemOver;
+ nodes[i].onmouseout = itemOut;
+ nodes[i].onclick = itemClick;
+ break;
+ case "section":
+ nodes[i].id = id + "-" + (tree.length - 1) + "-section";
+ var box1 = document.getElementById(id + "-" + (tree.length - 1));
+ var box2 = document.getElementById(nodes[i].id);
+ var el = new Element(box1.id);
+ if (el.level == 1) {
+ if (this.type == "horizontal") {
+ box2.style.top = (box1.offsetTop + box1.offsetHeight + this.position.level1.top) + "px";
+ if (this.browser.ie5) {
+ box2.style.left = (this.position.level1.left) + "px";
+ } else {
+ box2.style.left = (box1.offsetLeft + this.position.level1.left) + "px";
+ }
+ } else if (this.type == "vertical") {
+ box2.style.top = (box1.offsetTop + this.position.level1.top) + "px";
+ if (this.browser.ie5) {
+ box2.style.left = (box1.offsetWidth + this.position.level1.left) + "px";
+ } else {
+ box2.style.left = (box1.offsetLeft + box1.offsetWidth + this.position.level1.left) + "px";
+ }
+ }
+ } else {
+ box2.style.top = (box1.offsetTop + this.position.levelX.top) + "px";
+ box2.style.left = (box1.offsetLeft + box1.offsetWidth + this.position.levelX.left) + "px";
+ }
+ break;
+ case "arrow":
+ nodes[i].id = id + "-" + (tree.length - 1) + "-arrow";
+ break;
+ }
+ if (nodes[i].childNodes) {
+ if (nodes[i].className == "section") {
+ this.parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
+ } else {
+ this.parse(nodes[i].childNodes, tree, id);
+ }
+ }
+ }
+ }
+
+ /* Hide all sections */
+ this.hideAll = function() {
+ for (var i = this.visible.length - 1; i >= 0; i--) {
+ this.hide(this.visible[i]);
+ }
+ }
+
+ /* Hide higher or equal levels */
+ this.hideHigherOrEqualLevels = function(n) {
+ for (var i = this.visible.length - 1; i >= 0; i--) {
+ var el = new Element(this.visible[i]);
+ if (el.level >= n) {
+ this.hide(el.id);
+ } else {
+ return;
+ }
+ }
+ }
+
+ /* Hide a section */
+ this.hide = function(id) {
+ var el = new Element(id);
+ document.getElementById(id).className = (el.level == 1 ? "button" : "item");
+ if (el.level > 1 && this.arrow2) {
+ document.getElementById(id + "-arrow").src = this.arrow1;
+ }
+ document.getElementById(id + "-section").style.visibility = "hidden";
+ document.getElementById(id + "-section").style.zIndex = this.zIndex.hidden;
+ if (this.visible.contains(id)) {
+ if (this.visible.getLast() == id) {
+ this.visible.pop();
+ } else {
+ throw "XulMenu.hide("+id+") failed, trying to hide element that is not deepest visible element";
+ }
+ } else {
+ throw "XulMenu.hide("+id+") failed, cannot hide element that is not visible";
+ }
+ }
+
+ /* Show a section */
+ this.show = function(id) {
+ var el = new Element(id);
+ document.getElementById(id).className = (el.level == 1 ? "button-active" : "item-active");
+ if (el.level > 1 && this.arrow2) {
+ document.getElementById(id + "-arrow").src = this.arrow2;
+ }
+ document.getElementById(id + "-section").style.visibility = "visible";
+ document.getElementById(id + "-section").style.zIndex = this.zIndex.visible;
+ this.visible.push(id);
+ }
+
+ /* event, document.onmousedown */
+ function click(e) {
+ var el;
+ if (e) {
+ el = e.target.tagName ? e.target : e.target.parentNode;
+ } else {
+ el = window.event.srcElement;
+ if (el.parentNode && /item/.test(el.parentNode.className)) {
+ el = el.parentNode;
+ }
+ }
+ if (!self.visible.length) { return };
+ if (!el.onclick) { self.hideAll(); }
+ }
+
+ /* event, button.onmouseover */
+ function buttonOver() {
+ if (!self.visible.length) { return; }
+ if (self.visible.contains(this.id)) { return };
+ self.hideAll();
+ var el = new Element(this.id);
+ if (el.hasChilds()) {
+ self.show(this.id);
+ }
+ }
+
+ /* event, button.onclick */
+ function buttonClick() {
+ this.blur();
+ if (self.visible.length) {
+ self.hideAll();
+ } else {
+ var el = new Element(this.id);
+ if (el.hasChilds()) {
+ self.show(this.id);
+ }
+ }
+ }
+
+ /* event, item.onmouseover */
+ function itemOver() {
+ var el = new Element(this.id);
+ self.hideHigherOrEqualLevels(el.level);
+ if (el.hasChilds()) {
+ self.show(this.id);
+ }
+ }
+
+ /* event, item.onmouseout */
+ function itemOut() {
+ var el = new Element(this.id);
+ if (!el.hasChilds()) {
+ document.getElementById(this.id).className = "item";
+ }
+ }
+
+ /* event, item.onclick */
+ function itemClick() {
+ this.blur();
+ var el = new Element(this.id);
+ self.hideHigherOrEqualLevels(el.level);
+ if (el.hasChilds()) {
+ self.show(this.id);
+ }
+ }
+
+ function Element(id) {
+
+ /* Get Level of given id
+ * Examples: menu-1 (1 level), menu-1-4 (2 level) */
+ this.getLevel = function() {
+ var s = this.id.substr(this.menu.id.length);
+ return s.substrCount("-");
+ }
+
+ /* Check whether an element has a sub-section */
+ this.hasChilds = function() {
+ return Boolean(document.getElementById(this.id + "-section"));
+ }
+
+ if (!id) { throw "XulMenu.Element(id) failed, id cannot be empty"; }
+ this.menu = self;
+ this.id = id;
+ this.level = this.getLevel();
+ }
+
+ this.id = id;
+ var self = this;
+
+ this.tree = new Array(); /* Multidimensional array, structure of the menu */
+ this.visible = new Array(); /* Example: Array("menu-0", "menu-0-4", ...), succession is important ! */
+}
+
+/* Check whether array contains given string */
+if (typeof Array.prototype.contains == "undefined") {
+ Array.prototype.contains = function(s) {
+ for (var i = 0; i < this.length; i++) {
+ if (this[i] === s) { return true; }
+ }
+ return false;
+ }
+}
+
+/* Get the last element from the array */
+if (typeof Array.prototype.getLast == "undefined") {
+ Array.prototype.getLast = function() {
+ return this[this.length-1];
+ }
+}
+
+/* Counts the number of substring occurrences */
+if (typeof String.prototype.substrCount == "undefined") {
+ String.prototype.substrCount = function(s) {
+ return this.split(s).length - 1;
+ }
+}
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/XulMenu.txt
===================================================================
--- trunk/misc/design/24menuMygosumenu/XulMenu.txt (rev 0)
+++ trunk/misc/design/24menuMygosumenu/XulMenu.txt 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,130 @@
+----------------
+INSTALL
+----------------
+
+1) include .css file
+2) include .js file
+3) put html structure
+4) initialize menu
+
+Html structure is:
+
+- XulMenu
+ - button
+ - section
+ - item
+ - item
+ - item
+ - section
+ - item
+ - item
+ - item
+ - item
+ - button
+ - section
+ - item
+ - item
+ - button
+
+Example of initializing:
+ var menu = new XulMenu("id_of_the_menu");
+ menu.init();
+
+Example of initializing and setting additional stuff:
+ var menu1 = new XulMenu("menu1");
+ menu1.type = "horizontal";
+ menu1.position.level1.top = 0;
+ menu1.position.level1.left = 0;
+ menu1.position.levelX.top = 0;
+ menu1.position.levelX.left = 0;
+ menu1.arrow1 = "images/arrow.gif";
+ menu1.arrow2 = "images/arrow-active.gif";
+
+Note:
+ arrow1 & arrow2 set only when you want the arrow image to change when
+ element is active. If you don't want the arrow to change keep both variables empty.
+
+----------------
+API
+----------------
+
+Controlling the menu:
+
+ show(id)
+ hide(id)
+ hideAll()
+ hideHigherOrEqualLevels(n)
+
+ id = id of the element
+ n = level
+
+ examples:
+
+ 1)
+ menu1.show("menu1-1");
+
+ 2)
+ menu1.show("menu1-1");
+ menu1.show("menu1-1-2");
+ menu1.show("menu1-1-2-0");
+ menu1.hideHigherOrEqualLevels(2);
+
+ Both examples show the same.
+
+----------------
+CACHING
+----------------
+
+If the menu is big, for example you want the whole structure of the site in the menu
+and it is 50 KB then you should cache this data, so the user downloads this code only
+once and not on each request.
+
+See files: example1-cache.html, example1-cache.js
+
+example1-cache.html - instead of menu structure put this:
+<script type="text/javascript" src="example1-cache.js"></script>
+
+example1-cache.js - the code with removed whitespace characters and some js code:
+document.write('... code of the menu with removed spaces and new lines ...');
+
+Advantages: reduce bandwidth, faster page loading
+Disadvantages: the links won't be visible to search engines
+
+Note:
+ Removing whitespace characters from the menu code is easy with this tool:
+ http://gosu.pl/demo/dhtml-tools/String.replace.html
+ 1) In "Before" put the menu code.
+ 2) In "Regexp" put this: \s*(<[^>]*>)
+ 3) In "NewSubStr" put this: $1
+ Click Replace and it's done !
+
+----------------
+FEATURES
+----------------
+
+- horizontal or vertical menu
+- unlimited nesting
+- can be positioned statically or absolutely
+- position of submenus can be changed, so they can for example overflow parent elements
+- on the same page there can be many menus created
+- seperated into 3 layers: behaviour(javascript), structure(html), presentation(css)
+- search engine friendly
+- free for any use (BSD license)
+
+----------------
+COMPATIBILITY
+----------------
+
+Tested on: IE, Mozilla, Opera, Safari, Netscape, Firefox
+
+----------------
+CHANGELOG
+----------------
+
+*** 1.4.2 ***
+
+ - added support for IE 5.0 & IE 5.5
+
+*** 1.4.1 ***
+
+ - [js] fixed a minor bug, onclick event
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example1-cache.html
===================================================================
--- trunk/misc/design/24menuMygosumenu/example1-cache.html (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example1-cache.html 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>#1.4 XulMenu example 1</title>
+ <link rel="stylesheet" type="text/css" href="example1.css" />
+ <script type="text/javascript" src="../ie5.js"></script>
+ <script type="text/javascript" src="XulMenu.js"></script>
+ <style type="text/css">
+ body { margin: 0; padding: 0; background: #ffffff; }
+ #bar {
+ background: #ECE9D8;
+ border: 1px solid;
+ border-color: #ffffff #ACA899 #ACA899 #ffffff;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ cursor: default;
+ }
+ #menu1 { padding-left: 5px; }
+ #search {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ }
+ #search input,
+ #search select {
+ font-family: georgia, tahoma, verdana;
+ font-size: 12px;
+ margin-top: 4px;
+ }
+ </style>
+</head>
+<body>
+
+ <script type="text/javscript">
+ /* preload images */
+ var arrow1 = new Image(4, 7);
+ arrow1.src = "images/arrow1.gif";
+ var arrow2 = new Image(4, 7);
+ arrow2.src = "images/arrow2.gif";
+ </script>
+
+ <div id="bar">
+
+ <script type="text/javascript" src="example1-cache.js"></script>
+
+ <div id="search">
+ <input type="text" name="searchField" value="" />
+ <select name="searchWhat"><option value="">Articles</option><option value="">Links</option><option value="">PHP Manual</option></select>
+ <input type="button" value="Search" />
+ </div>
+
+ </div>
+
+ <script type="text/javascript">
+ var menu1 = new XulMenu("menu1");
+ menu1.arrow1 = "images/arrow1.gif";
+ menu1.arrow2 = "images/arrow2.gif";
+ menu1.init();
+ </script>
+
+</body>
+</html>
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example1-cache.js
===================================================================
--- trunk/misc/design/24menuMygosumenu/example1-cache.js (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example1-cache.js 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1 @@
+document.write('<table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu"><tr><td><a class="button" href="javascript:void(0)">Viewer</a><div class="section"><a class="item" href="example1.html">Home</a><a class="item" href="example1.html">Close</a></div></td><td><a class="button" href="javascript:void(0)">Articles</a><div class="section"><a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Advocacy One</a><a class="item" href="example1.html">Advocacy Two</a><a class="item" href="example1.html">Advocacy Three</a><a class="item" href="example1.html">Advocacy Four</a><a class="item" href="example1.html">Advocacy Five</a><a class="item" href="example1.html">Advocacy Six</a><a class="item" href="example1.html">Advocacy Seven</a></div><a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Guru One</a><a class="item" href="example1.html">Guru Two</a><a class="item" href="example1.html">Guru Three</a><a class="item" href="example1.html">Guru Four</a></div></div><a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.hmtl">Archive One</a></div><a class="item" href="example1.html">Design One</a><a class="item" href="example1.html">Design Two</a><a class="item" href="example1.html">Design Three</a><a class="item" href="example1.html">Design Four</a><a class="item" href="example1.html">Design Five</a></div><a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Develop One</a><a class="item" href="example1.html">Develop Two</a><a class="item" href="example1.html">Develop Three</a><a class="item" href="example1.html">Develop Five</a><a class="item" href="example1.html">Develop Six</a><a class="item" href="example1.html">Develop Seven</a><a class="item" href="example1.html">Develop Eight</a></div><a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">News One</a><a class="item" href="example1.html">News Two</a><a class="item" href="example1.html">News Three</a><a class="item" href="example1.html">News Four</a></div><a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Review One</a><a class="item" href="example1.html">Review Two</a></div><a class="item" href="example1.html">File Manager</a></div></td><td><a class="button" href="javascript:void(0)">Links</a><div class="section"><a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Interview One</a><a class="item" href="example1.html">Interview Two</a><a class="item" href="example1.html">Interview Three</a><a class="item" href="example1.html">Interview Four</a><a class="item" href="example1.html">Interview Five</a><a class="item" href="example1.html">Interview Six</a><a class="item" href="example1.html">Interview Seven</a></div><a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">PHP One</a><a class="item" href="example1.html">PHP Two</a><a class="item" href="example1.html">PHP Three</a></div><a class="item" href="example1.html">Advocacy One</a><a class="item" href="example1.html">Advocacy Two</a><a class="item" href="example1.html">Advocacy Three</a><a class="item" href="example1.html">Advocacy Four</a><a class="item" href="example1.html">Advocacy Five</a></div><a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Community One</a><a class="item" href="example1.html">Community Two</a><a class="item" href="example1.html">Community Three</a><a class="item" href="example1.html">Community Four</a><a class="item" href="example1.html">Community Five</a></div><a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Book One</a><a class="item" href="example1.html">Book Two</a><a class="item" href="example1.html">Book Three</a><a class="item" href="example1.html">Book Four</a></div><a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Pattern One</a><a class="item" href="example1.html">Pattern Two</a><a class="item" href="example1.html">Pattern Three</a><a class="item" href="example1.html">Pattern Four</a></div><a class="item" href="example1.html">Concept One</a><a class="item" href="example1.html">Concept Two</a><a class="item" href="example1.html">Concept Three</a></div><a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a><div class="section"><a class="item" href="example1.html">Introductory One</a><a class="item" href="example1.html">IIntroductory Two</a><a class="item" href="example1.html">Introductory Three</a><a class="item" href="example1.html">Introductory Four</a><a class="item" href="example1.html">Introductory Five</a><a class="item" href="example1.html">Introductory Six</a><a class="item" href="example1.html">Introductory Seven</a></div><a class="item" href="example1.html">Tutorial One</a><a class="item" href="example1.html">Tutorial Two</a><a class="item" href="example1.html">Tutorial Three</a><a class="item" href="example1.html">Tutorial Four</a><a class="item" href="example1.html">Tutorial Five</a><a class="item" href="example1.html">Tutorial Six</a><a class="item" href="example1.html">Tutorial Seven</a><a class="item" href="example1.html">Tutorial Eight</a><a class="item" href="example1.html">Tutorial Nine</a></div></div></td><td><a class="button" href="javascript:void(0)">Help</a><div class="section"><a class="item" href="example1.html">About XulMenu</a><a class="item" href="example1.html">About this site</a></div></td></tr></table>');
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example1.css
===================================================================
--- trunk/misc/design/24menuMygosumenu/example1.css (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example1.css 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,63 @@
+.XulMenu {
+ font-family: georgia, tahoma, verdana;
+ font-size: 11px;
+ -moz-user-select: none;
+}
+.XulMenu .button,
+.XulMenu .button:hover,
+.XulMenu .button-active,
+.XulMenu .button-active:hover {
+ line-height: normal;
+ padding: 5px 6px 4px 6px;
+ border: 1px solid #ECE9D8;
+ color: #000000;
+ text-decoration: none;
+ cursor: default;
+ white-space: nowrap;
+ display: block;
+ position: relative;
+}
+.XulMenu .button:hover {
+ border-color: #ffffff #ACA899 #ACA899 #ffffff;
+}
+.XulMenu .button-active,
+.XulMenu .button-active:hover {
+ border-color: #ACA899 #ffffff #ffffff #ACA899;
+}
+.XulMenu .item,
+.XulMenu .item:hover,
+.XulMenu .item-active,
+.XulMenu .item-active:hover {
+ background: #ffffff;
+ line-height: normal;
+ padding: 3px 30px 3px 20px;
+ color: #000000;
+ text-decoration: none;
+ cursor: default;
+ white-space: nowrap;
+ display: block;
+ position: relative;
+}
+.XulMenu .item:hover,
+.XulMenu .item-active,
+.XulMenu .item-active:hover {
+ background: #316AC5;
+ color: #ffffff;
+}
+.XulMenu .section {
+ background: #ffffff;
+ border: 1px solid;
+ border-color: #F1EFE2 #716F64 #716F64 #F1EFE2;
+ padding: 2px 1px 1px 2px;
+ position: absolute;
+ visibility: hidden;
+ z-index: -1;
+}
+.XulMenu .arrow {
+ position: absolute;
+ top: 7px;
+ right: 8px;
+ border: 0;
+}
+
+* html .XulMenu td { position: relative; } /* ie 5.0 fix */
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example1.html
===================================================================
--- trunk/misc/design/24menuMygosumenu/example1.html (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example1.html 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,236 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <script type="text/javascript" src="file://d:/dhtml/dev/debug.js"></script>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>#1.4 XulMenu example 1</title>
+ <link rel="stylesheet" type="text/css" href="example1.css" />
+ <script type="text/javascript" src="../ie5.js"></script>
+ <script type="text/javascript" src="XulMenu.js"></script>
+ <style type="text/css">
+ body { margin: 0; padding: 0; background: #ffffff; }
+ #bar {
+ background: #ECE9D8;
+ border: 1px solid;
+ border-color: #ffffff #ACA899 #ACA899 #ffffff;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ padding-left: 5px;
+ cursor: default;
+ }
+ #search {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ }
+ #search input,
+ #search select {
+ font-family: georgia, tahoma, verdana;
+ font-size: 12px;
+ margin-top: 4px;
+ }
+ p { font-family: georgia, tahoma, verdana; font-size: 11px; margin: 2em; }
+ </style>
+</head>
+<body>
+
+ <script type="text/javscript">
+ /* preload images */
+ var arrow1 = new Image(4, 7);
+ arrow1.src = "images/arrow1.gif";
+ var arrow2 = new Image(4, 7);
+ arrow2.src = "images/arrow2.gif";
+ </script>
+
+ <div id="bar">
+
+ <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu">
+ <tr>
+ <td>
+ <a class="button" href="javascript:void(0)">Viewer</a>
+ <div class="section">
+ <a class="item" href="example1.html">Home</a>
+ <a class="item" href="example1.html">Close</a>
+ </div>
+ </td>
+ <td>
+ <a class="button" href="javascript:void(0)">Articles</a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Advocacy One</a>
+ <a class="item" href="example1.html">Advocacy Two</a>
+ <a class="item" href="example1.html">Advocacy Three</a>
+ <a class="item" href="example1.html">Advocacy Four</a>
+ <a class="item" href="example1.html">Advocacy Five</a>
+ <a class="item" href="example1.html">Advocacy Six</a>
+ <a class="item" href="example1.html">Advocacy Seven</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Guru One</a>
+ <a class="item" href="example1.html">Guru Two</a>
+ <a class="item" href="example1.html">Guru Three</a>
+ <a class="item" href="example1.html">Guru Four</a>
+ </div>
+ </div>
+ <a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.hmtl">Archive One</a>
+ </div>
+ <a class="item" href="example1.html">Design One</a>
+ <a class="item" href="example1.html">Design Two</a>
+ <a class="item" href="example1.html">Design Three</a>
+ <a class="item" href="example1.html">Design Four</a>
+ <a class="item" href="example1.html">Design Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Develop One</a>
+ <a class="item" href="example1.html">Develop Two</a>
+ <a class="item" href="example1.html">Develop Three</a>
+ <a class="item" href="example1.html">Develop Five</a>
+ <a class="item" href="example1.html">Develop Six</a>
+ <a class="item" href="example1.html">Develop Seven</a>
+ <a class="item" href="example1.html">Develop Eight</a>
+ </div>
+ <a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">News One</a>
+ <a class="item" href="example1.html">News Two</a>
+ <a class="item" href="example1.html">News Three</a>
+ <a class="item" href="example1.html">News Four</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Review One</a>
+ <a class="item" href="example1.html">Review Two</a>
+ </div>
+ <a class="item" href="example1.html">File Manager</a>
+ </div>
+ </td>
+ <td>
+ <a class="button" href="javascript:void(0)">Links</a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Interview One</a>
+ <a class="item" href="example1.html">Interview Two</a>
+ <a class="item" href="example1.html">Interview Three</a>
+ <a class="item" href="example1.html">Interview Four</a>
+ <a class="item" href="example1.html">Interview Five</a>
+ <a class="item" href="example1.html">Interview Six</a>
+ <a class="item" href="example1.html">Interview Seven</a>
+ </div>
+ <a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">PHP One</a>
+ <a class="item" href="example1.html">PHP Two</a>
+ <a class="item" href="example1.html">PHP Three</a>
+ </div>
+ <a class="item" href="example1.html">Advocacy One</a>
+ <a class="item" href="example1.html">Advocacy Two</a>
+ <a class="item" href="example1.html">Advocacy Three</a>
+ <a class="item" href="example1.html">Advocacy Four</a>
+ <a class="item" href="example1.html">Advocacy Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Community One</a>
+ <a class="item" href="example1.html">Community Two</a>
+ <a class="item" href="example1.html">Community Three</a>
+ <a class="item" href="example1.html">Community Four</a>
+ <a class="item" href="example1.html">Community Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Book One</a>
+ <a class="item" href="example1.html">Book Two</a>
+ <a class="item" href="example1.html">Book Three</a>
+ <a class="item" href="example1.html">Book Four</a>
+ </div>
+ <a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Pattern One</a>
+ <a class="item" href="example1.html">Pattern Two</a>
+ <a class="item" href="example1.html">Pattern Three</a>
+ <a class="item" href="example1.html">Pattern Four</a>
+ </div>
+ <a class="item" href="example1.html">Concept One</a>
+ <a class="item" href="example1.html">Concept Two</a>
+ <a class="item" href="example1.html">Concept Three</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.html">Introductory One</a>
+ <a class="item" href="example1.html">IIntroductory Two</a>
+ <a class="item" href="example1.html">Introductory Three</a>
+ <a class="item" href="example1.html">Introductory Four</a>
+ <a class="item" href="example1.html">Introductory Five</a>
+ <a class="item" href="example1.html">Introductory Six</a>
+ <a class="item" href="example1.html">Introductory Seven</a>
+ </div>
+ <a class="item" href="example1.html">Tutorial One</a>
+ <a class="item" href="example1.html">Tutorial Two</a>
+ <a class="item" href="example1.html">Tutorial Three</a>
+ <a class="item" href="example1.html">Tutorial Four</a>
+ <a class="item" href="example1.html">Tutorial Five</a>
+ <a class="item" href="example1.html">Tutorial Six</a>
+ <a class="item" href="example1.html">Tutorial Seven</a>
+ <a class="item" href="example1.html">Tutorial Eight</a>
+ <a class="item" href="example1.html">Tutorial Nine</a>
+ </div>
+ </div>
+ </td>
+ <td>
+ <a class="button" href="javascript:void(0)">Help</a>
+ <div class="section">
+ <a class="item" href="example1.html">About XulMenu</a>
+ <a class="item" href="example1.html">About this site</a>
+ </div>
+ </td>
+ </tr>
+ </table>
+
+ <div id="search">
+ <input type="text" name="searchField" value="" />
+ <select name="searchWhat"><option value="">Articles</option><option value="">Links</option><option value="">PHP Manual</option></select>
+ <input type="button" value="Search" />
+ </div>
+
+ </div>
+
+ <script type="text/javascript">
+ var menu1 = new XulMenu("menu1");
+ menu1.arrow1 = "images/arrow1.gif";
+ menu1.arrow2 = "images/arrow2.gif";
+ menu1.init();
+ </script>
+
+ <p>
+ <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br />
+ <b>Menu type</b>: #1.4 XulMenu example 1 <br />
+ <b>Features</b>: <br />
+ - horizontal or vertical menu <br />
+ - unlimited nesting <br />
+ - can be positioned statically or absolutely <br />
+ - position of submenus can be changed, so they can for example overflow parent elements <br />
+ - on the same page there can be many menus created <br />
+ - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br />
+ - search engine friendly <br />
+ - free for any use (BSD license) <br />
+ <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Firefox 0.7/0.8/0.9, Safari 1.2
+ </p>
+
+</body>
+</html>
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example2.css
===================================================================
--- trunk/misc/design/24menuMygosumenu/example2.css (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example2.css 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,63 @@
+.XulMenu {
+ font-family: georgia, tahoma, verdana;
+ font-size: 11px;
+ -moz-user-select: none;
+}
+.XulMenu .button,
+.XulMenu .button:hover,
+.XulMenu .button-active,
+.XulMenu .button-active:hover {
+ line-height: normal;
+ padding: 5px 6px 4px 6px;
+ border: 1px solid #ECE9D8;
+ color: #000000;
+ text-decoration: none;
+ cursor: default;
+ white-space: nowrap;
+ display: block;
+ position: relative;
+}
+.XulMenu .button:hover {
+ border-color: #ffffff #ACA899 #ACA899 #ffffff;
+}
+.XulMenu .button-active,
+.XulMenu .button-active:hover {
+ border-color: #ACA899 #ffffff #ffffff #ACA899;
+}
+.XulMenu .item,
+.XulMenu .item:hover,
+.XulMenu .item-active,
+.XulMenu .item-active:hover {
+ background: #ffffff;
+ line-height: normal;
+ padding: 3px 30px 3px 20px;
+ color: #000000;
+ text-decoration: none;
+ cursor: default;
+ white-space: nowrap;
+ display: block;
+ position: relative;
+}
+.XulMenu .item:hover,
+.XulMenu .item-active,
+.XulMenu .item-active:hover {
+ background: #316AC5;
+ color: #ffffff;
+}
+.XulMenu .section {
+ background: #ffffff;
+ border: 1px solid;
+ border-color: #F1EFE2 #716F64 #716F64 #F1EFE2;
+ padding: 2px 1px 1px 2px;
+ position: absolute;
+ visibility: hidden;
+ z-index: -1;
+}
+.XulMenu .arrow {
+ position: absolute;
+ top: 7px;
+ right: 8px;
+ border: 0;
+}
+
+* html .XulMenu td { position: relative; } /* ie 5.0 fix */
\ No newline at end of file
Added: trunk/misc/design/24menuMygosumenu/example2.html
===================================================================
--- trunk/misc/design/24menuMygosumenu/example2.html (rev 0)
+++ trunk/misc/design/24menuMygosumenu/example2.html 2008-01-29 21:14:57 UTC (rev 4833)
@@ -0,0 +1,220 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>#1.4 XulMenu example 2</title>
+ <link rel="stylesheet" type="text/css" href="example2.css" />
+ <script type="text/javascript" src="../ie5.js"></script>
+ <script type="text/javascript" src="XulMenu.js"></script>
+ <style type="text/css">
+ html, body { height: 100%; }
+ body { margin: 0; padding: 0; background: #ffffff; }
+ #bar {
+ background: #ECE9D8;
+ border: 1px solid;
+ border-color: #ffffff #ACA899 #ACA899 #ffffff;
+ padding: 3px;
+ cursor: default;
+ }
+ table td { vertical-align: top; }
+ p { font-family: georgia, tahoma, verdana; font-size: 11px; margin: 2em; }
+ </style>
+</head>
+<body>
+
+ <script type="text/javscript">
+ /* preload images */
+ var arrow1 = new Image(4, 7);
+ arrow1.src = "images/arrow1.gif";
+ var arrow2 = new Image(4, 7);
+ arrow2.src = "images/arrow2.gif";
+ </script>
+
+ <table cellspacing="0" cellpadding="0" height="100%"><tr><td id="bar">
+
+ <table cellspacing="0" cellpadding="0" id="menu1" class="XulMenu">
+ <tr>
+ <td>
+ <a class="button" href="javascript:void(0)">Viewer</a>
+ <div class="section">
+ <a class="item" href="example2.html">Home</a>
+ <a class="item" href="example2.html">Close</a>
+ </div>
+
+ <a class="button" href="javascript:void(0)">Articles</a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Advocacy One</a>
+ <a class="item" href="example2.html">Advocacy Two</a>
+ <a class="item" href="example2.html">Advocacy Three</a>
+ <a class="item" href="example2.html">Advocacy Four</a>
+ <a class="item" href="example2.html">Advocacy Five</a>
+ <a class="item" href="example2.html">Advocacy Six</a>
+ <a class="item" href="example2.html">Advocacy Seven</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Blogs<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">PHP Guru<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Guru One</a>
+ <a class="item" href="example2.html">Guru Two</a>
+ <a class="item" href="example2.html">Guru Three</a>
+ <a class="item" href="example2.html">Guru Four</a>
+ </div>
+ </div>
+ <a class="item" href="javascript:void(0)">Design<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Archive<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example1.hmtl">Archive One</a>
+ </div>
+ <a class="item" href="example2.html">Design One</a>
+ <a class="item" href="example2.html">Design Two</a>
+ <a class="item" href="example2.html">Design Three</a>
+ <a class="item" href="example2.html">Design Four</a>
+ <a class="item" href="example2.html">Design Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Develop<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Develop One</a>
+ <a class="item" href="example2.html">Develop Two</a>
+ <a class="item" href="example2.html">Develop Three</a>
+ <a class="item" href="example2.html">Develop Five</a>
+ <a class="item" href="example2.html">Develop Six</a>
+ <a class="item" href="example2.html">Develop Seven</a>
+ <a class="item" href="example2.html">Develop Eight</a>
+ </div>
+ <a class="item" href="javascript:void(0)">News<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">News One</a>
+ <a class="item" href="example2.html">News Two</a>
+ <a class="item" href="example2.html">News Three</a>
+ <a class="item" href="example2.html">News Four</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Reviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Review One</a>
+ <a class="item" href="example2.html">Review Two</a>
+ </div>
+ <a class="item" href="example2.html">File Manager</a>
+ </div>
+
+ <a class="button" href="javascript:void(0)">Links</a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Advocacy<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Interviews<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Interview One</a>
+ <a class="item" href="example2.html">Interview Two</a>
+ <a class="item" href="example2.html">Interview Three</a>
+ <a class="item" href="example2.html">Interview Four</a>
+ <a class="item" href="example2.html">Interview Five</a>
+ <a class="item" href="example2.html">Interview Six</a>
+ <a class="item" href="example2.html">Interview Seven</a>
+ </div>
+ <a class="item" href="javascript:void(0)">PHP<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">PHP One</a>
+ <a class="item" href="example2.html">PHP Two</a>
+ <a class="item" href="example2.html">PHP Three</a>
+ </div>
+ <a class="item" href="example2.html">Advocacy One</a>
+ <a class="item" href="example2.html">Advocacy Two</a>
+ <a class="item" href="example2.html">Advocacy Three</a>
+ <a class="item" href="example2.html">Advocacy Four</a>
+ <a class="item" href="example2.html">Advocacy Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Community<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Community One</a>
+ <a class="item" href="example2.html">Community Two</a>
+ <a class="item" href="example2.html">Community Three</a>
+ <a class="item" href="example2.html">Community Four</a>
+ <a class="item" href="example2.html">Community Five</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Concepts<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Books<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Book One</a>
+ <a class="item" href="example2.html">Book Two</a>
+ <a class="item" href="example2.html">Book Three</a>
+ <a class="item" href="example2.html">Book Four</a>
+ </div>
+ <a class="section" href="javascript:void(0)">Patterns<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Pattern One</a>
+ <a class="item" href="example2.html">Pattern Two</a>
+ <a class="item" href="example2.html">Pattern Three</a>
+ <a class="item" href="example2.html">Pattern Four</a>
+ </div>
+ <a class="item" href="example2.html">Concept One</a>
+ <a class="item" href="example2.html">Concept Two</a>
+ <a class="item" href="example2.html">Concept Three</a>
+ </div>
+ <a class="item" href="javascript:void(0)">Tutorials<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="javascript:void(0)">Introductory<img class="arrow" src="images/arrow1.gif" width="4" height="7" alt="" /></a>
+ <div class="section">
+ <a class="item" href="example2.html">Introductory One</a>
+ <a class="item" href="example2.html">IIntroductory Two</a>
+ <a class="item" href="example2.html">Introductory Three</a>
+ <a class="item" href="example2.html">Introductory Four</a>
+ <a class="item" href="example2.html">Introductory Five</a>
+ <a class="item" href="example2.html">Introductory Six</a>
+ <a class="item" href="example2.html">Introductory Seven</a>
+ </div>
+ <a class="item" href="example2.html">Tutorial One</a>
+ <a class="item" href="example2.html">Tutorial Two</a>
+ <a class="item" href="example2.html">Tutorial Three</a>
+ <a class="item" href="example2.html">Tutorial Four</a>
+ <a class="item" href="example2.html">Tutorial Five</a>
+ <a class="item" href="example2.html">Tutorial Six</a>
+ <a class="item" href="example2.html">Tutorial Seven</a>
+ <a class="item" href="example2.html">Tutorial Eight</a>
+ <a class="item" href="example2.html">Tutorial Nine</a>
+ </div>
+ </div>
+
+ <a class="button" href="javascript:void(0)">Help</a>
+ <div class="section">
+ <a class="item" href="example2.html">About XulMenu</a>
+ <a class="item" href="example2.html">About this site</a>
+ </div>
+ </td>
+ </tr>
+ </table>
+
+ </td>
+ <td>
+ <p>
+ <b>Project</b>: <a href="http://gosu.pl/dhtml/mygosumenu.html">mygosuMenu</a> <br />
+ <b>Menu type</b>: #1.4 XulMenu example 2 <br />
+ <b>Features</b>: <br />
+ - horizontal or vertical menu <br />
+ - unlimited nesting <br />
+ - can be positioned statically or absolutely <br />
+ - position of submenus can be changed, so they can for example overflow parent elements <br />
+ - on the same page there can be many menus created <br />
+ - seperated into 3 layers: behaviour(javascript), structure(html), presentation(css) <br />
+ - search engine friendly <br />
+ - free for any use (BSD license) <br />
+ <b>Compatibility</b>: Tested and works great on: IE 5.0/5.5/6.0, Mozilla 1.4/1.7, Opera 7.11/7.23/7.51, Netscape 7.11, Fire...
[truncated message content] |
