Moving drop-down menu widget into Navbar or Toolbar?

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?

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?

@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

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

Please EDIT your post and add the link

Thank you.

APE

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

Regards,
James

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.

Bump.

@ange tuteur

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

Bump.