Jump to:

1383 Posts in 492 Topics by 521 members

Themes

SilverStripe Forums » Themes » Javascript 2 layer Nav?

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1490 Views
  • churika
    Avatar
    Community Member
    29 Posts

    Javascript 2 layer Nav? Link to this post

    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.

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: Javascript 2 layer Nav? Link to this post

    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"; ?>

    .

    1490 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.