Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: open

Need menu to drop down with keyboard

   
5:32 pm on Dec 14, 2012 (gmt 0)

10+ Year Member



I have a unified drop down menu (when you mouseover any top level item, the whole thing drops where you can see the submenus for each heading) that works great with the mouse, but I need it to drop down when a user tabs onto it.

html:
 <div id="buttonbar">
<ul id="bar">
<li id="prospective" class="rightborder"><a>Future Students</a>
<ul id="prospective-links">
<li><a href="/admissions">Undergraduate Admissions</a></li>
<li><a href="/graduate">Graduate Admissions</a></li>
<li><a href="/admissions/international">International Admissions</a></li>
<li><a href="/transfer">Transfer Admissions</a></li>
<li><a href="/advising-center">Academic Advising Center</a></li>
<li><a href="/financial_aid">Financial Assistance</a></li>
<li><a href="/info/schedules/tuition">Tuition and Fees</a></li>
<li><a href="#">Test Item 8</a></li>
<li class="last-item"><a href="/prospective">Go to Future Students</a></li>
</ul></li>
<li id="students" class="rightborder"><a href="/current">Current Students</a>
<ul id="current-links">
<li><a href="/info/calendars/academic">Academic Calendar</a></li>
<li><a href="/info/schedules">Enrollment Schedule</a></li>
<li><a href="/studentservices">Student Life</a></li>
<li><a href="/housing">Housing</a></li>
<li><a href="/financial_aid/workstudy.html">On-Campus Jobs</a></li>
<li><a href="#">Bookstore</a></li>
<li><a href="#">Athletics</A></li>
<li class="fill"><a name="hold">&nbsp;</a></li>
<li class="last-item"><a href="/current">Go to Current Students</a></li>
</ul></li>
</ul>
</div>


jquery/js:
if (ie === "1") {
if ($(window).width() > 949) {

$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}
else {
$("#accordion").accordion({active:false});
}
}

function showElement(d){
var s=document.getElementById(d).style;
if ($(window).width() < 950) {
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
if ($(window).width() > 949) {
if (s.display != "block" ) { s.display = "block"; }
}
}
}
function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}

}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');

s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/

}

}
$(window).resize(showHide); //Run when resized

jQuery(function($) {
var path = location.pathname.substring(1);
$('#nav a[href$="' + path + '"]').addClass('active');
});

// This section makes the skip to anchor links such as the skip to content link work in webkit browsers like Chrome and Safari
(function(linkList,i,URI) {
if (!(URI = document.documentURI)) {
URI = URI.split('#')[0];
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
linkList = document.links;
for (i in linkList) {
if (!linkList[i].hash) {
if (linkList[i].hash.match(/^#./)) {
if ((URI+linkList[i].hash)==linkList[i].href){
linkList[i].addEventListener("click", function(e,f,g) {
f = document.getElementById(this.hash.slice(1));
if (!(g = f.getAttribute('tabIndex'))) f.setAttribute('tabIndex',-1);
f.focus();
if (!g) f.removeAttribute('tabIndex');
}, false);
}
}
}
}
}, false);
}
return true;
})();
}
else {
function showElement(d){
var s=document.getElementById(d).style;
if (s.display != "block" ) { s.display = "block"; } else { s.display = "none"; }
};


};
12:33 am on Dec 16, 2012 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



You perhaps need to attach your handlers to the "focus" and "blur" events as well?
2:44 pm on Dec 17, 2012 (gmt 0)

10+ Year Member



How would I do that. I don't know JS/Jquery.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month