How to put extra column in quick_navigation_menu template?

Here's what to do.

1) Find template quick_navigation_menu
2) You will find that the template contains two divs that start like this:
Code:
<div class="jumpMenuColumn">
3) You will want to insert a new one in between the two existing ones. Here's one I've made for you:
Code:
<xen:title>{xen:phrase quick_navigation_menu}</xen:title>
 
<xen:require css="quick_navigation_menu.css" />
 
<div class="section">
<div id="jumpMenu">
<div class="jumpMenuColumn">
<h3 class="primaryContent">{xen:phrase general_links}</h3>
<div class="secondaryContent">
<div class="blockLinksList">
<ul>
<xen:if is="{$homeLink}"><li><a href="{$homeLink}">{xen:phrase home}</a></li></xen:if>
<li><a href="{xen:link index}">{xen:phrase forums}</a></li>
<li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
<xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
</ul>
<ul>
<xen:if is="{$visitor.user_id}">
<li><a href="{xen:link members, $visitor}">{xen:phrase your_profile}</a></li>
<li><a href="{xen:link account}">{xen:phrase your_account}</a></li>
<li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
<xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
<xen:else />
<li><a href="{xen:link login}">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></li>
</xen:if>
</ul>
<ul>
<li><a href="{xen:link help}">{xen:phrase help}</a></li>
</ul>
</div>
</div>
</div>
<div class="jumpMenuColumn">
<h3 class="primaryContent">New Column Heading</h3>
<div class="secondaryContent nodeList">
<ol class="blockLinksList">
<li><a href=http://www.valvetime.net>ValveTime.net</a></li>
<li><a href=http://www.valvetime.net>ValveTime.net</a></li>
<li><a href=http://www.valvetime.net>ValveTime.net</a></li>
</ol>
</div>
</div>
<div class="jumpMenuColumn">
<h3 class="primaryContent">{xen:phrase forum_list}</h3>
<div class="secondaryContent nodeList">
<ol class="blockLinksList">
<xen:foreach loop="$nodes" value="$node">
<li class="d{$node.depth} {xen:if "{$selected} == 'node-{$node.node_id}'", 'OverlayScroller'}">
<a href="{xen:link {$nodeTypes.{$node.node_type_id}.public_route_prefix}, $node}"
class="{xen:if '{$node.node_type_id} == "Category"', 'OverlayCloser'} {xen:if "{$selected} == 'node-{$node.node_id}'", 'selected'}">
<span class="_depth{$node.depth} depthPad">{$node.title}</span>
</a>
</li>
</xen:foreach>
</ol>
</div>
</div>
</div>
<div class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">{xen:phrase close}</a></div>
</div>
4) These divs are currently fixed at 325px wide so unfortunately if you add a 3rd, it doesn't look right and drops one of the divs down below the others. So to squeeze another one in. The two divs together takes up 650px. If we divide that by 3 we get around 216px. So we now need to add some .CSS
5) Add the following to EXTRA.css OR amend the relevant value in quick_navigation_menu.css (if you amend the current value there is no need to add !important.)
Code:
.xenOverlay #jumpMenu .jumpMenuColumn
{
width: 217px!important;
}

Good luck :)
 
Is there a way of changing this with an addon? I want to avoid changing xf-original-files!
Unfortunately, I do not find any template hooks within quick_navigation_menu...
 
Template editing isn't a big issue as they can be merged if the master template changes in a later release.

Otherwise create a template modification.
 
Top Bottom