adaptive menu bar with collapsible submenus

I would like to create a right side inline navigation bar with dropdown functionality. When the screen size is small, I want to hide all the menus and display a button. Clicking on the button should reveal a vertical navigation bar.

I am facing an issue in the media query where I am unable to toggle the visibility of the dropdown menu.

Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Business 2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.nav {
  float: right;
  list-style: none;     
  text-align: left;
  margin: 0;
  display:inline;
}
.nav > li {                          
    display:inline-block;
    padding: 10px 9px 10px 9px;                               
}
.nav > li a {                                               
     text-decoration: none;
     color: black;
     font-size: 16px;
     padding: 20px 15px 20px 15px;
 }

 .nav > li > a:hover {
     color: black;
 }
 
 ul li > ul li {
      position:relative;
      display:none;
      width:150px;
      height:50px;
      line-height:50px;
}
     
.dropdown {
  display: inline-block;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: black;
  background-color: inherit;
  margin: 0;
}

.nav-right a:hover {
  background-color: #E7E7E7;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 80px;
  top: 40px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: white;
  text-align: left;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
}

.dropdown-content a:hover {
  background-color: #ddd;
}
.nav .icon {
  display: none;
}

@media screen and (max-width: 680px) {

  ul.nav li a {display: none;}
  
  ul > li .dropbtn{
    display: none;
  }
  
  ul.nav li a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 680px) {
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li a.icon{
    position: absolute;
    right: 0;
    top: 0;
  }
 ul.nav.responsive li  {
    display: block;
    text-align: left;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
  
  ul.nav.responsive li.dropdown-content {position: relative;}
  ul.nav.responsive li.dropdown{
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>
<ul class="nav" id="topnav">
    <li><a href="#" class="active" >item1</a></li>
    <li>
        <div class="dropdown">
            <button class="dropbtn">item2
            <i class="fa fa-caret-down"></i></button>
            <div class="dropdown-content">
                <a href="#">subitem1</a>
                <a href="#">subitem2</a>
                <a href="#">subitem3</a>
            </div>
        </div>
    </li>
    <li><a href="#">item3</a></li>
    <li>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
        </a>
    </li>
</ul>           
<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
  
    x.className = "nav";
  }
  
}
</script>
</body>
</html>

Best regards,

Answer №1

To incorporate this into your media query, you should include the following:

          ul.nav.responsive li .dropbtn{
            display: block;
          }

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

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

I am facing an issue with an element in my code, which is as follows: <a ng-click="vm.openPage(page)">{{page.pageId}}</a> Within the vm.openPage() function, there are validations that need to be performed before redirecting to the page refere ...

Editing HTML using the retrieved jQuery html() content

I need to modify some HTML that is stored in a variable. For example: var testhtml = $('.agenda-rename').html(); console.log($('input',testhtml).attr('name')); I also tried the following: console.log($(testhtml).find(' ...

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

Changing the Image Source in HTML with the Power of Angular2

Despite my efforts, I'm unable to display the updated image in my HTML file. In my TypeScript file, the imageUrl is updating as expected and I've verified this in the console. However, the HTML file is not reflecting these changes. In my researc ...

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Trying to figure out how to remove a dragged element from the DOM after a successful drop using the native JavaScript drag and drop API. After attempting to listen for the drop event, it seems that it only fires on the element being dropped onto and does ...

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

Mastering HTML Tag Styling within Visual Studio

I'm looking for assistance on how to automatically format HTML tags using the Ctrl + K, Ctrl + D shortcut. For example: <label id="myLabelId">Hello</label> should be reformatted to: <label id="myLabelId"> Hello </label> ...

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

Unable to utilize the ng-disabled directive

Although this question may seem redundant, rest assured that I have exhausted all possible solutions. The issue lies in a disabled button using ng-disabled. I have a variable in the $scope that triggers a change in the ng-disabled attribute, but it fails t ...

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

When the font size is set below 16px on an iPhone, iOS will automatically zoom in to compensate

Currently, I am running tests on my app using an iPhone. Everything seems to be working correctly on the iPad, but when I try clicking on a text field on the iPhone, the view automatically zooms in. It appears that setting the font size to 16px or larger r ...

Is the <ul> tag aligning to the left?

I recently encountered an issue while designing my website. I created a div with a width of 200px on the right side of the webpage, and added a list of links within it. However, I noticed that elements inside the div are aligning slightly to the left, givi ...

Align a div to the center horizontally at the top of the screen

Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...

The error code 405 (Method Not Allowed) occurs in Ajax when the action field is empty or identical to the current page

Special thanks to @abc123 for sharing the code below in one of their posts: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <form id="formoid" a ...

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

I have little experience with javascript, but I want to make a change to my navbar icon. Currently, my navbar has a black background with a white navbar icon. As I scroll the page, the navbar background changes to white and the font color changes to black. ...

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...