Add Dropdown to Current Navigation Buttons

[JRR]

Would love to see it John!

[jscheuer1]

OK, this is the latest code:

<script>
$(function(){	
	(function(){
		return {
			init: function(){
				var recent = $("a.recent-threads-button");
				var recent_threads = recent.clone().attr("href", "/threads/recent").attr("id", "recent-threads-new").html("Recent Rider Threads");
				var boards_new_posts = $(".icon img[alt='New Posts']");
				var threads_new_posts = $("tr.item.thread.new");
				
				var new_icon = $("<span></span>").attr("class", "new-icon").hide();
				
				if(boards_new_posts.length || threads_new_posts.length){
					new_icon.html("New").show();
					new_icon.css("position", "relative").css("top", "2px");
				}
				recent_threads.append(new_icon).insertBefore($("#navigation-tree"));
				recent.clone().attr("href", "/posts/recent").html("Recent Rider Posts").insertBefore($("#navigation-tree"));
				/* if (proboards.data("route").name == "home") {
					var lastUpdated = $(".last-updated > a").attr("href");
					recent.clone().attr("href", lastUpdated).html("Latest Rider Post").insertBefore($("#navigation-tree"));
					recent.clone().attr("href", "/members?dir=asc&sort=name&view=birthdays").html("Rider Birthdays").insertBefore($("#navigation-tree"));
				} */
				var friends = {
					"The Scooter Professor Forum" : 'http://thescooterprofessor.proboards.com/',
					"Scooter Doc Forum" : ['http://scooterdoc.proboards.com/', '_self'],
					"Scooter Rebels Forum" : 'http://scooterrebels.proboards.com/',
					"49ccScoot Forum" : 'http://49ccscoot.proboards.com/',
					"True Blue Liberty Forum" : 'http://trueblueliberty.com/',
					"Dan's Garage Forum" : 'http://www.dansgaragetalk.com/'
				}
				var defaultTarget = "_blank", friendsList = $('<ul><li>Friends</li></ul>'), liProt = $('<li></li>').css({
						display: 'none',
						float: 'none',
						margin: 0,
						marginLeft: -7,
						position: 'relative',
						zIndex: 1000,
						textAlign: 'left',
						fontSize: '105%',
						width: 'inherit'
					}).addClass('recent-threads-button').append('<a style="color: black;" target="_blank"></a>');
				friendsList.addClass('recent-threads-button').css({
					display: 'block',
					listStyleType: 'none',
					cursor: 'pointer',
					textAlign: 'left',
					width: 175
				}).click(function(e){
					var lis = this.getElementsByTagName('li'), firstLi = lis[0];
					if(e.target === firstLi){
						$(this).children('li').not(firstLi).css({display: lis[1].style.display === 'block'? 'none' : 'block'});
					} else {
						$(this).children('li').not(firstLi).css({display: 'none'});
					}
				});
				$.each(friends, function(friend, link){
					var targ = typeof link === 'string'? defaultTarget : link[1];
					link = typeof link === 'string'? link : link[0];
					var li = liProt.clone(true);
					li.find('a').text(friend).attr({href: link, target: targ});
					friendsList.append(li);
				});
				friendsList.insertBefore($("#navigation-tree"));
				$(document).click(function(e){
					if($(e.target).parent().get(0) !== friendsList.get(0)){
						friendsList.children('li').not(friendsList.children('li').eq(0)).css({display: 'none'});
					}
				});
			}	
		};
	})().init();
});
</script>

NOTES: Similar to before with highlighting, the new thing that you need to notice is the handling of target. Below the highlighted friends variable is a highlighted defaultTarget variable. I have it currently set to "_blank". This means that unless another target is specified for a given link in the friends variable, the target will be that ("_blank"). In any case, if you want to specify differently in the friends var you can do as has been done for the "Scooter Doc Forum" item. Instead of a simple string for it's link, it has an array:

['http://scooterdoc.proboards.com/', '_self']

with the first item being the link, and the second item the desired target for that particular link. "_self" means the same window, just as if (under normal circumstances) there were no target and is what's required to really give users a choice when right clicking on the link.

If you want to change the default to "_self" you can. Then any ones you want to be opened in a new window will have to be set individually to "_blank". If you're happy with the default target (whatever you end up choosing there) for all links, then none of them need to be set separately and the "Scooter Doc Forum" item could revert to:

'http://scooterdoc.proboards.com/'

Any questions or problems, just let me know.