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 Custom Nav Button

View previous topic View next topic Go down

Solved Drop Down Custom Nav Button

Post by FrOsTyXi on April 27th 2015, 1:06 pm

Hello, I was wonder if i could get some help making a drop down nav button like this


punbb

Forum Link: TPSN

Thanks in advance!!

Regards
FrOsTyXi
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Sir. Mayo on April 27th 2015, 6:04 pm

Hello,

Have you give this tutorial a read yet.

Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Posted by one of the FM users on their forum.

Let me or us know if you need any help with the codes and what not.

Sir.Mayo
avatar
Sir. Mayo
Forumember

Male Posts : 977
Reputation : 90
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 27th 2015, 8:11 pm

I have the service button up on the nav bar now, this seems like more a mess than anything not any of the code is set how i need it with fb and twitter and such.

I need my drop down button to have service as the visible tab hover over and it drops down and 3 links will be there

Private CID
GTA Services
COD services

they will be linked to the posts for each, what i saw in that post was nothing im looking for and eve if it is it no where near i how need it set up

Regards
FrOsTyXi
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Sir. Mayo on April 27th 2015, 8:22 pm

You would have to change the code to suit your needs. The Tutorial is just a starting point for you to get the navbar set you. You would have to place the links and manually edit the code to suit your needs.
avatar
Sir. Mayo
Forumember

Male Posts : 977
Reputation : 90
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 27th 2015, 8:26 pm

Sorry was very confusing seemed to be too many places for links i need 3 would need it explained better than it is in that post also the demo is gone. Maybe @Ange Tuteur can explain this abit further


These are the buttons i have and just want the "Service" button to drop down with 3 other links in that drop down.

Code:
 <li id="nav_app_forums" class="left active"><a href="/" title="Forums"><i class="fa fa-comments"></i> Forums</a></li>
                                              <li id="nav_app_members" class="left "><a href="/memberlist" title="Go to Members List"><i class="fa fa-users"></i> Members</a></li>
                                              <li id="nav_app_faq" class="left "><a href="/faq" title="Go to FAQ"><i class="fa fa-info"></i> FAQ</a></li>
                                              <li id="nav_app_services" class="left "><a href="/f6-market-place" title="Services"><i class="fa fa-wrench"></i> Services</a></li>
                                              <li id="nav_app_portal" class="left "><a href="/portal" title="Go to Protal"><i class="fa fa-gamepad"></i> Portal</a></li>
                                              <li id="nav_app_store" class="left "><a href="/h5-store" title="CID"><i class="fa fa-check"></i> CID</a></li>
                                              <li id="nav_app_groups" class="left "><a href="/groups" title="Group Management"><i class="fa fa-gavel"></i> Groups</a></li>

Regards
FrOsTyXi
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 8:53 pm

bump
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 28th 2015, 9:57 pm

Hi @FrOsTyXi,

I wrote up a small prototype. Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Placement : In all the pages
Code:
$(function() {
  var dropDown = {
    '/profile?mode=editprofile' : '<a href="/profile?mode=editprofile">Information</a><br/><a href="/profile?mode=editprofile&page_profil=preferences">Preferences</a>',
    '/privmsg?folder=inbox' : '<a href="/privmsg?folder=inbox">Inbox</a><br/><a href="/privmsg?folder=sentbox">Sentbox</a>'
  }, a = document.getElementById('primary_nav').getElementsByTagName('A'), i = 0, j = a.length, k, d;
 
  for (; i<j; i++) {
    for (k in dropDown) {
      if (RegExp(k.replace(/\//g,'\\/').replace(/\?/,'\\?')).test(a[i].href)) {
        d = document.createElement('DIV');
        d.className = 'fa_dropdown';
        d.innerHTML = dropDown[k];
        d.style.display = 'none';
       
        a[i].className += ' fa_droplink';
        a[i].parentNode.insertBefore(d, a[i]);
       
        a[i].onclick = function() {
          var t = this.previousSibling;
          /none/.test(t.style.display) ? t.style.display = 'block' : t.style.display = 'none';
          t.style.left = $(this).offset().left + 'px';
          t.style.top = $(this).offset().top + 'px';
          return false;
        };
      }
    }
  }
});

At the top you'll see a object name dropDown. To the left of the colon is the URL of the link you want to modify ( just the path not the whole URL ), and to the right of the colon is the HTML for your dropdown. I have some examples for the inbox and edit profile.

You'll also need a bit of CSS :
Display > Colors > CSS stylesheet
Code:
/* dropdown link style */
.fa_droplink {
  background:red;
}

/* dropdown style */
.fa_dropdown {
  background:#EEE;
  border:1px solid #CCC;
  box-shadow:1px 6px 12px rgba(0, 0, 0, 0.175);
  position:absolute;
  padding:3px 6px;
  margin-top:20px;
}

You can get rid of the dropdown link style if you want. That's for if you want to modify the style of dropdown links.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 10:40 pm

@Ange Tuteur Problem i'm having is getting the links to work as shown this is the link for the service button /f6-market-place then in the drop down there should be "COD Services" /f72-call-of-duty-series "GTA Services" /f103-grand-theft-auto-v-services and last "Private CID" /t3994-service-ps3-unban-service-1st-private-cid-seller I must be doning something wron i cant even get the script to attach to the services button

Regards
FrOsTyXi
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 28th 2015, 10:49 pm

Your layout is completely different, so I had to change stuff around. Try now :
Code:
$(function() {
  var dropDown = {
    '/f6-market-place' : '<a href="/f72-call-of-duty-series">COD Services</a>'
  }, a = document.getElementById('primary_nav').getElementsByTagName('A'), i = 0, j = a.length, k, d;
 
  for (; i<j; i++) {
    for (k in dropDown) {
      if (RegExp(k.replace(/\//g,'\\/').replace(/\?/,'\\?')).test(a[i].href) && !/fa_droplink/.test(a[i].className)) {
        d = document.createElement('DIV');
        d.className = 'fa_dropdown';
        d.innerHTML = dropDown[k];
        d.style.display = 'none';

        a[i].onclick = function() {
          var t = this.previousSibling;
          /none/.test(t.style.display) ? t.style.display = 'block' : t.style.display = 'none';
          t.style.left = $(this).offset().left + 'px';
          t.style.top = $(this).offset().top + 'px';
          return false;
        };
       
        a[i].className += ' fa_droplink';
        a[i].parentNode.insertBefore(d, a[i]);
      }
    }
  }
});

I setup one of the links in the html. You know how to create html links, correct ?
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 10:59 pm

@Ange Tuteur If i see it once i will never forget and the menu is not dropping down for even the one link

Regards
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 28th 2015, 11:03 pm

It appears working for me ..? blackeye



You have to click the link.
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 11:07 pm

@Ange Tuteur hahah i'm so sorry i never clicked it got the links added in can i change the color of the box and link?


Last edited by FrOsTyXi on April 28th 2015, 11:18 pm; edited 1 time in total
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 28th 2015, 11:17 pm

Your object looks like this :
Code:
  var dropDown = {
    '/f6-market-place' : '<a href="/f72-call-of-duty-series">COD Services</a>'
  },

the URL of the link we're adding this to on the left, and the HTML on the right. More simply MENU URL:DROPDOWN HTML

You can add as much menu url:dropdown html pairs as you want, so long as they're separated by a comma.

For example :
Code:
  var dropDown = {
    '/' : '<a href="/">Homepage</a>',
    '/forum' : '<a href="/forum">Forum</a>',
    '/memberlist' : '<a href="/memberlist">Members</a>',
    '/h1-my-html-page' : '<div>My page</div><a href="/h1-">Go</a><br/><br/>...Example :D',
  },

You can add any HTML you want in the HTML string, as much links, blocks, etc...
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 11:19 pm

@Ange Tuteur wrote:Your object looks like this :
Code:
  var dropDown = {
    '/f6-market-place' : '<a href="/f72-call-of-duty-series">COD Services</a>'
  },

the URL of the link we're adding this to on the left, and the HTML on the right. More simply MENU URL:DROPDOWN HTML

You can add as much menu url:dropdown html pairs as you want, so long as they're separated by a comma.

For example :
Code:
  var dropDown = {
    '/' : '<a href="/">Homepage</a>',
    '/forum' : '<a href="/forum">Forum</a>',
    '/memberlist' : '<a href="/memberlist">Members</a>',
    '/h1-my-html-page' : '<div>My page</div><a href="/h1-">Go</a><br/><br/>...Example :D',
  },

You can add any HTML you want in the HTML string, as much links, blocks, etc...

Yes i am sorry got that set looks good can i change the background color and link color?
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 28th 2015, 11:23 pm

Of course, the background color is in the CSS I gave you.
http://help.forumotion.com/t140420-drop-down-custom-nav-button#954873

As for the links, you just need to add a ( for anchor ).
Code:
.fa_dropdown a { color:red }
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 28th 2015, 11:33 pm

@Ange Tuteur yes that is when i click them they change red but they look like this would like them white




avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 29th 2015, 12:40 am

Oh, you might need to use the !important flag to override the default style.
Code:
.fa_dropdown a {
  color:#FFF !important;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by FrOsTyXi on April 29th 2015, 12:49 am

@Ange TuteurSolved perfect!

Thank you sir

avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Drop Down Custom Nav Button

Post by Ange Tuteur on April 29th 2015, 1:21 am

You're welcome ^^

Topic archived

Have a nice day. Very Happy
avatar
Ange Tuteur
Forumaster

Male Posts : 13174
Reputation : 2871
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.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