Menu Display template: Responsive side nav with toggle dropdown

RE: RE: Menu Display template: Responsive side nav with toggle dropdown

2022-04-29T12:47:37Z

And this is an example with dropdown effect:

<#if entries?has_content>
	<nav class="vertical">
	<ul>	
	<#list entries as navigationEntry>
		<#assign children = navigationEntry.getChildren() />
			<li>
				<#if children?has_content>
					<a href="${navigationEntry.getURL()}">${navigationEntry.getName()} +</a>
					<@displayChildren curChildren=children />
				<#else>
					<a href="${navigationEntry.getURL()}">${navigationEntry.getName()}</a>
				</#if>
			</li>
	</#list>
	</ul>	
	</nav>
</#if>

<#macro displayChildren curChildren>
		<ul>	
		<#list curChildren as childEntry>
			<li>
				<#assign children = childEntry.getChildren() />
				<#if children?has_content>
					<a href="${childEntry.getURL()}">${childEntry.getName()} +</a>
					<@displayChildren curChildren=children />
				<#else>
					<a href="${childEntry.getURL()}">${childEntry.getName()}</a>
				</#if>
			</li>
		</#list>
		</ul>
</#macro>

<style type="text/css">
nav.vertical{
  position:relative;
  background:#667;
}

nav.vertical ul{
  list-style: none;
}

nav.vertical li{
  position:relative;
}

nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  transition:0.2s;
}

nav.vertical li:hover > a{
  background:#778;
}

nav.vertical ul ul{
  background:rgba(0,0,0,0.1);
  padding-left:20px;
  transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}

nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.25s ease-in;
}
</style>

RE: RE: Menu Display template: Responsive side nav with toggle dropdown

2022-04-29T12:35:25Z

I added a bit of CSS, here the full code:

<#if entries?has_content>
	<nav class="vertical">
	<ul>	
	<#list entries as navigationEntry>
			<li>
				<a href="${navigationEntry.getURL()}">${navigationEntry.getName()}</a>
				<@displayChildren curNavigationEntry=navigationEntry />
			</li>
			
	</#list>
	</ul>	
	</nav>
</#if>

<#macro displayChildren curNavigationEntry>
	<#assign children = curNavigationEntry.getChildren() />
	<#if children?has_content>
		<ul>	
		<#list children as childEntry>
			<li>
				<a href="${childEntry.getURL()}">${childEntry.getName()}</a>
				<@displayChildren curNavigationEntry=childEntry />
			</li>
		</#list>
		</ul>
	</#if>
</#macro>

<style type="text/css">
	nav.vertical{
		position:relative;
		width:200px;
	}

	nav.vertical ul{
		list-style: none;
	}
	
	nav.vertical li{
		position:relative;
	}
	
	nav.vertical a{
		display:block;
		color:#eee;
		text-decoration:none;
		padding:10px 15px;
		background:#667;
		transition:0.2s;
	}
	
	nav.vertical li:hover > a{
		background:#778;
	}

	nav.vertical ul ul{
	  padding: 0px;
		position:absolute;
		left:0%;
		top:0;
		width:100%;
		visibility:hidden;
		opacity:0;
		transition: transform 0.2s;
		transform: translateX(50px);
	}
	
	nav.vertical li:hover > ul{
		left:100%;
		visibility:visible;
		opacity:1;
		transform: translateX(0px);
	}
</style>

RE: Menu Display template: Responsive side nav with toggle dropdown

2022-04-29T11:48:02Z

Hello I don't have a full example, but I just wrote this very simple template. If you start from it, adding some code and working with css you should be able to get what you want.

<#if entries?has_content>
	<ul>	
	<#list entries as navigationEntry>
			<li>
				<a href="${navigationEntry.getURL()}">${navigationEntry.getName()}</a>
				<@displayChildren curNavigationEntry=navigationEntry />
			</li>
			
	</#list>
	</ul>	
</#if>

<#macro displayChildren curNavigationEntry>
	<#assign children = curNavigationEntry.getChildren() />
	<#if children?has_content>
		<ul>	
		<#list children as childEntry>
			<li>
				<a href="${childEntry.getURL()}">${childEntry.getName()}</a>
				<@displayChildren curNavigationEntry=childEntry />
			</li>
		</#list>
		</ul>
	</#if>
</#macro>

RE: Menu Display template: Responsive side nav with toggle dropdown

2022-05-02T16:23:00Z

Hi,

You can use Split Button Dropdowns template itself and add css for making it display in list Ex:

<#include "${templatesPath}/NAVIGATION-MACRO-FTL" />

<#if !entries?has_content>
	<#if themeDisplay.isSignedIn()>
		<div class="alert alert-info">
			<@liferay.language key="there-are-no-menu-items-to-display" />
		</div>
	</#if>
<#else>
	<#assign
		portletDisplay = themeDisplay.getPortletDisplay()

		navbarId = "navbar_" + portletDisplay.getId()
	/>

	<div id="${navbarId}">
		<ul class="navbar-site split-button-dropdowns">
			<#assign navItems = entries />

			<#list navItems as navItem>
				<#assign showChildrenNavItems = (displayDepth != 1) && navItem.hasBrowsableChildren() />

				<#if navItem.isBrowsable() || showChildrenNavItems>
					<#assign
						nav_item_css_class = ""
						nav_item_href_link = ""
					/>

					<#if navItem.isChildSelected() || navItem.isSelected()>
						<#assign nav_item_css_class = "active" />
					</#if>

					<#if navItem.isBrowsable()>
						<#assign nav_item_href_link = "href='${navItem.getURL()}' ${navItem.getTarget()}" />
					</#if>

					<li>
						<#if showChildrenNavItems>
							<#assign toggle_text>
								<@liferay.language key="toggle" />
							</#assign>

							<div class="btn-group">
						</#if>

						<a class="${nav_item_css_class} btn btn-secondary" ${nav_item_href_link}><span>${navItem.getName()}</span></a>

						<#if showChildrenNavItems>
							<button aria-expanded="false" aria-haspopup="true" class="${nav_item_css_class} btn btn-secondary c-px-2 dropdown-toggle" data-toggle="liferay-dropdown" type="button">
								<@liferay_aui.icon
									image="angle-down"
									markupView="lexicon"
								/>

								<span class='sr-only'>${toggle_text}</span>
							</button>

							<ul aria-expanded="false" class="child-menu dropdown-menu" role="menu">
								<@buildChildrenNavItems
									displayDepth=displayDepth
									navItem=navItem
								/>
							</ul>

							</div>
						</#if>
					</li>
				</#if>
			</#list>
		</ul>
	</div>

	<@liferay_aui.script use="liferay-navigation-interaction">
		var navigation = A.one('#${navbarId}');

		Liferay.Data.NAV_INTERACTION_LIST_SELECTOR = '.navbar-site';
		Liferay.Data.NAV_LIST_SELECTOR = '.navbar-site';

		if (navigation) {
			navigation.plug(Liferay.NavigationInteraction);
		}
	</@>
</#if>


<style>
	.split-button-dropdowns {
		display:flex;
		flex-direction:column;
		}
</style>

Menu Display template: Responsive side nav with toggle dropdown

2022-04-28T15:44:54Z

Hey,

I'm having difficulties understanding Freemarker in the Menu Display Template and would like to ask if there is someone who has a template where the side nav is vertical and dropdowns with the sublinks show when you click on an arrow.

Basically just like the side nav from Liferay itself.

Has someone programmed this already?

It would be the order of "List Menu", but with the link style like "Split Button Dropdowns" and the subsites are open and closable.

P.s.: Where is a full list/documentation of classes you could use in templates?