Drop-down Menu

Hello.

I'd like to add a drop-down menu on my forum, specifically in the black area on the right side of our logo, you can see it here: http://i.imgur.com/pUMSxoz.png

I'd like It to include some of our Navigation options, such as Memberslist, Groups, Profiles also the Log IN/OUT. But, I want to keep the Portal and the Index right where they are. (P.S. I want to remove the PMs part completely)

I'd want to know how to do It, also If It's possible in the first place.

Thanks in advance.

P.S. I wasn't sure where to post this, It was either int he Coding section or Appearance section, I figured here was more suitable? If not I apologize.

Is your forum's version punBB?

Yes

Hello Anzo,

Something like this ?
Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below and submit :

Code:

$(function() {
  $('#pun-navlinks ul').append('<li style="float:right;"><a class="mainmenu drop-nav" href="/" onclick="return false;">Navigation</a><div id="dropdown_nav" style="position:absolute;display:none;z-index:3;"></div></li>');
  $('#pun-navlinks li:has(a[href="/login"]), #pun-navlinks li:has(a[href^="/login?logout"]), #pun-navlinks li:has(a[href="/memberlist"]), #pun-navlinks li:has(a[href="/groups"]), #pun-navlinks li:has(a[href^="/profile"])').appendTo('#dropdown_nav');
  $('#pun-navlinks li:has(a[href^="/privmsg"])').remove();
  $('#dropdown_nav li').css('display','block');
  $('.drop-nav').click(function() {
    if ($('#dropdown_nav').css('display') == 'none') $('#dropdown_nav').css({'display':'','left':$(this).offset().left+'px','top':$(this).offset().top+40+'px'});
    else $('#dropdown_nav').css('display','none');
  });
});

Then a bit of CSS :
Display > Colors > CSS stylesheet

Code:

#dropdown_nav {
  background:#0D0D0D;
  border:1px solid #E09E0E;
  min-width:100px;
}

You can change the style as you wish.

I added the JS and the CSS but It's not showing anywhere.

You have placed the script here ? :

Placement : in all the pages

Code:

$(function() {
  $('#pun-navlinks ul').append('<li style="float:right;"><a class="mainmenu drop-nav" href="/" onclick="return false;">Navigation</a><div id="dropdown_nav" style="position:absolute;display:none;z-index:3;"></div></li>');
  $('#pun-navlinks li:has(a[href="/login"]), #pun-navlinks li:has(a[href^="/login?logout"]), #pun-navlinks li:has(a[href="/memberlist"]), #pun-navlinks li:has(a[href="/groups"]), #pun-navlinks li:has(a[href^="/profile"])').appendTo('#dropdown_nav');
  $('#pun-navlinks li:has(a[href^="/privmsg"])').remove();
  $('#dropdown_nav li').css('display','block');
  $('.drop-nav').click(function() {
    if ($('#dropdown_nav').css('display') == 'none') $('#dropdown_nav').css({'display':'','left':$(this).offset().left+'px','top':$(this).offset().top+40+'px'});
    else $('#dropdown_nav').css('display','none');
  });
});

I was looking at your forum, but did not see it in the in all pages script, unless you removed it.

Oh, fantastic. It's showing!

Thanks a lot mate

EDIT: If It's not too much, I'd like to include FAQ and Search as well, what do I add to the script?

In this part of the script you add your selected nav links :

Code:

$('#pun-navlinks li:has(a[href="/login"]), #pun-navlinks li:has(a[href^="/login?logout"]), #pun-navlinks li:has(a[href="/memberlist"]), #pun-navlinks li:has(a[href="/groups"]), #pun-navlinks li:has(a[href^="/profile"])')

So to add the faq we'd write #pun-navlinks li:has(a[href="/faq"]) and add it to the selectors :

Code:

$('#pun-navlinks li:has(a[href="/login"]), #pun-navlinks li:has(a[href^="/login?logout"]), #pun-navlinks li:has(a[href="/memberlist"]), #pun-navlinks li:has(a[href="/groups"]), #pun-navlinks li:has(a[href^="/profile"]), #pun-navlinks li:has(a[href="/faq"])')

If you can't get it, let me know the links you want and I'll do it for you.

Nah, I got it Thanks a lot.