Move Participated and other buttons into a drop down list

[Former Member]

Not sure if this is possible via the Headers & Footers but ive posted this here purely as im using the scripts in my Global Header.

Im using the below scripts to create some more options to the right of the nav tree and to the left of the "Participated" button

My question is how can i pull all of these including the participated button inside a drop down box with the same height and style of the Nav tree with the title "Board Options"?

<script>

$(function(){

var recent = $("a.recent-threads-button");

recent.clone().attr("href", "/members?dir=desc&sort=posts").html(" Top Posters").insertBefore($("#navigation-tree"));

if (proboards.data("route").name == "home") {

var lastUpdated = $(".last-updated > a").attr("href");

recent.clone().attr("href", lastUpdated).html("Last Post").insertBefore($("#navigation-tree"));

};

});

</script>



<script>

$(function () {

$("a.recent-threads-button:first").clone().attr({

"href" : "/posts/recent",

"title" : "Recent forum Posts"

}).html("Recent Posts").insertBefore($("#navigation-tree"));

$("a.recent-threads-button:first").clone().attr({

"href" : "javascript:proboards.home.markBoardsRead()",

"title" : "Mark all boards read"

}).html("Mark All Read").insertBefore($("#navigation-tree"));

/* make sure board read url is set if not */

if (!proboards.data('mark_boards_read_url')) {

proboards.data('mark_boards_read_url', /* location.origin + */

location.protocol + "//" + location.host + '/boards/mark/read')

}

});

</script>

Thanks
Dave

[Chris]

Try adding the following to run after any script you may have for adding those additional buttons

<!-- Add extra breadcrumb buttons to a dropdown menu -->
<script>
$(function () {
if ($('.recent-threads-button').length > 1)
$('<ul class="select_menu_list">')
.insertAfter('.recent-threads-button:last')
.append($('.recent-threads-button').removeClass('recent-threads-button')
.wrap('<li>').parent())
.wrap('<li class="ui-front selectMenuButton" style="list-style:none;">')
.selectMenu({
staticStatus : true,
status : 'Board Options'
})
.data('selectMenu').box.addClass('float-right').css({
marginLeft : '10px'
})
})
</script>

[Former Member]

Thanks Chris 

How can i target this to use CSS?

Id like to try and make the options in the box the full width of the box seperated with a 1px solid back line and centered You can see the hover effect below.




Thanks
Dave

[Chris]

The entire menu is wrapped in a class of ui-front which I don't believe is used anywhere else on Proboards so that could be used to target the particular menu without affecting the actions menu for example. The links themselves still bear the class name recent-threads-button which is why they appear floated right in the menu rather than spanning the entire width. You could introduce a CSS rule to counteract that (e.g .ui-front .select_menu_list .recent-threads-button {property:value} ) or modify a line in the script to remove that class when being inserted into the menu:

.append($('.recent-threads-button').removeClass('recent-threads-button')

[Former Member]

Thanks Chris

That works perfectly

Dave