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


Go to End
Reply


16 Posts   3054 Views

Avatar
OutrunTheWolf

Community Member, 34 Posts

2 June 2009 at 7:11am

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

Forum Moderator, 4094 Posts

2 June 2009 at 7:16am

Edited: 02/06/2009 7:17am

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

Avatar
OutrunTheWolf

Community Member, 34 Posts

2 June 2009 at 7:25am

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

Avatar
UncleCheese

Forum Moderator, 4094 Posts

2 June 2009 at 7:30am

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

Community Member, 34 Posts

2 June 2009 at 7:43am

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

Forum Moderator, 4094 Posts

2 June 2009 at 7:57am

Edited: 02/06/2009 7:57am

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

Avatar
OutrunTheWolf

Community Member, 34 Posts

2 June 2009 at 8:41am

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

Forum Moderator, 4094 Posts

2 June 2009 at 8:55am

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

Go to Top