Jump to content

How to add dropdown with categories in header menu


Tech Support
 Share

Recommended Posts

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.

categories_dropdown.thumb.png.01c37959821d4a07ab2290fb1247802e.png

 

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);
}

 

  • Like 2
Link to comment
Share on other sites

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 by davex
Link to comment
Share on other sites

  • 7 months later...

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...