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.

How to create/add drop down menu

View previous topic View next topic Go down

Solved How to create/add drop down menu

Post by Diana on October 3rd 2015, 9:55 pm

I'd like to add a custom button in the menu that would fold out links to html pages on my forum. How do I do that? My forum is phpbb2.


Last edited by rhe on October 4th 2015, 4:55 pm; edited 1 time in total

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create/add drop down menu

Post by Ange Tuteur on October 3rd 2015, 10:35 pm

Hi @rhe,

Sorta like a dropdown, right ? Try the following :

Go to Modules > JavaScript codes management > Create a new script

Placement : In all the pages
Code:
$(function() {
  var item = {
        name : 'Dropdown',
        subItems : {
          'HTML Page 1' : '/h1-',
          'HTML Page 2' : '/h2-',
          'HTML Page 3' : '/h3-',
          'HTML Page 4' : '/h4-'
        }
      },
     
      link = document.createElement('A'),
      dropdown = document.createElement('DIV'),
      str = '', i,
      menu = document.querySelector ? document.querySelector('.bodyline > table + table') : $('.bodyline > table + table')[0];

  if (menu) {
    menu = menu.getElementsByTagName('TD')[0];

    dropdown.id = 'fa_menu_dd';
    dropdown.className = 'dd-hidden';
    for (i in item.subItems) str += '<a href="' + item.subItems[i] + '" class="dropdown-item">' + i + '</a>';
    dropdown.innerHTML = str;

    link.innerHTML = item.name;
    link.className = 'mainmenu';
    link.href = '#';
    link.onclick = function() {
      var menu = document.getElementById('fa_menu_dd'), offset = $(this).offset();
      if (menu) {
        if (/dd-hidden/.test(menu.className)) {
          menu.className = '';
          menu.style.left = offset.left + 'px';
          menu.style.top = offset.top + 'px';
        } else {
          menu.className = 'dd-hidden';
        }
      }
      return false;
    };

    menu.appendChild(link);
    menu.appendChild(dropdown);
  }
});

Then add the following CSS to your stylesheet :
Code:
#fa_menu_dd {
  background-color:#333;
  background-color:rgba(0, 0, 0, 0.7);
  border:1px solid #000;
  border-radius:3px;
  padding:3px;
  margin-top:15px;
  position:absolute;
}

#fa_menu_dd.dd-hidden { display:none }

#fa_menu_dd a {
  color:#FFF;
  display:block;
  margin:3px 0;
}


The script will create a new menu link, but you'll need to make some modifications inside the item object. This :
Code:
  var item = {
        name : 'Dropdown',
        subItems : {
          'HTML Page 1' : '/h1-',
          'HTML Page 2' : '/h2-',
          'HTML Page 3' : '/h3-',
          'HTML Page 4' : '/h4-'
        }
      },

The name at the top is the texts that appear inside the link. ( Dropdown currently )

The subItems object contains the links available in the dropdown. To the left of the colon is the link name and to the right is the URL it links to, in short TEXT:URL pairs. Make sure to separate each pair by a comma.

If any questions let me know. 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: How to create/add drop down menu

Post by Diana on October 4th 2015, 2:54 pm

Wow, thanks so much for this. I have further questions though: can I add an image instead of the text "dropdown"?
I want to create this menu: http://help.forumotion.com/t140676-what-are-the-codes-for-putting-mouse-over-menu-images-in-css
And would like an image for the dropdown menu to go with the rest of the menu buttons. Is it possible?

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create/add drop down menu

Post by Ange Tuteur on October 4th 2015, 4:00 pm

Yeah it's possible, just leave the name blank without any texts expect for the quotes of course. Smile

Then find this part in the script :
Code:
link.className = 'mainmenu';

and add this after it :
Code:
link.id = 'fa_dropdown_link';


After that, you should be able to use the following CSS to style it :
Code:
/* dropdown link */
#fa_dropdown_link{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;display:inline-block;}
#fa_dropdown_link:hover{background:url(/img.gif) no-repeat 0 0;}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to create/add drop down menu

Post by Diana on October 4th 2015, 4:42 pm

Hey, thanks so much! I got it working Smile

Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: How to create/add drop down menu

Post by Ange Tuteur on October 4th 2015, 5:02 pm

You're welcome ^^

Topic archived

Have a great day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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