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

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

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
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

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.

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
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

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

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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

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 ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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?

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 }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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





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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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


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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

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