Scroll vertically to navigate through sub-menus in the menu bar

My goal was to design a vertical menu containing numerous sub navigation options, but due to the overwhelming number of sub nav items, it exceeds the size of the window. Setting overflow: auto; and a specific height resolves this issue, however, the third level menu becomes hidden. I have explored various solutions involving scrolling navigation but have not yet found the perfect fit for my project.

Feel free to view the functioning code here: http://jsfiddle.net/PU9tr/

Below is the HTML structure:

    <ul class="ver-menu">
        <li><a href="#">Ver Menu- 1</a>
            <ul class="sub-menu-1">
                <li><a href="#">Ver sub Menu- 1</a>
                    <ul class="sub-menu-2">
                    <li><a href="#">Ver sub Menu- 1</a></li>
                    <li><a href="#">Ver sub Menu- 2</a></li>
                    <li><a href="#">Ver sub Menu- 3</a></li>
                    <li><a href="#">Ver sub Menu- 4</a></li>
                </ul>
                </li>
                <li><a href="#">Ver sub Menu- 2</a>
                  <ul class="sub-menu-2">
                    <li><a href="#">Ver sub Menu- 1</a></li>
                    <li><a href="#">Ver sub Menu- 2</a></li>
                    <li><a href="#">Ver sub Menu- 3</a></li>
                    <li><a href="#">Ver sub Menu- 4</a></li>
                </ul>
                </li>
                <li><a href="#">Ver sub Menu- 3</a></li>
                <li><a href="#">Ver sub Menu- 4</a></li>
                <li><a href="#">Ver sub Menu- 5</a></li>
                <li><a href="#">Ver sub Menu- 6</a></li>
                <li><a href="#">Ver sub Menu- 7</a></li>
                <li><a href="#">Ver sub Menu- 8</a></li>
                <li><a href="#">Ver sub Menu- 9</a></li>
                <li><a href="#">Ver sub Menu- 10</a></li>
                <li><a href="#">Ver sub Menu- 11</a></li>
                <li><a href="#">Ver sub Menu- 12</a></li>
                <li><a href="#">Ver sub Menu- 13</a></li>
                <li><a href="#">Ver sub Menu- 14</a></li>
                <li><a href="#">Ver sub Menu- 15</a></li>
                <li><a href="#">Ver sub Menu- 16</a></li>

(... Additional sub-menu items ...)
  
            </ul>
        </li>
      (Repeating structure for additional "Ver Menu" items...)
    </ul>

And here's the corresponding CSS styling:

            #page-wrap                          { width: 960px; margin: 25px auto; } 
            p                                   { margin: 0 0 8px 0; }
            a                                   { text-decoration: none; }
            img                                 { vertical-align: middle; }
            a img                               { border: 0; 180}
            ul                                  { list-style: none; }
            h1                                  { margin: 0 0 10px 0; }
            .ver-menu{ margin:0; padding:0; width: 200px}
          
            (... Additional CSS rules ...)
jqueryhtmlcssdrop-down-menu

Answer №1

Here is a sample HTML mockup:

<li> ...
  <ul class='submenu'>
    <li> ... 
    </li>
   </ul>
</li>

I have included some JQuery code as well:

$(.submenu).each( function(index){
     // finding the height of the li element - assuming all lis are the same height 
     var height=parseInt($(this).parent().css('line-height'));
     // displaying scrollbar in parent ul after 6 child elements
     var num=Math.min(6,$(this).children().length);
     $(this).css('min-height',function(){ return (height*num);}); 

});

The above JQuery will override the default min-height set in the following CSS:

.submenu {
    min-height: 100px;
    overflow-y: auto;   
    overflow-x: hidden;
}
li {
    line-height: 30px
}

I hope this explanation is useful.

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

What is the best way to place <a> links next to each other in the header?

Looking to align the links horizontally in the header using CSS, can someone assist me with this? <body> <nav> <div class="wrapper"> <a href="index.php"><img src="spaceship.png" alt="blogs logo& ...

htmlcsshyperlinkheader

Pagination feature of Bootstrap table not working as expected

While following various online tutorials, I decided to try my hand at coding a simple HTML table with Bootstrap for pagination and search functionality: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootst ...

htmlbootstrap-4

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

htmlcsssass

Utilizing Ajax, Jquery, and Struts2 for File Uploading

Can someone please provide guidance on uploading files using a combination of Ajax, jQuery, and Struts2? I have searched through numerous tutorials online but haven't found a suitable solution yet. The goal is to trigger a JavaScript function when a b ...

javascriptjqueryajaxfile-uploadstruts2

What is the best way to set values for columns in jqGrid?

I am currently using jqGrid in conjunction with CodeIgniter 2.1.0. I am facing a challenge regarding how to set a value for a specific column based on a particular event. For example, when entering quantity and rate values in the respective columns, I wan ...

javascriptcodeigniterjqueryjqgrid

Executing jQuery code upon submission of a web form

I have developed a custom jQuery function to calculate scores for a web form based on user input. These scores are then displayed in disabled number fields on the form when the user clicks a 'Score' button. I want the function to also run when th ...

jquerydrupal-7drupal-webform

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

javascriptjqueryhtmlcss

Getting the date from a datetime JSON - here's how!

How can I extract the date from a JSON datetime string like 2013-11-09T00:00:00 using either Jquery or JavaScript? ...

javascriptjqueryjson

Automatically choosing an option from a jQuery Autocomplete dropdown menu

Currently, on my webpage, there are a few jQuery autocomplete comboboxes in use. I am looking for a way to automatically select an item from the dropdown list when a user clicks a button or if a preset value is passed to the page specifically for that co ...

jquery

Switch the image to a different one after 6 clicks using Jquery in HTML

I've been grappling with this issue for quite some time. As a newcomer to HTML and Jquery, I'm looking to switch images after multiple clicks. Any advice and tips would be greatly appreciated! After some trial and error, I discovered that the IF ...

jqueryhtmlonclick

Is there a way to modify the color of the horizontal line within react-native-otp-inputs in the React Native platform?

Is there a way to customize the color of the horizontal line in react-native-otp-inputs for react native? I used react-native-otp-inputs to capture user OTP input, but now I want to change the color of the default black horizontal line to white. You can re ...

javascriptcssreactjsreact-native

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

htmlcssangularangular-material

Is there a way to display just one element without affecting the other elements within the same class?

I need to create a series of buttons that can appear and disappear when clicked. Here's how it should function: When I click on link 1 (link 2 is currently hidden). Link 2 should then become visible. The challenge lies in distinguishing between mu ...

javascriptjqueryhtml

Increase the quantity with animation

I am attempting to increment a number within an element on the page. However, I require the number to have a comma included while the increment should only increase by 1 digit every second. The code is currently functional, but I am facing a dilemma regar ...

javascriptjquery

The dynamically created dropdown menu is experiencing functionality issues

I am facing an issue with a dynamically generated dropdown menu in my Angular application. Despite everything else working fine, the dropdown is not functioning as expected when fetched from the backend. index.html <!DOCTYPE html> <html ng-app=" ...

angularjstwitter-bootstrapdrop-down-menuangular-ui-bootstrap

Transitioning from a see-through navigation bar to a vibrant colored menu as

I consider myself a novice when it comes to JavaScript. My goal is to create a Transparent Menu that smoothly transitions from transparent to white with a box shadow as I scroll down the page. However, the JavaScript code I have implemented does not seem ...

javascripthtmlcssscrollmenu

Creating a JavaScript function to imitate the pressing of the Enter

I am attempting to mimic the pressing of the Enter key using JavaScript within a specific TextArea. Below is the code I have written: function enter1() { var keyboardEvent = document.createEvent('KeyboardEvent'); var initMethod = ...

javascripthtmldom-eventskeyboard-eventsenter

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

javascripthtmlangulartypescript

Guide to sending a file to API server using Node.js

Currently, I am in the process of developing a web application that requires users to upload a test report. The front end is being handled by me, while another team member is responsible for the backend using node.js and mongodb. Our setups involve running ...

ajaxnode.jshtmlmongodbexpress

What is the process for including paths as parameters in jvectormap?

Can you assist me with a simple question regarding jvectormaps? How can I pass paths as parameters using this plugin? $('#worldMap').vectorMap({ map: 'world_mill_en', backgroundColor: "transparent", ...

javascriptjqueryjvectormap