Designing a fluid dropdown menu with scroll functionality for my website

I have been trying to implement a scrollable dropdown menu on my website by following various tutorials, but none of them seem to be working. Despite my efforts, the dropdown menu remains non-scrollable.

HTML

<li>
            <a href="#">Team Profile</a>

            <ul>
              <li><a href="#">Chelsea</a></li>
        <li><a href="#">Man City</a></li>
        <li><a href="#">Southampton</a></li> 
        <li><a href="#">Man Utd</a></li>
        <li><a href="#">Arsenal</a></li>
        <li><a href="#">Liverpool</a></li>
        <li><a href="#">West Ham</a></li>
        <li><a href="#">Newcastle</a></li>
        <li><a href="#">Leichester</a></li>
        <li><a href="#">QPR</a></li>
        <li><a href="#">Burnley</a></li>
        <li><a href="#">Aston Villa</a></li>
        <li><a href="#">Stoke City</a></li>
        <li><a href="#">Crystal Palace</a></li>
        <li><a href="#">Hull City</a></li>
        <li><a href="#">Sunderland</a></li>
        <li><a href="#">Tottenham Hotspur</a></li>
        <li><a href="#">Everton</a></li>
        <li><a href="#">Swansea</a></li>
        <li><a href="#">West Brom</a></li>
            </ul>

        </li>

CSS

.myDropDown
{
   height: 50px;
   overflow: auto;
}
.nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    background:#333;
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    float:left;
    position:relative;
}
...

Answer №1

JS FIDDLE

HTML

<nav>
<ul class="dropdown">
            <li class="drop"><a href="#">Team Profile</a>
                <ul class="sub_menu">
                            <li><a href="#">Chelsea</a></li>
                <li><a href="#">Man City</a></li>
                <li><a href="#">Southampton</a></li> 
                <li><a href="#">Man Utd</a></li>
                <li><a href="#">Arsenal</a></li>
                <li><a href="#">Liverpool</a></li>
                <li><a href="#">West Ham</a></li>
                <li><a href="#">Newcastle</a></li>
                <li><a href="#">Leichester</a></li>
                <li><a href="#">QPR</a></li>
                <li><a href="#">Burnley</a></li>
                <li><a href="#">Aston Villa</a></li>
                <li><a href="#">Stoke City</a></li>
                <li><a href="#">Crystal Palace</a></li>
                <li><a href="#">Hull City</a></li>
                <li><a href="#">Sunderland</a></li>
                <li><a href="#">Tottenham Hotspur</a></li>
                <li><a href="#">Everton</a></li>
                <li><a href="#">Swansea</a></li>
                <li><a href="#">West Brom</a></li>
                </ul>
            </li>

            </li>
        </ul>
</nav> 

CSS

body{
  margin: 0px;
  padding: 0px;
  background: #000;
  font-family: 'Lato', sans-serif;
}

h1{
  margin: 2em 0px;
  padding: 0px;
  color: #fff;
  text-align: center;
  font-weight: 100;
  font-size: 50px;
}

nav{
  width: 750px;
  margin: 1em auto;
}

ul{
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.dropdown{ 
  position: relative; 
  width: 100%; 
}

ul.dropdown li{ 
  font-weight: bold; 
  float: left; 
  width: 180px; 
  position: relative;
  background: #ecf0f1;
}

ul.dropdown a:hover{ 
  color: #000; 
}

ul.dropdown li a { 
  display: block; 
  padding: 20px 8px;
  color: #34495e; 
  position: relative; 
  z-index: 2000; 
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}

ul.dropdown li a:hover,
ul.dropdown li a.hover{ 
  background: #3498db;
  position: relative;
  color: #fff;
}


ul.dropdown ul{ 
 display: none;
 position: absolute; 
  top: 0; 
  left: 0; 
  width: 180px; 
  z-index: 1000;
}

ul.dropdown ul li { 
  font-weight: normal; 
  background: #f6f6f6; 
  color: #000; 
  border-bottom: 1px solid #ccc; 
}

ul.dropdown ul li a{ 
  display: block; 
  color: #34495e !important;
  background: #eee !important;
} 

ul.dropdown ul li a:hover{
  display: block; 
  background: #3498db !important;
  color: #fff !important;
} 

.drop > a{
  position: relative;
}

.drop > a:after{
  content:"";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}

.drop > a:hover:after{
  content:"";
   border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}

Javascript

/*
* 
* Credits to http://css-tricks.com/long-dropdowns-solution/
*
*/

var maxHeight = 400;

$(function(){

    $(".dropdown > li").hover(function() {

         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // make sure there is enough room at the bottom
             multiplier = height / maxHeight;     // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });  

});

JS FIDDLE

Credits to: Larry Geams and attribution to http://css-tricks.com/long-dropdowns-solution/

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

I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Any tips on how to position my btn button both vertically and horizontally in the center on top of two images? I want it to look like this: https://i.sstatic.net/Rezrd.png This is the code for my button: <a class="btn btn-primary" href=" ...

Body of the table spanning the entire width of the screen

Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...

Content Security Policy directive violation: Chrome extension policy error occured due to refusal to execute inline event handler

I've been working on a chrome extension to perform a simple task, but I've hit a roadblock with one line of HTML code that's causing issues with setting the correct permissions. Despite my efforts, I'm stuck on what exactly needs to be ...

Creating a split-view menu in WinJS: A step-by-step guide

I'm attempting to create a versatile app using JavaScript. I followed a tutorial on the MSDN website, but for some reason, the "nav-commands" class isn't displaying when the splitview is opened. I have set closedDisplayMode = 'none'. & ...

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

The PHP file on my local WAMP server seems to be having trouble retrieving inputs from the HTML's GET or POST methods

<!DOCTYPE HTML> <html> <body> <form action="testrun.php" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </bo ...

Creating a Full Height Background Image with a Responsive Width Using Jquery

I am facing an issue with my background image dimensions of 1400 in height and 1000 in width. When using any full-screen background jQuery plugin or code, the image crops from either the top or bottom to fit the entire screen. However, I am looking for a s ...

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

Struggling to align an image in the center of a div on top of another image

I am attempting to center a logo on top of a moving image that scrolls through (unfortunately, the movement isn't visible on jsfiddle). I have tried using <center> tags, but they do not work. Adding margin: auto; does not properly center the ima ...

Maximize margin usage by extending to full width

Check out this JS Fiddle example Is there a way to align these boxes in the example so they are the same size and positioned next to each other on one line? Additionally, how can we ensure that if the window is resized and one box drops down, it will be c ...

Verify whether the labels are blank, remain as they are, or transfer the data to the database

Currently, I am utilizing PHP, HTML5, and JavaScript for my project. The task at hand involves creating a webpage that will be connected to a database. However, I have encountered an issue wherein the page proceeds to the next step and sends data even when ...

Enlarge the div with a click

I was looking for a solution on how to make a div expand when clicked using jQuery I came across a tutorial that seemed simple and perfect, but I couldn't get it to work when I tried to replicate the code. Do you know if this code is still valid wit ...

Determine the outcome with a PHP conditional statement for either "

I'm currently working on adding a function to a script where the user is prompted for a code, which I have successfully added. However, I am facing an issue in determining when to ask the user for the code and when not to. So, I believe I need to use ...

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

Disabling a button does not automatically shift the focus to the next element in the tab order

Is there a way to limit the number of times a button can be clicked using jQuery? For example, I want a button that can only be clicked three times before disabling itself automatically. test.html <div class="main"> <input class="one" type="t ...

Trouble with addClass function not functioning properly on dynamically generated list items while using search feature in Laravel 5

Seeking assistance with a search form that allows users to search for products. Search Form: <form class="navbar-form pull-right no_padding m_top_0 m_bottom_0 formSearchProduct" role="search" onsubmit="return false;" autocomplete="off"> <inp ...

Checking form entries and updating HTML

Prompt Description: In my endeavor to authenticate a <form> on the server side, I have opted to send form inputs as JSON to the back-end (an express.js app) using AJAX. Post-validation, another JSON is dispatched to the front-end with a structure ak ...

Guide to customizing the CSS styles of various components within a Material UI Dialog

Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...

Determine the outcome of the assessment quiz

Greetings everyone, I apologize for my poor English. I've been searching through numerous documents, but due to my language barrier, I am having trouble understanding them. I have designed a quiz page, but I'm facing an issue where I can't d ...