Niroda Niroda - 7 months ago 18
HTML Question

Create scroll navigation bar

I'm developing a website in ASP.NET but I'm pretty bad in designing.

What I wanna to do that I have many Courses in database each course has many modules.
I would like to create a navigation bar that takes elements from database, the problem is that every course has different count, maybe one of them have 10 modules and when i display it the navigation bar will overflow.

How I can create my navigation bar like slide show but without auto play, What i mean I need to create 2 buttons with the navigation to see overflowed elements in the navbar.

Sorry for bad english :)
Any help will appreciated!

Thanks in advance!
Edit :
I need something like this picture but hiding overflowed elements

Here is the picture : http://i.stack.imgur.com/TR28S.png

Answer

Here how i solved if someone else looks for something like this :

Note : I changed a little bit in the code to run it here because i'm using angular and I can't copy data from data base etc ..

 * {
        margin: 0px;
        padding: 0px;
    }
    button {
        border:none;
        cursor: pointer;
    }

    .navigation {
        width: 100%;
    }

    .left-arrow {
        background: #00a4e2;
        float: left;
        text-align: center;
        height:40px;
        width: 3%;
    }

    .left-arrow:hover {
        background: #69c;
    }

    .left-arrow i {
        color: #fff;
        font-size: 18px;
    }

    .right-arrow {
        display:inline;
        background: #00a4e2;
        float: right;
        text-align: center;
        width: 3%;
        height:40px;
    }

    .right-arrow:hover {
        background: #69c;
    }

    .right-arrow i {
        color: #fff;
        font-size: 18px;
    }

    .course {
        float:left;
        font-size: 0;
        overflow: hidden !important;
        width: 94%;
        white-space: nowrap;
    }

    .course li {
        border: 1px solid #69c;
        color: #fff;
        display: inline-block;
        font-size: 16px;
        height: 40px;
        list-style: none;
        text-align: center;
        margin-right:5px;
    }

    .course li a {
        color: #fff;
        display: block;
        height: 100%;
        text-decoration: none;
        width: 100%;
        padding:10px;
    }

    .course li a:hover {
        background: #69c;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Start course menu -->
<div id="navigation" class='navigation'>
  <a style="cursor:pointer" class="left-arrow"><i style="margin-top:11px" class="fa fa-chevron-left"></i></a>
  <ul class="course">
  <li id="1"  ><a  href="#" style="background-color:green">First element</a></li>
  <li id="2"><a  href="#" style="background-color:Blue">Second element</a></li>
  <li id="3"><a  href="#" style="background-color:DarkGreen">Third element</a></li>
  <li id="4"><a  href="#" style="background-color:DarkBlue">Forth element</a></li></ul>
  <a style="cursor:pointer" class="right-arrow"><i style="margin-top:11px" class="fa fa-chevron-right"></i></a>
</div>
<!-- End course menu-->
    <script>

        var leftM = 1;
        var toMove = 0;
        $('.left-arrow').on({
            click: function () {
                if (toMove < 0) {
                    leftM -= 1;
                    var el = document.getElementById(leftM);
                    var c = el.offsetWidth;
                    $("#1").animate({ marginLeft: (toMove += c + 5) + 'px' }, 500);
                }
            }
        });
        $('.right-arrow').on({
            click: function () {
                var el = document.getElementById(leftM);
                var c = el.offsetWidth;
                console.log(c);
                $("#1").animate({ marginLeft: (toMove -= (c + 5)) + 'px' }, 500);
                leftM += 1;
            }
        });
    </script>