This would not be the "multiple links on the navigation button". In a way, it will be zero links.
I'll explain. What you describe is the pretty complex behavior where at least two control elements are involved: a button plus something else. The second element could be the
select
element. Or it could be HTML5
datalist
. It is kept invisible and is shown only on certain events.
There are no links on the button element at all. You populate the select or data list element with those links and retrieve then on the button click.
This is just some pseudo-code:
var buttonElement =
var selectElement =
var inButtonElement = false;
var inSelectElement = false;
buttonElement.onclick = function() {
}
buttonElement.onmouseover = function() {
inButtonElement = true;
}
buttonElement.onmouseout = function() {
inButtonElement = false;
if (! (inButtonElement | inSelectElement))
}
selectElement.onmouseover = function() {
inSelectElement = true;
}
selectElement.onmouseout = function() {
inSelectElement = false;
if (! (inButtonElement | inSelectElement))
}
Are you getting the idea?
One good way to implement it all easily is jQuery. If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).
—SA