Jquery horizontal slider for categorylist

I'm trying to create a sliding horizontal menu with different categories.

I would like to use one div layer that has a fixed width value, and another div inside this one with more width that the first one. This way only part of this second div could be visible.

I'm having two problems:

• The categorylist html code is not working properly, instead see part of the second div, I see all with a carriage return.

• I'm trying to move the second div to right and left when a user puts the mouse over the <> signs at both sides of the category list.

Could you give me a hand, here is my code:

<div style="overflow: hidden;width: 710px;height: 17px;">
       <div id="CategoryList">
          <span id="NavigateBackward"><</span>
             <p class="MiniCategory" style="display: inline;">Category 1</p>
             <p class="MiniCategory" style="display: inline;">Category 2</p>
             <p class="MiniCategory" style="display: inline;">Category 3</p>
             <p class="MiniCategory" style="display: inline;">Category 4</p>
             <p class="MiniCategory" style="display: inline;">Category 5</p>
             <p class="MiniCategory" style="display: inline;">Category 6</p>
             <p class="MiniCategory" style="display: inline;">Category 7</p>
             <p class="MiniCategory" style="display: inline;">Category 8</p>
            开发者_StackOverflow中文版 <p class="MiniCategory" style="display: inline;">Category 9</p>
             <p class="MiniCategory" style="display: inline;">Category 10</p>
             <p class="MiniCategory" style="display: inline;">Category 11</p>
             <p class="MiniCategory" style="display: inline;">Category 12</p>
             <p class="MiniCategory" style="display: inline;">Category 13</p>
             <p class="MiniCategory" style="display: inline;">Category 14</p>
             <span id="NavigateFordward">></span>
       </div>
    </div>


     <script language="javascript" type="text/javascript">
                        $(document).ready
                        (
                            Initialize()
                        );

                        function Initialize()
                        {
                            InitList();

                        }
                        function InitList()
                        {
                            $("#NavigateBackward").hover
                            (
                                function()
                                {
                                    $("#CategoryList").animate({ "left": "-=50px" }, 1500);      
                                }
                            );
                            $("#NavigateFordward").hover
                            (
                                function() 
                                {
                                    $("#CategoryList").animate({ "right": "+=50px" }, 1500); 
                                }
                            );
                        }
    </script>

Thanks in advance for your help. Kind Regards. John.

You can use jQuery Scrollable in this case. Is this what you want?

Or do it yourself

$(document).ready (Initialize);

function Initialize(){
    InitList();
}

var moveLeft = false;
var moveRight = false;

var left = function() {
    if (moveLeft)
        $("div#CategoryList").animate({ "marginLeft": "-=5px" }, 150, 'linear', left);
};

var right = function() {
    if(moveRight)
        $("div#CategoryList").animate({ "marginLeft": "+=5px" }, 150, 'linear', right);
};

function InitList() {
    $("span#NavigateBackward").hover(
        function() { moveLeft=true; left(); },
        function() { moveLeft=false; }
    );
    $("span#NavigateFordward").hover(
        function() { moveRight=true; right(); },
        function() { moveRight=false; }
    );
}

And your markup has some flaws as the "forward" "backward" handles are inside the div#CategoryList which means when scrolling left/right the handles themselves would disappear (you should move them outside of div#CategoryList