Drop-down Menu
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
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.
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.
Re: Drop-down Menu
Is your forum's version punBB?

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

Re: Drop-down Menu
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 :
Then a bit of CSS :
Display > Colors > CSS stylesheet
You can change the style as you wish.
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.
Last edited by Ange Tuteur on September 12th 2014, 5:51 pm; edited 1 time in total
Re: Drop-down Menu
You have placed the script here ? :
Placement : in all the pages
I was looking at your forum, but did not see it in the in all pages script, unless you removed it.
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.
Re: Drop-down Menu
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?
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?
Re: Drop-down Menu
In this part of the script you add your selected nav links :
So to add the faq we'd write #pun-navlinks li:has(a[href="/faq"]) and add it to the selectors :
If you can't get it, let me know the links you want and I'll do it for you.
- 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.

Re: Drop-down Menu
Topic solved and archived

Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum