SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    <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 (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 Im 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

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by nkamp View Post
    I have fixed.
    Glad to hear it
    Thanks for taking the tie to let us know what worked for you.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •