The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Moving drop-down menu widget into Navbar or Toolbar?

3 posters

Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Sat Apr 09 2016, 18:39

My last question, and this is a whooper!

If you look at my forum, http://www.a-4-d.com/, on the right side, where the widgets are, a bit down on the page, you can see four drop-down menus. Ideally I would like to move these into the Navbar or into the Toolbar, so that people can use them from the top of the page, and not have to scroll down to find them. Additionally, I would like to style them to either fit my Navbar or my Toolbar. Is this possible?
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Sun Apr 10 2016, 12:06

Soulmonster wrote:My last question, and this is a whooper!

If you look at my forum, http://www.a-4-d.com/, on the right side, where the widgets are, a bit down on the page, you can see four drop-down menus. Ideally I would like to move these into the Navbar or into the Toolbar, so that people can use them from the top of the page, and not have to scroll down to find them. Additionally, I would like to style them to either fit my Navbar or my Toolbar. Is this possible?

Maybe I should phrase it a bit more generally:

Is it possible to insert a drop-down menu on the toolbar?
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Guest Wed Apr 13 2016, 08:05

@Soulmonster,
Sorry for the delay in a response. To answer your question, YES, you can make a Drop Down Menu in PhpBB2. To do so, click the link below and look at @Ange Tuteur's code and it should help you!

https://help.forumotion.com/t143683-how-to-create-add-drop-down-menu

Regards,
James


Last edited by Meliodas on Wed Apr 13 2016, 17:28; edited 1 time in total (Reason for editing : Added Link!)
avatar
Guest
Guest


Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Ape Wed Apr 13 2016, 17:21

Meliodas wrote:@Soulmonster,
Sorry for the delay in a response. To answer your question, YES, you can make a Drop Down Menu in PhpBB2. To do so, click the link below and look at @Ange Tuteur's code and it should help you!

Regards,
James
@Meliodas You did not give a link to your last post Wink

Please EDIT your post and add the link

Thank you.

APE


Moving drop-down menu widget into Navbar or Toolbar? Left1212Moving drop-down menu widget into Navbar or Toolbar? Center11Moving drop-down menu widget into Navbar or Toolbar? Right112
Moving drop-down menu widget into Navbar or Toolbar? Ape_b110
Moving drop-down menu widget into Navbar or Toolbar? Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19202
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Guest Wed Apr 13 2016, 17:28

@APE,
Whoops! Just edited that! I thought for sure I had that put in. My bad!

Regards,
James
avatar
Guest
Guest


Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Wed Apr 13 2016, 19:21

Meliodas wrote:@APE,
Whoops! Just edited that! I thought for sure I had that put in. My bad!

Regards,
James

Thank you James. It does not work on my forum, could be that my forum is PhpBB3 and not PhpBB2. I have no idea on how to convert it to my forum.
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Thu Apr 14 2016, 20:29

avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Ange Tuteur Fri Apr 15 2016, 02:49

Hi,

Sorry for the delay, I've been very busy. Go to Admin panel > Modules > JavaScript codes management and create a new script

Placement : In all the pages
Code:
$(function(){$(function(){
  var btn = $('<a id="fa_toggle_button" href="#">Toggle</a>').click(function() {

    var box = document.getElementById('fa_toggle_box'),
        offset = $(this).offset();
   
    if (/none/.test(box.style.display)) {
      box.style.display = '';
      box.style.left = offset.left + 'px';
    } else {
      box.style.display = 'none';
    }
   
    return false;
  })[0],

  box = $('<div id="fa_toggle_box" style="display:none;" />'),

  form = $('form:has(> select)', document.getElementById('right')),

  share = document.getElementById('fa_share');

  if (form[0] && share) {
    box.append(form);
    document.body.appendChild(box[0]);
    share.appendChild(btn);

    $('head').append('<style type="text/css">#fa_toggle_box { background:#333; padding:3px; position:fixed; z-index:30000; top:30px; } #fa_toggle_box select { margin:3px; }</style>');
  }
});});
Save the script and it should add a new button to the toolbar called "toggle". Click that button to toggle the dropdown. If you want to change the text to an icon, or add other attributes such as a title, modify the HTML at the top of the script :
Code:
<a id="fa_toggle_button" href="#">Toggle</a>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Fri Apr 15 2016, 12:26

Ange Tuteur wrote:Hi,

Sorry for the delay, I've been very busy. Go to Admin panel > Modules > JavaScript codes management and create a new script

Placement : In all the pages
Code:
$(function(){$(function(){
  var btn = $('<a id="fa_toggle_button" href="#">Toggle</a>').click(function() {

    var box = document.getElementById('fa_toggle_box'),
        offset = $(this).offset();
   
    if (/none/.test(box.style.display)) {
      box.style.display = '';
      box.style.left = offset.left + 'px';
    } else {
      box.style.display = 'none';
    }
   
    return false;
  })[0],

  box = $('<div id="fa_toggle_box" style="display:none;" />'),

  form = $('form:has(> select)', document.getElementById('right')),

  share = document.getElementById('fa_share');

  if (form[0] && share) {
    box.append(form);
    document.body.appendChild(box[0]);
    share.appendChild(btn);

    $('head').append('<style type="text/css">#fa_toggle_box { background:#333; padding:3px; position:fixed; z-index:30000; top:30px; } #fa_toggle_box select { margin:3px; }</style>');
  }
});});
Save the script and it should add a new button to the toolbar called "toggle". Click that button to toggle the dropdown. If you want to change the text to an icon, or add other attributes such as a title, modify the HTML at the top of the script :
Code:
<a id="fa_toggle_button" href="#">Toggle</a>

That's fantastic and you never have to apologize for not helping me soon enough. I appreciate any help I can get, on your schedule.

I have a few questions, both to understand that script (since I know so little about JS) and on how to change it:

1. What part of the script defines the position of the "toggle" to be in the toolbar?

2. What part of the script is responsible for moving the widgets into the drop-down?

3. Ideally, I would like to break it down into four different drop down menus, one for each drop-down widget, is this possible?

4. Also ideally, I would like to be able to style the menus with CSS. Is that possible or must the drop-dpwn menu be re-made then?

EDIT: After a lot of testing and reading I have been able to style the forms, so point 4 is fixed.
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Moving drop-down menu widget into Navbar or Toolbar? Empty Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster Sat Apr 23 2016, 15:38

Bump.
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

Back to top

- Similar topics

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