Making jQuery Responsive list menu with horizontal scrolling like a carousel

Hello,

I have already put a thread on this forum but I will try to explain now more expliciet what I want/need.

Step 1:
I have download this menu. I have modified this a little and here down you can see my new list menu. There are no submenuitems.


<nav id="small-box-links" class="nav-collapse" >
      <ul>
		<li><a href="#small-box1"><img src="/images/templat/brands/logo_image_1.png" alt="brandname"/></a></li>
	    	<li><a href="#small-box2"><img src="/images/templat/brands/ogo_image_2.png" alt="brandname"/></a></li>
		<li><a href="#small-box3"><img src="/images/templat/brands/ogo_image_3.png" alt="brandname"/></a></li>
		<li><a href="#small-box4"><img src="/images/templat/brands/ogo_image_4.png" alt="brandname"/></a></li>
		<li><a href="#small-box5"><img src="/images/templat/brands/ogo_image_5.png" alt="brandname"/></a></li>
		<li><a href="#small-box6"><img src="/images/templat/brands/ogo_image_6.png" alt="brandname"/></a></li>
		<li><a href="#small-box7"><img src="/images/templat/brands/ogo_image_7.png" alt="brandname"/></a></li>
		<li><a href="#small-box8"><img src="/images/templat/brands/ogo_image_8.png" alt="brandname"/></a></li>
      </ul>
</nav>

This is working.

Step 2:
I have downloaded this jQuery vertical scrolling ([URL=“http://www.adriantomic.se/localscroll/”]demo). What I’m using is “Scroll inside a div”.

I have migrated Step 1 and Step 2 and this is working fine.

The problem
is that at this moment i have 8 logo’s and the width is 980px. This was enough so far. But now we have to add 6 or 7 more logo’s and there is not enough space for. So what we are thinking about is to make the menu horizontal scrolling like a carousel.

Here is a simple overview what I mean:

< Logo 1 | Logo 2 | Logo 3 | Logo 4 | Logo 5 >

< and > are the scroll buttons what you see with sliders or image carousel. Logo 1 till 5, are the menu <li> elements and if you click on it, it scrolls to the box like the demo.

Step 3:
Adding the carousel effect.
I have tried to migrate responsive elastislide, jQuery.bxslider and yesterday evening jCarousel with Step 1 and Step 2 but unfortunately without succes. The problem is that between the <nav … and <ul> a new <div class=“jCarousel”> is added to create a carousel. I understand why the menu/vertical scrolling is not working anymore because of adding the extra div.
But my knowledge of jQuery is not so huge to go through all the jQuery code and to solve the problem, or to make it working.

Step 4:
Last step is to integrate this into a joomla article by calling the page scroll_content.html, with PHP. But this is not the problem because Step 1 & 2 are already working. The only thing is that there is a conflict with the jQuery which is loaded by a module/plugin or component of joomla.
I know it is difficalt to maintain, it can not be maintained from the backend, but changes are less.

I hope that it is clear were I´m looking for.

I hope that someone can help me out, because I have already spent a lot of time in this. And I’m little under pressure. Or if someone know such a menu, than very happy.

Nico

I have fixed. I was thinking to difficult. The menu Step 1 is not necessary. I migrate step 2 and the jCarousel. And from the slider I make a ‘menu’! So that’s all. It was a remark of my son.

Glad to hear it :slight_smile:
Thanks for taking the tie to let us know what worked for you.