dynamic menu question

6 posts by 3 authors in: Forums > CMS Builder
Last Post: October 9, 2009   (RSS)

By Codee - October 3, 2009

I have a website with CMSB that, on the search page, uses the dynamic menu system. There is a list of manufacturers and then their models.

Right now the menu shows what's in the tables as follows:
manufacturer 1
- model
- model
- model
manufacturer 2
- model
- model
- model
manufacturer 3
- model
- model
- model

What I would like, if it's feasible, is to have the models appear when the manufacturer is clicked on, so the menu would like this if I didn't click on any manufacturer:

manufacturer 1
manufacturer 2
manufacturer 2

and if I clicked on, say manufacturer 2, then the menu would look like this:

manufacturer 1
manufacturer 2
- model
- model
- model
manufacturer 3

can cmsb do this?

Thanks.

Re: [equinox69] dynamic menu question

By Kenny - October 3, 2009

We have successfully implemeted this script before. Check it out and see if it is what ou are talking about?

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm


Kenny

Re: [equinox69] dynamic menu question

By Chris - October 5, 2009

Hi equinox69,

Can you please post the PHP source code for the page you want to add this feature to?
All the best,
Chris

Re: [chris] dynamic menu question

By Chris - October 5, 2009 - edited: October 5, 2009

Hi Terry,

I checked out the page that you sent via private message and it looks like you're outputting nested <ul>s, which is exactly what you'd want to start with.

This isn't something that CMS Builder will do for you, but it's certainly something you can do with CMS Builder's output and a little Javascript. I'd suggest using jQuery. Here's a little example to get you started:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<ul class="nested">
<li><a href="#" class="toggle">+</a> <a href="#">Manufacturer 1</a>
<ul>
<li>Model 1a</li>
<li>Model 1b</li>
<li>Model 1c</li>
</ul>
</li>
<li><a href="#" class="toggle">+</a> <a href="#">Manufacturer 2</a>
<ul>
<li>Model 2a</li>
<li>Model 2b</li>
<li>Model 2c</li>
</ul>
</li>
</ul>

<script>
$(document).ready(function(){
$(".nested > li > ul").hide();
$(".nested > li > a.toggle").click(
function () {
$(this).parent().find('ul').toggle();
}
);
});
</script>

There are plenty of tutorials on the web to help you or your web developer build "accordion menus" with jQuery.

We can't really support custom Javascript, but I wanted to give you an idea of what's possible. I hope this helps!
All the best,
Chris

Re: [chris] dynamic menu question

By Codee - October 9, 2009

Chris,
Thank you SO much for giving time and the input. I'll work on it.

Cheers!