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   3013 Views

Avatar
Briohny

Community Member, 199 Posts

11 March 2009 at 12:15pm

My client insists on having this vertical javascript menu on his site. I know it’s better to use plain CSS but he is very insistent on this menu: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

I can get it working as a plain html page but can’t convert into SS format as I can’t get the second or third level to slide out.

This is my menu code in my page.ss (see attachment: pagess_code.txt)

I’ve called the following scripts from my header:

<link rel="stylesheet" type="text/css" href="mysite/ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="mysite/ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="mysite/ddlevelsfiles/ddlevelsmenu.js">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

All javascript and css files have been downloaded into the ddlevelsfiles/ folder.

Any advice would help me immensely. Thanks again.

Attached Files
Avatar
Briohny

Community Member, 199 Posts

13 March 2009 at 6:44am

Bump bump :)

Avatar
UncleCheese

4085 Posts

13 March 2009 at 7:01am

Is this a markup issue or a javascript issue? If you're feeding the JS script everything it wants, then I think you need to troubleshoot your menu script. If you're not getting the right markup, output what you're getting and we may be able to help on the SS side.

On another topic...

Just because your client wants that functionality doesn't mean you're stuck with a crumby javascript artifact from 2002. Look at Superfish. It's standards-compliant, same visual effects that your client wants, but just nicer looking and more up-to-date. Even does all the IE hacking for you. That menu just looks.... yikes.

Avatar
ianpiper

Community Member, 32 Posts

13 March 2009 at 7:18pm

Edited: 13/03/2009 7:41pm

I just read this thread and wanted to ask a supplementary question. I am trying to introduce a JavaScript-based feature for doing rounded-corners on content blocks (based on this method: http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/).

My question is, when I need to bring in a third-party JavaScript, where is the best place to put it, and what is the best way to call it? I can see a whole lot of JavaScript files in the jsparty folder, but is this a good place? There is also a javascript folder under mysite, which seems like the proper place. It is not clear though how you actually call the script. Obviously I can hard-code the <script> element into the head of my page.ss file, but is there a more elegant way (e.g., is there a variable similar to $Metadata that I can call)?

I suppose I can hack my way through this: I'm really looking for advice on best practice.

Thanks,

Ian.
--

Avatar
Briohny

Community Member, 199 Posts

13 March 2009 at 10:03pm

Edited: 13/03/2009 10:05pm

Thanks UncleCheese. I don't think it's a problem with the script or the SS. I think i just don't know exactly how to write the menu code. The 1st level menu is appearing how it should be however i can't get the second level menu to slide out. So it's reading the CSS but not the javascript.

I found this link to a Superfish menu: http://users.tpg.com.au/j_birch/plugins/superfish/#examples (verticle example)

If i place this code in the head of my page.ss, what <control> menu code do i need to use within the page to get the menu working?

Thanks so much for your help. :)

Avatar
UncleCheese

4085 Posts

14 March 2009 at 2:39am

First of all, I think this will be helpful to both of you. The proper way to include third party javascript is to place it in your mysite/javascript folder and call it in with the controller. Not on the template.

class MyPage_Controller extends Page_Controller
{
function init()
{
parent::init();
Requirements::javascript('mysite/javascript/myjavascript.js');
Requirements::css('mysite/css/somecss.css');
}
}

So for you, Briohny, you need to use the above method to pull in jquery.js, superfish.js, superfish.css, and superfish-vertical.css.

For the markup, you can do

<% control Menu(1) %>
<% control Children %>
<% control Children %>
<% end_control %>
<% end_control %>
<% end_control %>

something like that ought to work.

Avatar
ianpiper

Community Member, 32 Posts

14 March 2009 at 5:24am

Thanks for that. I looked in the Page_Controller code (mysite/code/Page.php), but I see a message there (this is v2.3):

      // Note: you should use <% require %> tags inside your templates instead of putting Requirements calls here. However
      // these are included so that our older themes still work

I can't find a reference describing how to use <% require %> tags: can you point me to any docs on this?

Ian.

Avatar
UncleCheese

4085 Posts

14 March 2009 at 5:44am

Ha... I can't either. That's why I recommended doing it the old way. I'm not sure what's going on with those <% require %> tags. Never used 'em, never seen them used.

Go to Top