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, Ed, biapar, Willr, Ingo, swaiba

Javascript menu


Go to End
Reply


16 Posts   3582 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