Dropdown Code Editor

Objective

To manually create a dropdown menu within your Training Center.

Background

The Training Center offers a method to customize HTML and CSS code in order to display pages in a dropdown menu. Other methods are to use our Styled Templates to create drop downs. The CSS code block method includes color coding, which can be helpful for customizing the dropdown code. Alternatively, the HTML code can be used for the same purpose, but without the color coding.

CSS

Copy the HTML code below.
Navigate to the page you want to add a dropdown to.
Click Edit and select Edit Live.
Click Style and select CSS from the dropdown menu.
Click the + sign to expand the CSS code block.
Paste or use CTRL + V on your keyboard to paste the copied HTML code into the CSS block.
Enter the page URL into the '/' portion.
For example, '/tc/companyname/page'. See the purple outlined area on the screenshot below.
Enter the title of the page into the 'Link' portion.
For example, 'PageName'. See the red outlined area on the screenshot below.
Repeat steps 7 and 8 for any additional pages you want linked in the customized drop down menu.
Copy all of the text within the CSS code block.
Click View and select Source.
Paste copied text into the Source/HTML.
Click Save.

HTML

Copy the HTML code below.
Navigate to the page you want to add a dropdown to.
Click Edit and select Edit Live.
Click View and select Source.
Paste copied text into the Source/HTML.
Enter the page URL into the '/' portion.
For example, '/tc/companyname/page'. See the purple outlined area on the screenshot below.
Enter the title of the page into the 'Link' portion.
For example, 'PageName'. See the red outlined area on the screenshot below.
Repeat steps 6 and 7 for any additional pages you want linked in the customized drop down menu.
Click Save.

---------COPY HTML BELOW----------

<div class="dropdown">
<button class="dropbtn">
&nbsp;Dropdown1&nbsp;
<img alt="dropdown-arrow.svg" class="internal default" height="20px" src="/@api/deki/files/292466/dropdown-arrow.svg" style="width: 20px; height: 20px;" width="20px" />
</button>

<div class="dropdown">
<button class="dropbtn">
&nbsp;Dropdown2&nbsp;
<img alt="dropdown-arrow.svg" class="internal default" height="20px" src="/@api/deki/files/292466/dropdown-arrow.svg" style="width: 20px; height: 20px;" width="20px" />
</button>

<div class="dropdown">
<button class="dropbtn">
&nbsp;Dropdown3&nbsp;
<img alt="dropdown-arrow.svg" class="internal default" height="20px" src="/@api/deki/files/292466/dropdown-arrow.svg" style="width: 20px; height: 20px;" width="20px" />
</button>

<div class="dropdown">
<button class="dropbtn">
&nbsp;Dropdown4&nbsp;
<img alt="dropdown-arrow.svg" class="internal default" height="20px" src="/@api/deki/files/292466/dropdown-arrow.svg" style="width: 20px; height: 20px;" width="20px" />
</button>

<div class="dropdown">
<button class="dropbtn">
&nbsp;Dropdown5&nbsp;
<img alt="dropdown-arrow.svg" class="internal default" height="20px" src="/@api/deki/files/292466/dropdown-arrow.svg" style="width: 20px; height: 20px;" width="20px" />
</button>

</div></pre>

Objective

Background

Steps

CSS or HTML

Copy HTML Below

CSS

HTML