How To: Add a Dropdown Menu to Toolbar in Framework 5.0

PLEASE NOTE: This article only applies to toolbars in Portal Framework 5.0.0 to 5.0.5!

If you're on 6.0+, please refer to this article instead: Adding a Dropdown Menu to Toolbar in Framework 6.0+

Adding a dropdown menu to your toolbar can add easier access to important pages that are always at hand for users without having to go through the normal left hand navigation.

It does take a bit of coding to add in, as well as server access, but we have attached a toolbar to this article that you can unzip and add to your Portal Toolbar Layouts folder. 

The folder location will be a similar path to this:

Drive:\inetpub\wwwroot\Production Portal\Layouts\Portal Toolbar Layouts\DropdownToolbar (You will need to create the DropdownToolbar folder!)

The file you will want to edit in the DropdownToolbar folder (after unzipping) will be the DropdownToolbar.ascx file.

Here is a sample of the dropdown menu that the attached file will display:

In it there will be many sections of code.

Within the Styling section (beginning with <style> and ending with </style>) you can edit the looks of the dropdown button.

By default it will look like this:

<style>
#dynamic_select,.select_button {
color:#ffffff; /* this will change the text color of the dropdown */
background: url('Layouts/Portal Toolbar Layouts/DropdownToolbar/images/arrowwhite.png') no-repeat; /* you can change this image to arrowwhite.png, arrowblack.png, arrowgrey.png or add your own image! */
background-position:right 5px center;
background-color: #53B7E8; /* this will change the color of the button itself */
padding: 3px;
font-size: 12px;
font-weight:bold;
border: 0px;
border-radius: 15px; /* if you do not want the button to be rounded change this to 0 */
/* width:115px; Can resize all with width, but may cut off text for the button title text */
-webkit-appearance: none;
}

#dynamic_select::-ms-expand { display: none; }
</style>

Several parts of it will already be commented saying how to change some of the looks of the button, like the rounded edges, color, or text color! There are also several down arrows included with this, though the default is white. Other colors included are black and grey, however if you have an image editing program like Photoshop, or using Pixlr, you could easily change the color of one if you need to match your own theme for more customization!

By default the toolbar dropdown button will look like this:

There will be another section  for the actual dropdown button itself that will look like this : 

<!-- --------------------------------------------------------------------------------------------------------- -->
<!-- -Button (copy this section for each dropdown button you'd like to have--- -->
<!-- --------------------------------------------------------------------------------------------------------- -->

<select id="dynamic_select" class="select_button">
<option value="" selected style="display:none">Menu</option> <!-- remove style="display:none;" if they'd like this line to show in actual menu that drops down -->
<option value="http://passageways/workgroups/0cfd3169-3e77-44b7-80d4-227647baa063.aspx">Menu Item 1</option>
<option value="http://passageways/workgroups/47debf4b-9dd6-4e20-b073-44276b01f2a8.aspx">Menu Item 2</option>
<option value="http://passageways/workgroups/2b7da4cb-8c56-40a7-afd4-e19205dffd28.aspx">Menu Item 3</option>
</select>
<!-- ------------------------------------------------------------------------------------ -->
<!-- ------------------------------End Button--------------------------------------- -->
<!-- ------------------------------------------------------------------------------------ -->

You can edit the value="" sections to put the URL of the page you'd like to navigate to, and where it currently says Menu Item # is where the title of the page or link you'd like to add would go in, this will display in the dropdown menu. 

Adding in more links to a dropdown is as easy as adding in another <option value="">Menu Item</option> before the </select> tag! 

And if you would like to add in another drop down button, you can copy the section between Button and End Button comments and paste after and edit it to fit what you'd like to add in!