Alternave Animated Menuing System (Suckerfish based)
7 views
Skip to first unread message
eclifter
Dec 8, 2008, 2:51:17 PM12/8/08
to Ojay talk
I am working on a menu alternative using Ojay that degrades better for
browsers with JS disabled. It is a variation of Suckerfish that I
call Koi. I haven't tested it in all browsers yet but I do see some
intermittent issues with the animation, perhaps because I haven't
found a way to stop an animation on a node before starting a new one.
I'm releasing the code under the BSD License. Any help in fixing the
intermittent animation errors or improving it in any way would be
greatly appreciated.
koi.js
<---------------------------------------------------------->
/*
Copyright (c) 2008 the WebFeat Media LLC
Licensed under the BSD license
Version: 0.1.0
*/
var Menu = new JS.Class({
initialize: function(el, options){
var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom,
container = $(el),
topmenu = $('ul#nav'),
submenus = $('ul#nav ul'),
hidden = {
visibility: 'hidden',
display:
'none'
},
show = {
visibility: 'visible',
display: 'block'
},
hoverClass = 'koiHover',
subClass = 'submenu',
hoverSelector = '.' + hoverClass,
delay = 0.5;
submenus.forEach(function(menu, i){
menu.node.koiHeight = menu.getHeight();
menu.node.koiWidth = menu.getWidth();
});
submenus
.setStyle(hidden)
.parents('li')
.addClass(subClass);
topmenu
.on('mouseover', $.delegateEvent({
'li': function(item, event){
event.stopEvent();
var siblingSubs = item.siblings(hoverSelector);
if (!siblingSubs)
return;
siblingSubs
.removeClass(hoverClass)
.children('ul')
.setStyle(hidden);
},
'li.submenu': function(submenu, event){
event.stopEvent();
if (submenu.hasClass(hoverClass))
return;
submenu.addClass(hoverClass);
var menu = submenu.children('ul');
menu
.setStyle(show)
.animate({
height: {
from: 0,
to: menu.node.koiHeight
}
}, delay, {
easing: 'bounceOut',
before: it().setStyle({
height: '0',
overflow: 'hidden'
}),
after: it().setStyle({
overflow: '',
height: ''
})
});
}
}, true))
.on('mouseout', function(submenu, event){
event.stopEvent();
if (Dom.isAncestor(container.node, Event.getRelatedTarget
(event)))
return;
submenu.descendants(hoverSelector)
.removeClass(hoverClass)
.children('ul')
.setStyle(hidden);
});
}
});
<---------------------------------------------------------------------------------------------------------------
>
And then the HTML - I split up the required CSS from the formatting
CSS for easy in identifying what must be changed.
index.html
<---------------------------------------------------------------------------------------------------------------
>
<!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>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://
yui.yahooapis.com/2.6.0/build/logger/assets/skins/sam/logger.css">
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav * { /* all lists */
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav a {
display: block;
}
#nav li { /* all list items */
float: left;
width: 10em;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em;
}
#nav li ul ul {
margin: -2.5em 0 0 10em;
z-index:99;
}
#nav li:hover > ul {
left: auto;
}
#nav .koiHover {
left: auto;
}
#nav li:hover {
position: static;
}
#nav {
float: left;
margin-bottom: 1em;
}
#nav {
line-height: 1em;
}
#nav li {
background:#BDD2FF none repeat scroll 0 0;
}
#nav li li {
background:#AABDE6 none repeat scroll 0 0;
}
#nav a, #nav a:visited {
color: #1133AA;
}
#nav a {
border-left:1px solid #FFFFFF;
border-top:1px solid #CFDEFF;
padding:0.75em 1em;
text-decoration:none;
}
#nav li:hover, #nav li.koiHover {
background:#CFDEFF none repeat scroll 0 0;
}
</style>
<title>Drop me Down!</title>
</head>
<body>
<div>
<p>
Below is a DDM which has two multilevel options.
Follow the options other than "Test Item" and you should reach the
furthest level with a link called "No More Sub Menus".
</p>
<p>
This example uses normal javascript to catch out the
browsers that don't support the CSS E > F and :hover selectors.
</p>
</div>
<div id="horiz-menu">
<ul id="nav">
<li>
<a href='#'>Menu Item 1</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Go a little further</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And More</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And Even More!
</a>
<ul>
<li>
<a href='#'>Test
Item</a>
</li>
<li>
<a href='#'>WOW
THIS IS CRAZY!</a>
<ul>
<li>
<a
href='#'>Test Item</a>
</li>
<li>
<a
href='#'>GENIUS!</a>
<ul>
<li>
<a
href='#'>No More Sub Menus</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 2
</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Here too</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And More</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And Even More!
</a>
<ul>
<li>
<a href='#'>Test
Item</a>
</li>
<li>
<a href='#'>No
More Sub Menus</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 3
</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 4
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/
combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/
animation/animation-min.js&2.6.0/build/element/element-beta-
min.js&2.6.0/build/selector/selector-beta-min.js">
</script>
<script type="text/javascript" src="ojay-all.js">
</script>
<script type="text/javascript" src="koi.js">
</script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("nav", function(ev){
var menu = new Menu('div#horiz-menu');
});
</script>
<----------------------------------------------------------------------------------------------------------------------
>
ojay-all.js is just what is sounds like but it is definitely
overkill. I may have included some unnecessary YUI as well.
Obviously this still needs to be cleaned up a little bit.
browsers with JS disabled. It is a variation of Suckerfish that I
call Koi. I haven't tested it in all browsers yet but I do see some
intermittent issues with the animation, perhaps because I haven't
found a way to stop an animation on a node before starting a new one.
I'm releasing the code under the BSD License. Any help in fixing the
intermittent animation errors or improving it in any way would be
greatly appreciated.
koi.js
<---------------------------------------------------------->
/*
Copyright (c) 2008 the WebFeat Media LLC
Licensed under the BSD license
Version: 0.1.0
*/
var Menu = new JS.Class({
initialize: function(el, options){
var Event = YAHOO.util.Event, Dom = YAHOO.util.Dom,
container = $(el),
topmenu = $('ul#nav'),
submenus = $('ul#nav ul'),
hidden = {
visibility: 'hidden',
display:
'none'
},
show = {
visibility: 'visible',
display: 'block'
},
hoverClass = 'koiHover',
subClass = 'submenu',
hoverSelector = '.' + hoverClass,
delay = 0.5;
submenus.forEach(function(menu, i){
menu.node.koiHeight = menu.getHeight();
menu.node.koiWidth = menu.getWidth();
});
submenus
.setStyle(hidden)
.parents('li')
.addClass(subClass);
topmenu
.on('mouseover', $.delegateEvent({
'li': function(item, event){
event.stopEvent();
var siblingSubs = item.siblings(hoverSelector);
if (!siblingSubs)
return;
siblingSubs
.removeClass(hoverClass)
.children('ul')
.setStyle(hidden);
},
'li.submenu': function(submenu, event){
event.stopEvent();
if (submenu.hasClass(hoverClass))
return;
submenu.addClass(hoverClass);
var menu = submenu.children('ul');
menu
.setStyle(show)
.animate({
height: {
from: 0,
to: menu.node.koiHeight
}
}, delay, {
easing: 'bounceOut',
before: it().setStyle({
height: '0',
overflow: 'hidden'
}),
after: it().setStyle({
overflow: '',
height: ''
})
});
}
}, true))
.on('mouseout', function(submenu, event){
event.stopEvent();
if (Dom.isAncestor(container.node, Event.getRelatedTarget
(event)))
return;
submenu.descendants(hoverSelector)
.removeClass(hoverClass)
.children('ul')
.setStyle(hidden);
});
}
});
<---------------------------------------------------------------------------------------------------------------
>
And then the HTML - I split up the required CSS from the formatting
CSS for easy in identifying what must be changed.
index.html
<---------------------------------------------------------------------------------------------------------------
>
<!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>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://
yui.yahooapis.com/2.6.0/build/logger/assets/skins/sam/logger.css">
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav * { /* all lists */
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav a {
display: block;
}
#nav li { /* all list items */
float: left;
width: 10em;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em;
}
#nav li ul ul {
margin: -2.5em 0 0 10em;
z-index:99;
}
#nav li:hover > ul {
left: auto;
}
#nav .koiHover {
left: auto;
}
#nav li:hover {
position: static;
}
#nav {
float: left;
margin-bottom: 1em;
}
#nav {
line-height: 1em;
}
#nav li {
background:#BDD2FF none repeat scroll 0 0;
}
#nav li li {
background:#AABDE6 none repeat scroll 0 0;
}
#nav a, #nav a:visited {
color: #1133AA;
}
#nav a {
border-left:1px solid #FFFFFF;
border-top:1px solid #CFDEFF;
padding:0.75em 1em;
text-decoration:none;
}
#nav li:hover, #nav li.koiHover {
background:#CFDEFF none repeat scroll 0 0;
}
</style>
<title>Drop me Down!</title>
</head>
<body>
<div>
<p>
Below is a DDM which has two multilevel options.
Follow the options other than "Test Item" and you should reach the
furthest level with a link called "No More Sub Menus".
</p>
<p>
This example uses normal javascript to catch out the
browsers that don't support the CSS E > F and :hover selectors.
</p>
</div>
<div id="horiz-menu">
<ul id="nav">
<li>
<a href='#'>Menu Item 1</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Go a little further</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And More</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And Even More!
</a>
<ul>
<li>
<a href='#'>Test
Item</a>
</li>
<li>
<a href='#'>WOW
THIS IS CRAZY!</a>
<ul>
<li>
<a
href='#'>Test Item</a>
</li>
<li>
<a
href='#'>GENIUS!</a>
<ul>
<li>
<a
href='#'>No More Sub Menus</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 2
</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Here too</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And More</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>And Even More!
</a>
<ul>
<li>
<a href='#'>Test
Item</a>
</li>
<li>
<a href='#'>No
More Sub Menus</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 3
</a>
<ul>
<li>
<a href='#'>Test Item</a>
</li>
<li>
<a href='#'>Test Item</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Menu Item 4
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/
combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/
animation/animation-min.js&2.6.0/build/element/element-beta-
min.js&2.6.0/build/selector/selector-beta-min.js">
</script>
<script type="text/javascript" src="ojay-all.js">
</script>
<script type="text/javascript" src="koi.js">
</script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("nav", function(ev){
var menu = new Menu('div#horiz-menu');
});
</script>
<----------------------------------------------------------------------------------------------------------------------
>
ojay-all.js is just what is sounds like but it is definitely
overkill. I may have included some unnecessary YUI as well.
Obviously this still needs to be cleaned up a little bit.
eclifter
Dec 8, 2008, 2:59:17 PM12/8/08
to Ojay talk
I would be remiss if I did not note that the inspiration for the CSS
and HTML come from here: http://blog.netweblogic.com/css/suckerfish-drop-down-menu-improved/
and HTML come from here: http://blog.netweblogic.com/css/suckerfish-drop-down-menu-improved/
> <---------------------------------------------------------------------------------------------------------------
>
>
>
> And then the HTML - I split up the required CSS from the formatting
> CSS for easy in identifying what must be changed.
>
> index.html
> <---------------------------------------------------------------------------------------------------------------
> <----------------------------------------------------------------------------------------------------------------------
Reply all
Reply to author
Forward
0 new messages