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.

Themes /

Discuss SilverStripe Themes.

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

Javascript 2 layer Nav?


Reply


2 Posts   1534 Views

Avatar
churika

Community Member, 29 Posts

3 March 2010 at 11:35pm

Edited: 03/03/2010 11:47pm

I have a javascript that I reallly like to use for navigation. But I can't figure out for the life of me how to implement it with this CMS.

Header

<script type="text/javascript" src="/mysite/javascript/menucontents.js"></script>
<script type="text/javascript" src="/mysite/javascript/anylinkmenu.js"></script>
<script type="text/javascript">
   anylinkmenu.init("menuanchorclass")
</script>

The "menucontents.js" file typically stores the contents of the 2nd layer navigation. It looks something like this.

var menuPlan = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''} //menuPlan being a unique name for one 2nd layer nav popup.
menuPlan.items = [
   ["Visitor Information", "#"],
   ["Tickets & Tours", "#"],
   ["Garden Etiquette", "#"],
   ["Gift Shop", "#"]
]

var menuGardens = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''}
menuGardens.items = [
   ["What's In Bloom", "#"],
   ["Garden Map", "#"],
   ["Plant Database", "#"],
   ["Development", "#"],   
   ["Meet The Designers", "#"]
]

var menuEvents = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''}
menuEvents.items = [
   ["Events", "#"],
   ["Book An Event", "#"]
]

var menuInvolved = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''}
menuInvolved.items = [
   ["Membership", "#"],
   ["Donate", "#"],
   ["Become A Volunteer", "#"],
   ["Attend A Lecture", "#"],   
   ["Join Our Mailing List", "#"]
]

var menuEducation = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''}
menuEducation.items = [
   ["Lecture Series", "#"],
   ["Plant Database", "#"],
   ["Planting Tips", "#"],
   ["Horticulture Links", "#"]
]

var menuAbout = { divclass: 'anylinkmenu', inlinestyle: '', linktarget: ''}
menuAbout.items = [
   ["Mission & History", "#"],
   ["Our Staff", "#"],
   ["Board Members", "#"],
   ["Construction Progress", "#"],   
   ["Contact Us", "#"]
]

Menu HTML

<ul>
<li class="nav_normal">
<a href="$Link"><span>$MenuTitle</span></a>
</li> <!-- A First Level Nav Link With No 2nd Layer Behind It -->

<li class="nav_arrow">
<a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuPlan[mouseover]" rev="lr">
<span>$MenuTitle</span>
</a>
</li> <!-- A First Level Nav Link With A 2nd Layer Nav Behind It menuPlan unique idenifier for menucontents.js -->

<!-- etc etc continued on down throughout these list items -->
<li class="nav_arrow"><a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuGardens[mouseover]" rev="lr"><span>Our Gardens</span></a></li>
<li class="nav_arrow"><a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuEvents[mouseover]" rev="lr"><span>Events</span></a></li>
<li class="nav_arrow"><a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuInvolved[mouseover]" rev="lr"><span>Get Involved</span></a></li>
<li class="nav_arrow"><a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuEducation[mouseover]" rev="lr"><span>Education</span></a></li>
<li class="nav_arrow"><a href ="javascript:void(0);" class="menuanchorclass someotherclass" rel="menuAbout[mouseover]" rev="lr"><span>About Us</span></a></li>
<li class="nav_normal"><a href="#"><span>Gift Shop</span></a></li>
</ul>

I don't even know where to begin incorporating this CMS's navigation system using the <% control Menu(1) %> examples given in the tutorial. Anyone can help me out?

Side Note Question: How can I incorporate <?php ?> snippits throughout the html a .ss file? Seems to not like it when I put php code in there.

Avatar
Shauna G

Community Member, 52 Posts

4 March 2010 at 7:19am

The

<% control Menu(1) %>

points to a specific PHP function, which has its own behavior. Your setup appears to need hard coded links, which, while doable, defeat part of the purpose of a CMS in general. Have you poked around the community and the modules section to see if there's a different way you can do what you're looking to do?

Side Note Question: How can I incorporate <?php ?> snippits throughout the html a .ss file? Seems to not like it when I put php code in there.

The short answer: you don't. SilverStripe is built on the MVC (model-view-controller) architecture. That means business logic (PHP) is separate from the templates. Your best bet is to create functions in the PHP file that corresponds to the template you're using (you can find it in mysite/code) and reference those functions through custom controls (

<% control MyCustomControl %>

). If you go through the tutorials, you'll notice that they have you put in things like $Title, those are references to variables in a PHP file. You put things like those in place of things like

<? php echo "hello"; ?>

.