Welcome to WebmasterWorld Guest from 54.196.233.208

Forum Moderators: open

Message Too Old, No Replies

Need menu to drop down with keyboard

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

Junior Member

10+ Year Member

joined:Nov 19, 2004
posts: 56
votes: 0


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)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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

Junior Member

10+ Year Member

joined:Nov 19, 2004
posts: 56
votes: 0


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