What is the best way to include a dropdown menu in a vertical navigation bar?

Seeking your expertise in creating a dropdown list for my vertical navbar. Any ideas on how to achieve this?

I have been exploring various code options for my project. Here's a snippet of what I've tried:

https://i.sstatic.net/crSIO.png

Here is the HTML Code snippet:

<div class="menu-overlay"></div>
<div class="side-menu-wrapper">
    <a href="#" class="menu-close">×</a>
    <ul>
        <li>
            <form class="example"action="action_page.php">
                <input type="text" placeholder="Search.." 
                name="search">
                <button type="submit">
                    <i class="fa fa-search"></i>
                </button>
            </form>
        </li>
        <li>
            <a href="Index.html" target="_blank" 
               rel="nofollow">Home</a>
        </li>
        <li>
            <a href="#" target="_blank" rel="nofollow">About</a>
            <ul>
                <li>
                    <a href="#" target="_blank" rel="nofollow">Introduction</a>
                </li>
                <li> 
                    <a href="#" target="_blank" rel="nofollow">Mission</a>
                </li>
                <li> 
                    <a href="#" target="_blank" rel="nofollow">Vision</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" target="_blank" rel="nofollow">Facebook</a>
        </li>
        <li>
            <a href="#" target="_blank" 
            rel="nofollow">Flickr</a>
        </li>
    </ul>
</div>

And here's the CSS Code snippet:

.side-menu-wrapper {
   background: rgba(0,114,187,0.7);
   padding: 40px 0 0 40px;
   position: fixed;
   top: 0;
   right: 0; 
   height: 100%;
   z-index: 2;
   transition: 0.5s;
   width: 250px;
   font: 20px "Courier New", Courier, monospace;
   box-sizing: border-box;
}

.side-menu-wrapper > ul{
   list-style:none;
   padding:0;
   margin:0;
   overflow-y: auto;
   height:95%;
}

/* More CSS styles... */

Final Result Image: https://i.sstatic.net/H3ARX.png

Thanks for your help!

Answer №1

To ensure your About sub-menu functions properly, utilize Bootstrap's collapse class (find out more here):

<a href="#" class="active" data-toggle="collapse" data-target="#sub-menu" target="_blank" rel="nofollow">About<span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
<div class="collapse" id="sub-menu">
    <ul>
        <li href="#" target="_blank" rel="nofollow">
            <a >Introduction</a>
        </li>
        <li href="#" target="_blank" rel="nofollow"> 
            <a >Mission</a>
        </li>
        <li href="#" target="_blank" rel="nofollow"> 
            <a >Vision</a>
        </li>
     </ul>
</div>

Example:

.side-menu-wrapper {
   background: rgba(0,114,187,0.7);
   padding: 40px 0 0 40px;
   position: fixed;
   top: 0;
   right: 0; 
   height: 100%;
   z-index: 2;
   transition: 0.5s;
   width: 250px;
   font: 20px "Courier New", Courier, monospace;
   box-sizing: border-box;
 }

.side-menu-wrapper > ul{
   list-style:none;
   padding:0;
   margin:0;
   overflow-y: auto;
   height:95%;
}

.side-menu-wrapper > ul > li > a {
    display: block;
    border-bottom: 1px solid black;
    padding: 6px 4px 6px 4px;
    color: white;
    transition: 0.3s;
    text-decoration: none;
  }

.side-menu-wrapper > a.menu-close { 
   padding: 8px 0 4px 23px;
   color: white;
   display: block;
   margin: -30px 0 -10px -20px;
   font-size: 35px;    
   text-decoration: none;
 }

.menu-overlay { 
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 <div class="menu-overlay "></div>
  <div class="side-menu-wrapper">
  <a href="#" class="menu-close">×</a>
    <ul>
    <li>
      <form class="example" action="action_page.php">
        <input type="text" placeholder="Search.." 
               name="search">
        <button type="submit">
          <i class="fa fa-search"></i>
        </button>
      </form>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Home</a>
      </li>
      <li>
        <a href="#sub-menu" class="active" data-toggle="collapse" data-target="#sub-menu">About<span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu">
          <ul>
            <li href="#" target="_blank" rel="nofollow">
              <a >Introduction</a>
            </li>
            <li href="#" target="_blank" rel="nofollow"> 
              <a >Mission</a>
            </li>
            <li href="#" target="_blank" rel="nofollow"> 
              <a >Vision</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Facebook</a>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Flickr</a>
      </li>
    </ul>
  </div>

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

An issue with the blog tag occurs immediately following the if statement

I am working on rendering three columns per row in my HTML file with the help of Django2.1 and Bootstrap4. Here is a snippet of the HTML code I am using: <main class="container" role="main"> {% for treasure in treasures %} {% block row ...

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

Are there any CSS3 selectors currently available or planned for matching partial attribute names?

By using [foo^="bar"], you can target nodes with the attribute foo that starts with the value bar. Is there a method to select nodes based on an attribute name that begins with a specific string? This would be useful for selecting all nodes with a data-* ...

Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start. Failed to compile /var/www/html/C#/nextApp/app/layout.js Module not found: Can't resolve 'next/font/google/target.css?{&quo ...

Django is refusing to display my CSS and JavaScript files - static files

Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...

Troubleshooting jQuery Selector Issue with Multiple :not Selectors - Why Isn't It Working as Anticipated

To close my lightbox by clicking the red zone, visit this link: The HTML structure of the lightbox is as follows: <div id="#lightbox" style="display:block;"> <div class="contents_lb"> <div class="img_box" style="margin-top: 74.5px; wid ...

What steps should be taken to create a two-row navbar in Bootstrap 4?

It's really frustrating for me. This is my bootstrap4 navbar code, and I've tried so many different approaches to creating two rows without success. Despite inputting the code above, I keep getting the wrong result. I've attempted various ...

Tips for creating dynamic images in a flexible design

When creating a fluid layout, you can use em or % for font and div width and height to achieve fluidity. However, the challenge lies in making images resizable. I aim to design a single layout that works seamlessly across all screen sizes and devices. ...

JQuery UI - Issue with Draggable functionality immediately after dropping it

HTML: <div class="character_list"> <div id="draggable" class="character_list_container"> <div><img class="1" src="http://ahna.web44.net//img/charas/13.png" /></div> <div><img class="2" src="http://a ...

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

Using the margin-top property in CSS will only take effect if a border has been declared

Greetings, I have been noticing a strange occurrence lately, and I finally decided to seek some answers. Below is a snippet of my basic HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title< ...

The CSS background-image fade transition is optimized for Chrome browsers

HTML: <a class="navbar-brand page-scroll" href="#intro"></a> CSS: .navbar-custom .nav li a.navbar-brand { width: 70px; height: 62px; background: url(myimg.png) no-repeat; background-size: 70px 62px; display: block; po ...

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

I've noticed that this issue has been raised multiple times before. Despite going through all the questions, I still can't seem to resolve it. The transition from Typescript to Javascript went smoothly until I reached the implementation of CSS. U ...

Styled Components do not have the ability to define :hover states

export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; ...

button click event blocked due to unforeseen circumstances

Recently, I've been attempting to change the CSS properties of a div by triggering a click event. However, no matter what I do, it doesn't seem to be working and it's starting to frustrate me. Can anyone shed some light on why this might be ...

Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

Recently, I came across a simple jQuery Star rating system that I want to implement on my website. I have been following the code from http://jsfiddle.net/, and it works perfectly for one star rating system. However, I have multiple star rating systems on ...

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...

Save a CSS class within the browser

One feature of my project is the ability to change the site theme with a simple click: <ul> <li class="=contact"><a href="#">Contact</a></li> <li class="facebook"><a href="#">Facebook</a></li> &l ...

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Before we delve into the details, I invite you to take a look at this fiddle using IE7. It's quite intricate and not something I want to repeat here. The main issue is that clicking on the red block should display additional information. The top row ...