Jump to:

23370 Posts in 18160 Topics by 2864 members

General Questions

SilverStripe Forums » General Questions » Javascript menu

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1 2
Go to End
Author Topic: 2906 Views
  • OutrunTheWolf
    Avatar
    Community Member
    34 Posts

    Re: Javascript menu Link to this post

    I've been trying to use Superfish on my site; I have called in the requirements in my Content Controller:

    class SitePage_Controller extends Page_Controller
    {
       function init()
       {
       parent::init();
       Requirements::javascript('mysite/javascript/jsjquery-1.2.6.min.js');
       Requirements::javascript('mysite/javascript/superfish.js');
       Requirements::javascript('mysite/javascript/hoverIntent.js');
       Requirements::css('mysite/css/superfish.css');
       Requirements::css('mysite/css/superfish-vertical.css');
    }
    }

    And inserted my code in the SS file:

    <div id="Navigation">
          
          <ul class="sf-menu">
             <li class="current">
                <a href="#a">menu item</a>
                <ul>
                   <li>
                      <a href="#aa">menu item that is quite long</a>
                   </li>
                   <li class="current">
                      <a href="#ab">menu item</a>
                      <ul>
                         <li class="current"><a href="#">menu item</a></li>
                         <li><a href="#aba">menu item</a></li>
                         <li><a href="#abb">menu item</a></li>
                         <li><a href="#abc">menu item</a></li>
                         <li><a href="#abd">menu item</a></li>
                      </ul>
                   </li>
       </div>

    Some of the CSS styling is working, but I don't think any of the Javascript is. Anyone know if I've done this correctly?

  • UncleCheese
    Avatar
    4085 Posts

    Re: Javascript menu Link to this post

    Where are you initializing the superfish menu? You should have something like $('#sf_menu').superfish(); somewhere.

  • OutrunTheWolf
    Avatar
    Community Member
    34 Posts

    Re: Javascript menu Link to this post

    Where do I initialise the Superfish Menu? Is my code right so far?

  • UncleCheese
    Avatar
    4085 Posts

    Re: Javascript menu Link to this post

    Yeah, but at some point you need to apply the script to the element you want. Check the documentation. I think it's just something like $('#my-menu').superfish( .. options..);

  • OutrunTheWolf
    Avatar
    Community Member
    34 Posts

    Re: Javascript menu Link to this post

    Do you think it may be this little snippet missing:

    Call superfish() on the containing ul element

    <script type="text/javascript">

    $(document).ready(function() {
    $('ul.sf-menu').superfish();
    });

    </script>

    It doesn't work in the Head of my SS file, Would I create this code in a seperate JS file, and link to it from the Content Controller?

  • UncleCheese
    Avatar
    4085 Posts

    Re: Javascript menu Link to this post

    it just needs to be anywhere after all the JS requirements. You could do it as Requirements::customScript();

  • OutrunTheWolf
    Avatar
    Community Member
    34 Posts

    Re: Javascript menu Link to this post

    I don't quite understand,

    So I put:

    $(document).ready(function() {
    $('ul.sf-menu').superfish();
    });

    into a new Javascript file, and linked it through the requirements in my Content Controller. It didn't work.
    I also tried putting it straight into my PHP right after the requirements section, but its not PHP so I guess that's why that didn't work.

    Where exactly should I place it? Do I need to re-write it as PHP?

  • UncleCheese
    Avatar
    4085 Posts

    Re: Javascript menu Link to this post

    You can do something like this

    function init()
    {
    parent::init();
    Requirements::javascript('mysite/javascript/jsjquery-1.2.6.min.js');
    Requirements::javascript('mysite/javascript/superfish.js');
    Requirements::javascript('mysite/javascript/hoverIntent.js');
    Requirements::customScript("
    $(document).ready(function() {
    $('ul.sf-menu').superfish();
    });
    ");

    Requirements::css('mysite/css/superfish.css');
    Requirements::css('mysite/css/superfish-vertical.css');
    }

    2906 Views
Page: 1 2
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.