The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Drop-down Menu

View previous topic View next topic Go down

Solved Drop-down Menu

Post by Anzo on September 12th 2014, 6:24 am

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.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Drop-down Menu

Post by SLGray on September 12th 2014, 6:27 am

Is your forum's version punBB?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36741
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Drop-down Menu

Post by Anzo on September 12th 2014, 6:31 am

Yes

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Drop-down Menu

Post by Ange Tuteur on September 12th 2014, 4:01 pm

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.


Last edited by Ange Tuteur on September 12th 2014, 5:51 pm; edited 1 time in total

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop-down Menu

Post by Anzo on September 12th 2014, 5:13 pm

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

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Drop-down Menu

Post by Ange Tuteur on September 12th 2014, 5:18 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop-down Menu

Post by Anzo on September 12th 2014, 5:25 pm

Oh, fantastic. It's showing!

Thanks a lot mate Smile

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

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Drop-down Menu

Post by Ange Tuteur on September 12th 2014, 5:28 pm

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop-down Menu

Post by Anzo on September 13th 2014, 2:49 am

Nah, I got it Very Happy Thanks a lot.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Drop-down Menu

Post by SLGray on September 13th 2014, 3:26 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36741
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum