Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Migrating a Site to Silverstripe /

What you need to know when migrating your existing site to SilverStripe.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Adding Dynamic Navigation | Template Coding


Go to End


3 Posts   2112 Views

Avatar
Mondi

Community Member, 16 Posts

21 September 2015 at 8:37am

Hello all -

I've built a template which originally includes a responsive top navigation menu, as can be currently seen at http://www.e-lumini.com [view in smaller screensize in responsive view mode to see mobile navigation menu].

In following your lesson Adding Dynamic Content I am somewhat stumped how I can integrate your standard code block in mine:

<% loop $Menu(1) %>
<li>
<a class="$LinkingMode" href="$Link">$MenuTitle</a>
</li>
<% end_loop %>

------
My code block:

<div id="menuBuilderContainer">
<div id="menuBuilder">
<button class="nav-button button bar"><i class="icon_menu_handle"></i><span class="text_menu_link">open navigation</span></button>
<div id="nav" class="nav">
<ul id="mainmenu" class="nav-collapse">
<li id="menu_1" class="menu_1 menu_items">
<a href="http://www.e-lumini.com" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">home</span>
</a></li><li id="menu_5" class="menu_5 menu_items">
<a href="http://www.e-lumini.com/about-organisation-design-agency.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">about</span>
</a>
</li>
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="http://www.e-lumini.com/organisation-design-services.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">services</span>
</a>

</li>
<li id="menu_3" class="menu_3 menu_items">
<a href="http://www.e-lumini.com/organisation-design-practices.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">practices</span>
</a></li>
<li id="menu_4" class="has-flyout menu_4 menu_items">
<a href="http://www.e-lumini.com/organisation-design-clients.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">clients</span>
</a>

</li>
<li id="menu_6" class="menu_6 menu_items">
<a href="http://www.e-lumini.com/organisation-design-blog-articles.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">blog</span>
</a>
</li>
<li id="menu_7" class="menu_7 menu_items">
<a href="http://www.e-lumini.com/organisation-design-academy.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">academy</span>
</a>
</li>
<li id="menu_8" class="menu_8 menu_items">
<a href="http://www.e-lumini.com/contact-organisation-design-agency.html" target="_self">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">contact</span>
</a>
</li>
</ul>
</div>
</div>
</div>

-- end code block ---

Can anyone give me a pointer on how to work this please?

Many thanks in advance for your assistance [and for keeping me sane!]

Raymond

Avatar
helenclarko

Community Member, 166 Posts

21 September 2015 at 3:04pm

Edited: 21/09/2015 3:04pm

Hi Raymond,

I have not tested the code below, but it should work (or atleast give you somewhere to start).
you are simply after a loop of your menu items (1st tier SitePages) with the same theme?

<div id="menuBuilderContainer">
  <div id="menuBuilder">
		<button class="nav-button button bar">
		  <span class="text_menu_link">open navigation</span>
		</button>
		<div id="nav" class="nav">
		  <ul id="mainmenu" class="nav-collapse">
			<% loop $Menu(1) %>
				<li id="menu_1" class="menu_1 menu_items">
					<a target="_self" href="$Link">
						<span class="text_menu_link">$MenuTitle</span>
					</a>
				</li>
			<% end_loop %>
		  </ul>
		</div>
  </div>
</div>

That should cut out your hard coded links and give you the Navigation you are after.

-helenclarko

Avatar
Mondi

Community Member, 16 Posts

21 September 2015 at 3:45pm

Heya Helenclarko -

Will go trying this now - thanks HEAPS for that rapid feedback.

And, yep, it's all for the same Theme.

Will let you know if this is a go/no go shortly!

Cheers.