Design a custom scrolling navigation bar for enhanced user experience

Question

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET.

I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without overflowing.

Looking to create a slideshow-like navigation bar with manual controls, allowing users to scroll through all elements even if they extend beyond the visible area.

Appreciate any assistance given my limited English skills! Thank you!

Seeking a solution similar to the referenced image, but with the ability to hide overflowed elements.

Image: https://i.stack.imgur.com/TR28S.png

jquery html css angularjs

Answer 1

Answer №1

If you want to create an image or video slider on your webpage, you can use the bxSlider JavaScript library. With bxSlider, you can easily display images, videos, or even HTML content in a slideshow format. However, some CSS adjustments may be needed to customize it according to your design preferences. The implementation is seamless and straightforward.

For example:

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 03</li>
</ul>

$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

For more examples and customization options, check out

Answer 2

If you want to create an image or video slider on your webpage, you can use the bxSlider JavaScript library. With bxSlider, you can easily display images, videos, or even HTML content in a slideshow format. However, some CSS adjustments may be needed to customize it according to your design preferences. The implementation is seamless and straightforward.

For example:

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 03</li>
</ul>

$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

For more examples and customization options, check out

Answer 3

Answer №2

Here is how I tackled the issue in case someone else comes across a similar situation:

Note: I made some slight modifications to the code in order to make it work within this context as I am utilizing Angular and unable to directly copy data from a database.

 * {
        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>

Answer 4

Here is how I tackled the issue in case someone else comes across a similar situation:

Note: I made some slight modifications to the code in order to make it work within this context as I am utilizing Angular and unable to directly copy data from a database.

 * {
        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>

Design a custom scrolling navigation bar for enhanced user experience

Answer №1

Answer №2

Similar questions

Implementing a function as the `data-*` attribute for an element in Angular 6

Leveraging jsonp with nodejs and original ajax

The click event fails to trigger while trying to parse external HTML

CSS Animation Effect on Transparent PNG Image

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Block with vertical text covering entire height

Is there a way to reverse the hover effect on div elements?

Why is this regular expression failing to match German words?

Retrieving data from external JSON files

Is there a way to switch the language on the date-picker tool?

Instructions on integrating iframe into Slides on material-auto-rotating-carousel

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Tips for utilizing solely the next and previous buttons in PHP pagination

When the direction is right-to-left (rtl), the floating labels in Bootstrap slide towards the center

Can you explain the distinction between angular data table methods dtInstance.reloadData() and dtInstance.rerender()?

Switch up div content - advertisements at the top or bottom

Utilizing Angular to Handle Undefined Variables in String Interpolation

Dealing with issues regarding the rendering of events in FullCalendar when utilizing the .getJSON() method from

use in jQuery.each

Animation issue in Material UI autocomplete label feature