How To: Add a Dropdown menu to Toolbar in Framework 6.0+

PLEASE NOTE: This article only applies to toolbars in Portal Framework 6.0+! 

If you're on a lower version number, please refer to this article instead: Adding a Dropdown Menu to Toolbar in Framework 5.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 DropdownToolbar.ZIP file 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:

Inside the .ascx file 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:

<!----------------------------------------------------->
<!--------------Start Toolbar Dropdowns-------------->
<!----------------------------------------------------->
<style type="text/css">
#navtop{
margin-top:2px;
height: 30px;
font-family: Arial; /**** The font-family element here will change the font the button and dropdown use ****/
font-size:14px; /**** The font-size element here will change the size of the text in the button and dropdown ****/
}

#navbar {
margin: 0;
padding: 0;
}


#navbar a {
font-weight:bold;/**** The font-weight element here will change the text being bold ****/
color: white; /**** The color element here will change the text color of the button ****/
text-decoration:none;
}

#navbar li {
list-style: none;
float: left;
}

#navbar li a {
display: block;
padding: 5px 20px;
background-color: #124e91; /**** The background-color element here will change the background color of the menu ****/
text-decoration: none;
cursor: pointer;
}

#navbar li ul {
z-index:1500;
display: none;
}

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}

#navbar li:hover li{
margin-right:0px;
float: none;
}

#navbar li:hover li a{
color: white; /**** The color element here will change the text color of the dropdown's links ****/
}

#navbar li li a:hover {
background-color: #2bbaf9; /**** The background-color element here will change the background color when you hover over a link ****/
color: white; /**** The color element here will change the text color when you hover over a link ****/
transition:0.5s;
}

#navbar li li {
margin-right:0px!important;
}

.dropdownbtn{
margin-right:10px;
}

</style>

Several parts of it will already be commented saying how to change some of the looks of the button, like the font size, color, or text color! 

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 : 

<div class="navtop">
<ul id="navbar">
<!--Start Button 1 -->
<li class="dropdownbtn"><a>Button 1</a> 
<ul>
<li><a href="http://www.google.com">Dropdown Link 1</a></li> 
<li><a href="http://www.google.com">Dropdown Link 2</a></li> 
<li><a href="http://www.google.com">Dropdown Link 3</a></li> 
<li><a href="http://www.google.com">Dropdown Link 4</a></li> 
<li><a href="http://www.google.com">Dropdown Link 5</a></li> 
</ul>
</li>
<!-- End Button 1 -->

<!--Start Button 2 -->
<li class="dropdownbtn"><a>Button 2</a> 
<ul>
<li><a href="http://www.google.com">Dropdown Link 1</a></li> 
<li><a href="http://www.google.com">Dropdown Link 2</a></li> 
<li><a href="http://www.google.com">Dropdown Link 3</a></li> 
<li><a href="http://www.google.com">Dropdown Link 4</a></li> 
<li><a href="http://www.google.com">Dropdown Link 5</a></li> 
</ul>
</li>
<!-- End Button 2 -->

</ul>
</div>
<!----------------------------------------------------->
<!--------------End Toolbar Dropdowns--------------->
<!----------------------------------------------------->

You can edit the <a href="http://www.google.com">Dropdown Link 1</a> sections to put the URL of the page you'd like to navigate to, and where it currently says Dropdown Link 1 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

<li><a href="http://www.google.com">Dropdown Link 1</a></li> 

before the </ul> tag! 

And if you would like to add in another drop down button, you can copy the section between <!--Start Button 2 --> and <!-- End Button 2 --> comments and paste after the <!-- End Button 2 --> but before the </ul> after it and edit it to fit what you'd like to add in! 

Conversely you can remove a dropdown by deleting between the same sections (<!--Start Button 2 --> and <!-- End Button 2 -->).

If you would like to add these dropdown menus to your current Custom Toolbar (NOTE:don't use the Default, Basic, or OnSemble toolbars if you don't have a custom, make a copy of of one and edit it since they will be replaced during updates if they aren't separate custom toolbars!) copy and paste the sections from the <!----Start Toolbar Dropdowns----> and <!----End Toolbar Dropdowns----> sections into your Custom Toolbar before/after the buttons in the toolbar you'd like them to appear near.