`vertical navigation on the left side with expanding submenus`

Trying to create a navigation system on the left side of the page with submenus appearing on the right without impacting the main content. If anyone has any code snippets or resources that can help achieve this, I would really appreciate it. The objective is to have the submenus show up on click rather than hover. The current implementation for the first submenu uses .dropdown:hover .dropdown-content without jQuery, but I'm open to using JavaScript or jQuery if necessary. Thank you!

<style>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px;}
...
    </div></questionbody>
<exquestionbody>
<div class="question">
                
<p>Looking to be able to place a vertical navigation menu on the left-hand side of the webpage, with submenus appearing on the right-hand side without affecting the main content (using z-index arrangement). Does anyone have links to sample code (maybe in CodePen) or snippets that could provide guidance? I need the submenus to show up on click rather than hover...
The existing setup only utilizes .dropdown:hover .dropdown-content for the initial level of submenus and doesn't rely on jQuery. However, I am not opposed to including JavaScript or jQuery if required. Thanks a lot!</p>
<pre><code><style>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px;}

/* Rest of the styling code */

</style>


/* HTML code structure */
htmljquerycss

Answer №1

Check this out

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Best Blog Ever</title>
<style>
nav ul {list-style-type: none; margin:0; padding:0; width: 200px; background-color: #f1f1f1; position: fixed;height: 100%}
nav ul li {min-width: 200px; font-size:14px;}
nav ul li a {display: block; color: #000; text-decoration: none; padding: 16px 0 16px 16px;}
ul li:hover > a {color: white; background-color: #555;}

.dropdown-content {
    min-width: 150px;
    display: none;
    left: 200px;
    float:left;
    position: absolute;
    font-size:14px;
    margin-top: -48px;
}
.dropdown-content a {
    background-color: #fbfbfb;
    color: black;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 16px 0 16px 16px;
}
.dropdown:hover > .dropdown-content {
    display: inline-block;
}
.main {
  margin-left: 250px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
    <li class="dropdown"><a href="">Menu item 1</a>
        <ul class="dropdown-content">
            <li class="dropdown"><a href="">Menu item 11</a>
                <ul class="dropdown-content">
                    <li class="dropdown"><a href="">Menu item 111</a>
                        <ul class="dropdown-content">
                            <li class="dropdown"><a href="">Menu item 1111</a>
                                <ul class="dropdown-content">
                                    <li class="dropdown"><a href="">Menu item 11111</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11112</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11113</a>
                                    </li>
                                    <li>
                                        <a href="">Menu item 11114</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="">Menu item 1112</a>
                <ul class="dropdown-content">
                  <li class="dropdown"><a href="">Menu item 11121</a>
                  </li>
                  <li>
                    <a href="">Menu item 11122</a>
                  </li>
                  <li>
                    <a href="">Menu item 11123</a>
                  </li>
                  <li>
                    <a href="">Menu item 11124</a>
                  </li>
                </ul>                
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Menu item 112</a>
                    </li>
                    <li>
                        <a href="">Menu item 113</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">Menu item 12</a>
            </li>
            <li>
                <a href="">Menu item 13</a>
            </li>
            <li>
                <a href="">Menu item 14</a>
            </li>
        </ul>
    </li>
  <li><a href="">Menu item 2</a></li>
  <li class="dropdown"><a href="">Menu item 3</a>
  <ul class="dropdown-content">
    <li class="dropdown"><a href="">Menu item 31</a>
        <ul class="dropdown-content">
            <li class="dropdown"><a href="">Menu item 311</a>
                <ul class="dropdown-content">
                    <li class="dropdown"><a href="">Menu item 3111</a>
                        <ul class="dropdown-content">
                            <li><a href="">Menu item 31111</a></li>
                            <li><a href="">Menu item 31112</a></li>
                            <li><a href="">Menu item 31113</a></li>
                            <li><a href="">Menu item 31114</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">Menu item 312</a></li>
            <li><a href="">Menu item 313</a></li>
            <li><a href="">Menu item 314</a></li>
        </ul>
    </li>
    <li><a href="">Menu item 32</a></li>
    <li><a href="">Menu item 33</a></li>
    <li><a href="">Menu item 34</a></li>
  </ul>
  </li>
  <li><a href="">Menu item 4</a></li>
</ul>
</nav>
</header>

<div class="main">
  <h2>Another Nav Example</h2>
  <p>This nav is just a demo.</p>
</div>
    
</body>
</html>

Answer №2

After extensive searching, I finally stumbled upon a code snippet that perfectly fits my requirements. If anyone else is on the hunt for a vertical leftnav solution, feel free to check it out here: https://jsfiddle.net/alvaromenendez/9m60mx6r/7/

<style>
html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}    
</style>

<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class=""><a href="#">Strategy & Technical</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#">APL & Products</a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                        <li class=""><a href="#">Review</a></li>
                        <li class=""><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
                <li ><a href="#">News</a></li>
            </ul>
        
    </div>

<script>
$('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
</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

Utilizing jQuery to confine the function's scope solely to the specified element

The following script represents a toggle function that is linked to various widgets within an admin panel. jQuery(document).ready(function() { jQuery(document).on('click','.toggleExtras', function(e){ jQuery('.extras&a ...

jqueryslidetoggle

The -webkit-box-reflect effect vanishes during the transition

I need help with this issue: The image loses its reflection during the transition until it returns at the end. Any suggestions are appreciated! Thank you! .specials-box { width: 330px; margin: 50px 0; height: 500px; position: relative; ...

htmlcssreflectiontransition

Merging the `on('click')` event with `$(this)`

Hello everyone, this is my first time posting here. I have a question regarding the possibility of achieving a specific functionality. I would like to attach click events to a series of anchor links and then use the $.get() method to reload some icons. T ...

javascriptjquery

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

Currently building my personal portfolio website with Bootstrap 4, I came up with a great idea: changing the navigation bar color based on different sections of the website. I attempted to achieve this using JQuery's offset and scrollTop functions, bu ...

javascripthtmljquerycssbootstrap-4

How can I update an image source using JavaScript in a Django project?

Is it possible to dynamically change the image src using onclick without relying on hard paths or Django template tags? I have concerns that this may not be best practice. How can I implement a method to inject/change the ""{% static 'indv_proj&b ...

javascripthtmldjango

Do not fulfill the promise until all the images have finished loading

Below is the intended process: Iterate through a collection of img tags Retrieve each tag's src URL Convert it to a base64 encoded string using an HTML 5 canvas Once all images have been converted, resolve the promise and call the callback function ...

javascriptjqueryimagebase64

Extract data from the HTML element on an iPhone device

Currently, I am loading HTML contents into a list in the UILabel. I have successfully managed to remove the tags and append the contents together. However, there are specific instances where the content includes Is it y=2 or x>2,y<1 Hello x = 2,Wor ...

htmliphoneiosobjective-cnsstring

Opposite of CSS Media Query in a precise manner

Can you provide the opposite of this specific CSS media query? @media only screen and (device-width:768px) To clarify, what we are looking for is everything except iPad or not iPad. Just an FYI, I have attempted the code below without success: @media n ...

htmlcssw3cmedia-queries

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

I would like to pass parameters to a JavaScript function. The function will then display telephone numbers based on the provided parameters. <select> <option value="name-kate">Kate</option> <option value="name-john">John& ...

javascripthtmlbuttontags

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

Retrieving all selected values from a dropdown list using Jquery Chosen upon form submission

I am currently utilizing the Jquery Chosen Plugin to enhance my website. One of the features I have implemented is a MultiSelect List on my Page. <select name="articles_on_this_menu" multiple="multiple" data-placeholder="Choose Articles" id="articles_ ...

jqueryjquery-chosen

What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window. * { margin: 0; padding: 0; font-size: 50px; } .sticky { width: 50px; h ...

htmlcsscss-positionsticky

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

After creating a table containing GDP data for country states, I've noticed that when a user clicks on a state row, the child table displaying district GDP appears. However, there seems to be an issue with the child table as it keeps repeating. I&apos ...

javascripthtmlvue.js

The radio button element could not be located using the attribute "checked="Checked""

While working with Geb, I encountered an issue using the code div.find("input","checked":contains("checked")). This is the snippet of code I attempted to use in order to locate the checked radio button on a webpage. However, I received an error when using ...

javascripthtmlcssseleniumgeb

Generating Data into JSON Array/Object

I have some JSON data here, { "cleaning" : [ { "MOPS" : [ { "id" : "123", "name" : "best mops", "price" : "123" }, { ...

jqueryjson

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flickr Feed</title> <link href="../_css/site.css" rel="stylesheet"> <link rel="stylesheet" type= ...

jqueryhtmljson

jQuery.get() function is limited to specific types of webpages

I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...

javascripthtmljqueryajaxget

exercise on json result

Hello everyone, I have encountered the following output: ["images\/zara\/shoes\/thumbnail\/1.png","images\/zara\/shoes\/thumbnail\/2.png"] using this code snippet: $imgurl=array(); $i=0; if(mysql_num_rows($result) ...

jqueryjson

Is there a way for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

<html> <head>Harshal</head> <script> var limit="5:0" var doctitle = document.title var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 function beginrefresh(){ if (parselimit==1) window.location.reload ...

javascripthtml

"What is the best way to send back multiple responses to an AJAX request in a Struts action class

Looking for some guidance on handling responses in an Ajax call from a Struts (1.3.10) action class. I've been using the PrintWriter class to send responses back to the client's browser, and while it works sometimes, there are instances where the ...

javajqueryajaxjspstruts-1