Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VHS Manual Menu with Image or not (Bootstrap MegaMenu / SiteHeader)
<f:section name="BootstrapMegaMenu">
<header class="navbar-fixed-top">
<div id="mainHeader" class="gradient-header" role="banner">
<div class="container-fluid">
<nav class="navbar navbar-default scrollMenu" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/path/logo.svg" height="" width="" class="img-responsive alt="Alt Text"/></a>
</div>
<div class="collapse navbar-collapse" id="mainMenu">
<v:page.menu>
<ul class="nav navbar-nav pull-right">
<f:for each="{menu}" as="item">
<v:page.resources.fal table="pages" field="media" uid="{item.uid}" as="images">
{images -> v:iterator.first() -> v:variable.set(name: 'image')}
<li class="primary {v:media.exists(then: 'MegaMenuTrigger', else: '', file: '{image.url}')}">
<f:link.page pageUid="{item.uid}"
title="{item.title}"
class="firstLevel{f:if(condition: item.hasSubPages, then: ' hasSubMenu', else: '')}{f:if(condition: item.active, then: ' active', else: '')}">
{item.title}
</f:link.page>
<f:if condition="{item.hasSubPages}">
<v:page.menu pageUid="{item.uid}">
<f:if condition="{v:media.exists(then: '1', else: '', file: '{image.url}')}">
<f:then>
<div class="MegaMenu subMenu">
<div class="container-fluid">
<div class="row">
<h2>{item.title}</h2>
<div class="col-sm-6">
<div class="megaInner">
<f:image src="{image.url}" alt="{image.alternative}{f:if(condition: image.description, then: ' {image.description}', else: '')}" class="img-responsive" width="" />
</div>
</div>
<div class="col-sm-6">
<div class="megaInner">
<p>{item.abstract}</p>
<ul>
<f:for each="{menu}" as="subItem">
<li>
<f:link.page pageUid="{subItem.uid}"
title="{subItem.title}">
{subItem.title}
</f:link.page>
</li>
</f:for>
</ul>
</div>
</div>
</div>
</div>
</div>
</f:then>
<f:else>
<ul class="subMenu">
<f:for each="{menu}" as="subItem">
<li>
<f:link.page pageUid="{subItem.uid}"
title="{subItem.title}"
class="{f:if(condition: item.active, then: ' active', else: '')}">
{subItem.title}
</f:link.page>
</li>
</f:for>
</ul>
</f:else>
</f:if>
</v:page.menu>
</f:if>
</li>
</v:page.resources.fal>
</f:for>
</ul>
</v:page.menu>
</div>
</div>
</nav>
</div>
</div>
</header>
</f:section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.