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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

Javascript menu


Go to End


16 Posts   4540 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, 4102 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, 4102 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, 4102 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, 4102 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