<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Keyboard Tab Navigation - Menu</title>
<link type="text/css" href="menu.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
//initialise plugins
$(function(){
$(".parent").focusin(function(e) {
show(e);
});
function show(e){
var dv = $($(e.target).parent()).children("div");
$(dv).css("visibility", "visible");
var sib = $($(e.target).parent()).siblings();
var di = $(sib).children("div");
walk(di);
}
$("a").focusin(function(e) {
var sib = $($(e.target).parent()).siblings();
var di = $(sib).children("div");
walk(di);
if($($(this).parents('ul:eq(0)')).hasClass("menu")){
var sp = $(this).children("span");
$(sp).css("color","#3a3a3a");
$(sp).css("background","url(images/selected-left-sub.png) no-repeat 0 -3px");
$(sp).css("_background-image","url(images/selected-left-sub.gif)");
$(this).css("background","url(images/selected-right-sub.png) no-repeat right -1px");
$(this).css("_background-image","url(images/selected-right-sub.gif)");
var anc = $(sib).children("a");
var spn = $(anc).children("span");
$(spn).css("color","#FFFFFF");
$(spn).css("background","");
$(spn).css("_background-image","");
$(anc).css("background","");
$(anc).css("_background-image","");
}
});
function walk(children) {
children.each(function(){
var child = $(this);
if (child.children().size() > 0) {
walk(child.children());
}
if(child.is("div")){
$(this).css("visibility", "hidden")
}
})
}
$("a:first").keypress(function(e) {
if(e.shiftKey){
var di = $($(e.target).parent()).children("div");
walk(di);
var anc = $($(e.target).parent()).children("a");
var spn = $(anc).children("span");
$(spn).css("color","#FFFFFF");
$(spn).css("background","");
$(spn).css("_background-image","");
$(anc).css("background","");
$(anc).css("_background-image","");
}
});
$("a:last").keypress(function(e) {
if(!e.shiftKey){
var di = $($(".parent").parent()).children("div");
walk(di);
var anc = $(".parent");
var spn = $(anc).children("span");
$(spn).css("color","#FFFFFF");
$(spn).css("background","");
$(spn).css("_background-image","");
$(anc).css("background","");
$(anc).css("_background-image","");
}
});
});
</script>
<style type="text/css">
*{ margin:0;
padding:0;
}
body { background:#171717; }
div#menu {
margin:30px auto;
width:80%;
}
</style>
</head>
<body>
<div id="menu">
<ul class="menu">
<li><a id="home" href="#" class="parent"><span>Item 1</span></a>
<div>
<ul>
<li><a href="#" class="parent" id="SubItem1"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent" id="SubItem1.1"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent" id="SubItem1.7"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent" id="ProductInfo"><span>Item 2</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Item 3</span></a></li>
<li class="last"><a href="#"><span>Item 4</span></a></li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Css File :
div#menu {
height: 46px;
padding-left: 10px;
background: url(images/left.png) no-repeat;
_background-image: url(images/left.gif);
width:auto;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menu ul.menu {
padding-right: 10px;
background: url(images/right.png) no-repeat right 0;
_background-image: url(images/right.gif);
}
div#menu li {
position: relative;
margin: 0;
padding: 0 0 0 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menu ul ul li {
z-index: 9;
}
div#menu li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 36px;
left: 0;
visibility: hidden;
width: 187px;
padding: 0 0 11px 7px;
background: url(images/submenu-bottom.png) no-repeat 7px bottom;
_background-image: url(images/submenu-bottom.gif);
margin: 0px 0 0 -4px;
}
div#menu li:hover>div {
visibility: visible;
}
div#menu a:focus>div {
visibility: visible;
}
div#menu a {
position: relative;
z-index: 10;
height: 41px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right: 5px;
text-align: center;
}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menu a {
padding: 0 30px 0 0;
line-height: 40px;
height: 46px;
margin-right: 5px;
_margin-right: 1px;
background: none;
}
div#menu span {
margin-top: 2px;
padding-left: 30px;
color: #fff;
font: bold 11px Trebuchet MS,Arial,san-serif;
background: none;
line-height: 40px;
}
div#menu a:focus,
div#menu a.over {
background: url(images/selected-right-sub.png) no-repeat right -1px;
_background-image: url(images/selected-right-sub.gif);
}
div#menu a:hover,
div#menu a.over {
background: url(images/selected-right-sub.png) no-repeat right -1px;
_background-image: url(images/selected-right-sub.gif);
}
div#menu a:focus span,
div#menu a.over span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
_background-image: url(images/selected-left-sub.gif);
}
div#menu a:hover span,
div#menu a.over span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
_background-image: url(images/selected-left-sub.gif);
}
div#menu li.current a,
div#menu ul.menu>li:focus>a {
background: url(images/selected-right-sub.png) no-repeat right -1px;
_background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
background: url(images/selected-right-sub.png) no-repeat right -1px;
_background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a span,
div#menu ul.menu>li:focus>a span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
_background-image: url(images/selected-left-sub.gif);
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
_background-image: url(images/selected-left-sub.gif);
}
div#menu ul.menu>li:focus>a span {
color: #3a3a3a;
}
div#menu ul.menu>li:hover>a span {
color: #3a3a3a;
}
div#menu li { }
div#menu li.last { background: none; }
div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:focus,
div#menu.js-active a:focus span,
div#menu.js-active a,
div#menu.js-active span {
background:none;
}
div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:hover,
div#menu.js-active a:hover span,
div#menu.js-active a,
div#menu.js-active span {
background:none;
}
div#menu.js-active ul.menu>li:focus>a,
div#menu.js-active ul.menu>li:focus>a span {
background:none;
}
div#menu.js-active ul.menu>li:hover>a,
div#menu.js-active ul.menu>li:hover>a span {
background:none;
}
div#menu li.current a.over {
background: url(images/selected-right-sub.png) no-repeat right -1px;
_background-image: url(images/selected-right-sub.gif);
}
div#menu li.current a.over span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
_background-image: url(images/selected-left-sub.gif);
}
div#menu a.over span {
color: #3a3a3a;
}
/* menu::level2 */
div#menu ul ul li {
background: none;
padding: 0;
}
div#menu ul ul {
padding-top: 10px;
}
div#menu ul ul a {
padding: 0;
height: auto;
float: none;
display: block;
line-height: 26px;
font-size: 11px;
color: #ffffff;
z-index: -1;
padding-left: 5px;
white-space: normal;
width: 160px;
margin: 0 5px;
text-transform: none;
}
div#menu ul ul a span {
padding: 0 15px;
line-height: 26px;
font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
background:none;
}
div#menu ul ul a:focus {
background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a:hover {
background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a:focus span {
background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a:hover span {
background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent {
background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {
background: url(images/submenu-pointer-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:focus {
background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:hover {
background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:focus span {
background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:hover span {
background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {
margin-top: 0;
text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul div {
width: 180px;
padding: 15px 0px 8px 0px;
margin: -44px 0 0 169px !important;
background: url(images/subsubmenu-top.png) no-repeat 0px 0;
_background-image: url(images/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {
padding: 0 4px 5px 1px;
background: url(images/submenu-bottom.png) no-repeat 0px bottom;
_background-image: url(images/submenu-bottom.gif);
}
div#menu ul ul div li {
position:relative;
top:-5px;
}
/* lava lamp */
div#menu li.back {
background: url(images/lavalamp-left.png) no-repeat 0 0;
_background-image: url(images/lavalamp-left.gif);
width: 10px;
height: 46px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0;
}
div#menu li.back .left {
padding:0;
width:auto;
background: url(images/lavalamp-right.png) no-repeat right 0;
_background-image: url(images/lavalamp-right.gif);
height: 46px;
margin: 0 5px 0 10px;
_margin-right: 2px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
No comments:
Post a Comment