Looking for a multi-level mobile navigation bar for Bootstrap that does not require hover functionality

I'm having trouble finding a suitable mobile bootstrap menu that doesn't rely on hover effects. I need it to work without any jquery or javascript. I've tried multiple examples, but none seem to fit the bill. The codepen linked below is the closest match I've found so far, but unfortunately, it uses some jquery which causes compatibility issues with the site I'm working on.

codepen: http://codepen.io/iamgonge/pen/VpzMXL jquery:

(function($){
    $(document).ready(function(){
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);

css:

 .top{height: 150px;}.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
   border-radius:0 6px 6px 6px;}

.dropdown-submenu>a:after{
  display:block;content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#cccccc;
  margin-top:5px;
  margin-right:-10px;}
.dropdown-submenu:hover>a:after{
  border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}
.dropdown-submenu.pull-left>.dropdown-menu{
  left:-100%;
  margin-left:10px;
  -webkit-border-radius:6px 0 6px 6px;
  -moz-border-radius:6px 0 6px 6px;
  border-radius:6px 0 6px 6px;}


.navbar{background-color: #4F96BA;}

html:

<header class="top"></header>
<div id="nav">
   <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#" target="_blank">LOGO</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a>
               <ul class="dropdown-menu">
                  <li class="dropdown dropdown-submenu">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office</a>
                     <ul class="dropdown-menu">
                        <li class="dropdown dropdown-submenu">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office 2016</a>
                           <ul class="dropdown-menu">
                              <li>
                                 <a href="/office-2016-home-business.aspx">Office 2016 Home & Business</a>
                              </li>
                              <li>
                                 <a href="/office-2016-home-student.aspx">Office 2016 Home & Student</a>
                              </li>
                              <li>
                                 <a href="/office-2016-mac.aspx">Office 2016 MAC</a>
                              </li>
                              <li>
                                 <a href="/office-2016-pro-plus.aspx">Office 2016 Pro Plus</a>
                              </li>
                              <li>
                                 <a href="/office-2016-professional.aspx">Office 2016 Professional</a>
                              </li>
                              <li>
                                 <a href="/office-2016-standard.aspx">Office 2016 Standard</a>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
              </ul>

            </li><!--topend-->


         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </nav>
</div>
<!--nav-->



<div class="container">
   <div class="row">
      <h1>You Like It ?</h1>
      <br>
   </div>
</div>
jqueryhtmlcsstwitter-bootstrap

Answer №1

One way to create a menu layout like the one you described using only CSS is by utilizing the checkbox hack method. Below is a basic demonstration that outlines this approach.

label, a {
  color: #09c;
  text-decoration: underline;
  cursor: pointer;
}

ul ul,input {
  display: none;
}

input:checked ~ ul {
  display: block;
}
<nav>
  <ul>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <input id="input" type="checkbox">
      <label for="input">menu</label>
      <ul>
        <li>
          <a href="#">link</a>
        </li>
        <li>
          <input id="input2" type="checkbox">
          <label for="input2">menu</label>
          <ul>
            <li>
              <a href="#">link</a>
            </li>
            <li>
              <input id="input3" type="checkbox">
              <label for="input3">menu</label>
              <ul>
                <li>
                  <a href="#">link</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">link</a>
    </li>
  </ul>
</nav>

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

Error when attempting to open and close a div through a click event

Currently, I am in the process of developing a web service that generates arrays. I am facing an issue where all the div elements on my page load open by default, but I want them to remain closed and only open upon clicking. Specifically, I want a nested d ...

javascriptphpjqueryhtmlcss

Utilizing AJAX to send emails - displaying real-time progress and status updates

In my project, I am utilizing jQuery version 1.11.1 along with the jQuery validation plugin To validate and send my contact form via AJAX, I have included the following script (where {{hash_tag}} is a Twig variable): <script> $("#contactform" ...

javascriptjqueryajax

Creating 3D audio effects in HTML5

Let's dive into the challenge... Currently, I'm working on building a virtual environment with WebGL (THREE.js) where various objects produce distinct sounds. My goal is to create a surround sound experience based on the position of these object ...

htmlaudiowebglthree.js

Creating a dynamic onclick function that depends on a variable passed from a while loop in PHP

If you're familiar with PHP, I have a scenario for you. Let's say there's a list of items generated using a while loop in PHP. Each item has a sub-list that should only appear when clicked on. I tried using the onclick function in jQuery but ...

javascriptphpjqueryonclick

Fixing CSS and photo display issues in a Django project on an AWS EC2 deployment

After successfully developing my project in localhost and pushing it to Github, I proceeded to clone it on my AWS EC2 Ubuntu server. The public IP of the site is: . However, upon accessing the site through this IP, all the content displays except for image ...

pythoncssdjangoimageamazon-web-services

Getting JSON data in the AJAX success function involves retrieving the data from the response object

This is the AJAX script I wrote to retrieve dropdown records. function fetch_items() { $.ajax({ type: "POST", url: "ajax.php", contentType: "application/json; charset=utf-8", async: false, data: data, dataType: "json", succes ...

javascriptphpjqueryajax

Passing parameters to a function triggered by a DOM event

I am struggling to pass an argument to a function during a JavaScript event. When the drop-down menu is focused, the text changes based on the argument passed to the function call. I can't seem to get this functionality to work! Any assistance would ...

javascriptcssonfocus

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

cssreactjstypescriptvite

Best practice for incorporating Bootstrap into Webpack

Greetings everyone, I've been experimenting with Bootstrap for Webpack, but I've hit a roadblock. After reading numerous blog articles, I found that they either rely on the outdated 'bootstrap-webpack' plugin from 7 months ago (which d ...

javascripttwitter-bootstrapwebpackvue.jsbabeljs

Encountering a 'JSON parsing error' while transmitting data from Ajax to Django REST Framework

I've been encountering an issue while trying to send a JSON to my REST API built with Django Rest Framework. Every time I make this request, I receive an error message, regardless of the view I'm accessing. I suspect the problem lies in the AJAX ...

javascriptjqueryjsondjango-rest-framework

Issues have been reported with the functionality of the backbone.js app when switching views, particularly regarding the inconsistent

I am in need of assistance with backbone.js. Whenever a 403 or 401 error occurs, I want to display the login view. Currently, I have attempted the following approach: $(document).on('ready', function(){ app.loadTemplates(['ShellView&apo ...

javascriptjqueryajaxbackbone.js

designing a corner tab element

I'm aiming to create a triangular button in the upper-right corner of my website using fixed positioning. It will be an icon on top of a background color with a hover effect. I'm curious if it's possible to achieve this with an angled div or ...

javascripthtmlcss

Choose and target any element on the page using jQuery

Can someone help with selecting any element on a webpage, such as clicking on the body, a div, or a specific ID, so that I can save it to a variable for later editing? I've attempted: $("*", document.body).click(function (e) { e.stopPropagation() ...

javascriptjquery

Updating the information on a webpage in real-time without the need to refresh the

I recently volunteered to create a website for my local animal shelter, and they requested something similar to the design of . I especially admire how they handle the buttons and the way only the central div changes when clicked. Despite my efforts usin ...

jqueryajaxhtml

Issue with Bootstrap 5 dropdown menu on mobile devices when not sliding down upon clicking

Important things to know before getting started: Utilizing Django (python) Implementing Bootstrap Additionally, using html and css Steps taken (in sequence leading up to encountering an error): Copied the navbar template from the bootstrap navbar docume ...

htmlcssfrontendnavbarbootstrap-5

Eliminating projectiles from disorganized list

Query If you are interested in accessing the html and css for the current website I am developing, you can locate it at /Query I am currently facing an issue with removing the bullets displayed in the top horizontal menu (Home...Contact). Despite follow ...

htmlcss

Utilizing JavaScript to Parse RSS XML Feeds Across Domains

Looking to parse an RSS (XML) file without relying on the Google RSS feed. I have attempted using JSONP, but it resulted in downloading the file and throwing an error "Uncaught SyntaxError: Unexpected token < ". $.ajax({ type: "GET", ur ...

javascriptjqueryajaxxmlrss

The alignment of columns in the fixed header table is off since it does not contain the necessary <thead> and <tbody> elements

On my page, I have three tables, with one of them containing a large amount of data. To make it easier to read, I decided to have a fixed header for the table. However, I am facing an issue where the columns in the thead (header) and tbody (body) are not a ...

htmlcss

How can you center a <div> that has a width of 100%?

Is it possible to center a div using the following CSS code: .container { width: 1024px; margin: 0 auto; } When the container is placed inside body tags, spanning across all displayed page content, it aligns perfectly. The challenge arises whe ...

htmlcssscreen-resolution

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

javascriptjqueryhtmlbackbone.jsurl-routing