howto How to add dropdown with categories in header menu

[Tech Support]

This article provides step by step instruction on how to get categories dropdown in site header. Please note the CSS styles described here are not 100% perfect, as they in some way overlap with styles for upload item dropdown. Please adjust them as needed by your site design.

 

Step 1. Go to Website UI -> Global blocks and click on Add block button at the bottom. In the new block line specify block name as Header Categories and under block type select list_categories. Save.

 

Step 2. Open the newly appeared Header Categories block for editing. Configure block parameters as needed, e.g. items_per_page if you want to limit the number of categories displayed, and other filters if you want to limit which categories are displayed. Enter the following code into template code area and save:

{{if count($data)>0}}
	<li class="drop">
		<span>{{$lang.header.primary_menu_categories}}</span>
		<ul>
			{{foreach from=$data item="item"}}
				<li>
					<a href="{{$lang.urls.videos_by_category|replace:"%DIR%":$item.dir|replace:"%ID%":$item.category_id}}">{{$item.title}}</a>
				</li>
			{{/foreach}}
		</ul>
	</li>
{{/if}}

 

Step 3. Go to Website UI -> Page components -> include_header_general.tpl for editing. Find the <LI> node that renders categories menu item, similar to this:

<li {{if $page_id=='categories_videos' || $page_id=='categories_albums'}}class="selected"{{/if}}>
		<a href="{{$lang.urls.categories_videos}}" id="item6">{{$lang.header.primary_menu_categories}}</a>
</li>

And replace it with this block insert:

{{insert name="getGlobal" global_id="list_categories_header_categories"}}

 

Step 4. To make styles look better, add the following basic styling into your theme CSS file:

.navigation .primary .drop > span {
  display: block;
  position: relative;
  background-color: #e0dfdf;
  padding: 12px 38px 12px 17px;
  cursor: pointer;
}
.navigation .primary .drop > span:after {
  position: absolute;
  z-index: 1;
  content: "\e901";
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5px;
  top: calc(50% - 1px);
  right: 20px;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateY(-50%) rotate(0);
  transform: translateY(-50%) rotate(0);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.navigation .primary .drop:hover > span {
  background-color: #276fdb;
  color: #fff;
}
.navigation .primary .drop:hover > span::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

 

[davex]

Thanks, but when I have added everything, when you click on any menu all the letters for a few seconds become big and go back to their normal place.

 

I see that it only happens with google chrome, with safari it does not happen.

Edited October 7, 2021 by davex

[Tech Support]

26 minutes ago, davex said:

I see that it only happens with google chrome, with safari it does not happen

Please create a support ticket, we will take a look.

[Jim]

I may try to add this, did it work ok?

With the dropdown links added, is the link to the main categories page lost? It would be good to keep this link at the top of the dropdown? 

[Tech Support]

Yes, the link to the main categories page will be lost with this code. You may need to add more complicated design of the drop down to include also the link to all categories. This tutorial provides only basic things, not concentrating on design itself.

[Jim]

This worked fine thanks. Another li could be added for all categories which worked fine also.

Could the same idea be applied to do a dropdown to other header buttons such as models and channels?

[Tech Support]

3 hours ago, Jim said:

Could the same idea be applied to do a dropdown to other header buttons such as models and channels?

Absolutely, please use list_models and list_dvds blocks similar to list_categories block in this guide to display the same thing for models and channels.