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.

General Questions

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

Javascript menu


Reply

16 Posts   2993 Views

Avatar
OutrunTheWolf

2 June 2009 at 7:11am Community Member, 34 Posts

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?

Avatar
UncleCheese

2 June 2009 at 7:16am (Last edited: 2 June 2009 7:17am), 4085 Posts

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

Avatar
OutrunTheWolf

2 June 2009 at 7:25am Community Member, 34 Posts

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

Avatar
UncleCheese

2 June 2009 at 7:30am 4085 Posts

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..);

Avatar
OutrunTheWolf

2 June 2009 at 7:43am Community Member, 34 Posts

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?

Avatar
UncleCheese

2 June 2009 at 7:57am (Last edited: 2 June 2009 7:57am), 4085 Posts

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

Avatar
OutrunTheWolf

2 June 2009 at 8:41am Community Member, 34 Posts

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?

Avatar
UncleCheese

2 June 2009 at 8:55am 4085 Posts

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');
}