1

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 : https://i.stack.imgur.com/TR28S.png

2

2 Answers 2

0

hi you can do this with bxSlider js .this Slides can contain images, video, or HTML content easily . but you have little bit css update should be do to get like your screen shot . this working fine & easily

example :

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 02</li>
</ul>
$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

see more http://bxslider.com/examples/auto-show-start-stop-controls

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.