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

jqueryhtmlcssangularjs

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failure to trigger scroll event on consecutive div elements

Just getting started... Here is the HTML code I am working with: $(document).ready(function () { $('.scrollMe').scroll(function () { // do something }); }); The issue I'm facing is that the scroll function only works on th ...

jquery

What is the best way to set up an anchor element to execute a JavaScript function when clicked on the left, but open a new page when clicked in

One feature I've come across on certain websites, like the Jira site, is quite interesting. For instance, if we take a look at the timeline page with the following URL - When you click on the name of an issue (which is an anchor element), it triggers ...

javascripthtmlvue.jsvue-router

The challenge with using prepared statements in PHP/MySQL for inserting data into a form

Recently, I encountered an issue with the code below that takes information from a form and sends it to MySQL. Previously, everything was working fine for category, contents, date, and user ID fields. However, after adding a new column called 'secleve ...

phphtmlmysqlsqlforms

Determining the Missing Focus: Discovering the Vacant '":focus'" in Jquery

I am currently working on jQuery and facing an issue with input fields that have assigned ID's and attached .blur() events. I am struggling to identify the specific item that has gained focus: $("#"+field).blur(function() { console.log ($(this).attr ...

jqueryhtmlcss

Guide to obtaining specific top elements from an array using JavaScript

I'm seeking assistance with sorting arrays in JavaScript. Here is an example of a sorted array: mainArray : [25 20 20 20 18 17 17 15 12 12 10 5 5 ] The mainArray may contain duplicate values. A. Dealing with duplicates Based on user input, I need ...

javascriptjqueryarrayssortingduplicates

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

What causes the translation of text within HTML tags to occur when attempting to retrieve it during Web Scraping?

Exploring the world of web scraping, I am currently immersed in a small project. In this snippet of code, I am capturing the HTML content and storing it in a variable named soup. source=requests.get(URL) soup=BeautifulSoup(source.text,'html.parser&apo ...

pythonhtmlweb-scrapingbeautifulsouppython-requests-html

Generate a list of users using Angular in an efficient manner

I am working on creating a user list similar to the image provided below. I am using Angular and Bootstrap for the basics of this project. However, my concern is how to efficiently handle a large number of users. If the user count exceeds 10k, what would b ...

angularjshtmltwitter-bootstrapmongodbexpress

The modifications made in ng-grid do not synchronize with the model

Take a look at this example plunker: http://plnkr.co/edit/9iCNie?p=preview When editing a name, the expected behavior is that myData should change, but unfortunately it does not. HTML: <body ng-controller="MyCtrl"> {{myData}} <div clas ...

angularjs

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...

javascriptjqueryhtml

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

htmlcsstwitter-bootstrap

Tips for designing a user interface for a security software product

We have created a cutting-edge security tool that can detect unauthorized network traffic. The user interface for displaying alerts is generated by a Java Servlet page. Currently, the page functions as a sophisticated console log. It features a large text ...

htmlcssajaxservletsuser-interface

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Check out this code snippet with CSS and HTML: CSS .flyout { position: absolute; top: 30px; right: 15px; background-color: #FFF; padding: 20px; border: 1px solid #eaeaea; z-index: 999; width: 400px; border-top: 3px solid #337AB7; disp ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to adjust a <div> element so that it stays centered on the webpage while also keeping its size attributes intact?

"How To" Can you help me center a single element within a "div" on my webpage without changing its current size attributes? Here is the page I need assistance with: I would like the "Interior Painting" element under the "Residential Services" header to ...

htmlcss

Getting access to scope variables in an Angular controller written in ES6 style can be achieved by using

In my new Angular project, I decided to switch to using ES6 (Babel). However, I encountered an issue where ES6 classes cannot have variables. This led me to wonder how I could set my $scope variable now. Let's consider a simple controller: class Mai ...

javascriptangularjsecmascript-6ecmascript-harmonyangular-controller

JavaScript throws an error when attempting to access an object's methods and attributes

Within my Angular.js module, I have defined an object like this: $scope.Stack = function () { this.top = null; this.size = 0; }; However, when I try to use the push method of this object, I encounter an error stating undefined: ...

javascriptangularjs

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Adding scripts to a PartialView in MVC using Jquery's append function

My issue is with a JavaScript function that appends a PartialView into a div. Everything seems to work correctly, except for the fact that the PartialView contains some scripts enclosed within <script></script> tags. As a result, when these dyn ...

javascriptjqueryasp.net-mvcrazorasp.net-mvc-partialview

Error occurred while retrieving JSON array using Jquery

var groupMembers = $.parseJSON(members); $.each(groupMembers, function (index, item) { $.ajax({ type: "POST", url: "'.base_url(" / panel / listNotifications ").'/'.$id.'/" + valueSelected, d ...

javascriptjqueryjson

Angularjs Socket.io Integration

I am working on implementing websockets in my Angular/nodejs application using socket.io. My main goal is to maintain a "live" array on the server of documents that are currently unavailable for editing (due to someone else already editing them). I starte ...

angularjsnode.jsexpresssocket.io