how to create dropdown menu when screen resolution is low?

Question

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/javascript" href="js/bootstrap.js">
        <script src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <style>



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

             ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
  li ul {display: none;}
  ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff; width: 100%}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
  li:hover li {float: none; }
  li:hover a {background: #0026ff;}
  li:hover li a:hover {background: #4800ff;}
  #drop-nav li ul li {border-top: 0px;}
 #s{float: left;position: relative;width: 100%}
            }
        </style>

    </head>
    <body>
        <div  style="float: left"  id="s">
     <ul id="drop-nav">
    <li><a href="#">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul>
 </div>

        <div  style="float: right" id="s">        <ul id="drop-nav">
        <li><a href="#">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul></div>

        <div  style="float: right;position: relative" id="s">      <ul id="drop-nav">
        <li><a href="#">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
    <ul>
    <li><a href="#">Joomla</a></li>
    <li><a href="#">Drupal</a></li>
    <li><a href="#">WordPress</a></li>
    <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
 </ul></div>
        <br><br><br><br>


</div>
    </body>
</html>

I want this list to be converted into dropdown menu and on click on it, I tried this logic and searched bootstrap classes didn't find any. I want it work like navigation bar of bootstrap as it gets converted to dropdown menu when screen resolution is low and work onclick.

I suggest you create a separate dropdown menu element and show/hide each accordingly for different media queries (much more resource and work efficient) than doing with JS — Alari Truuts, Apr 08 '16 at 12:38

score 1 · Accepted Answer · edited May 23 '17 at 10:28

first of all read Difference between id and class might be your code was not working because of it. i just use bootstrap collapse in your code its working fine for me i just change id with classes and some css you can compare your code with it.

  ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  ul li {
    display: block;
    position: relative;
    float: left;
    border: 1px solid #fff;
    width: 100%
  }
  li ul {
    display: none;
    width: 100%;
    z-index: 1
  }
  ul li a {
    display: block;
    background: #808080;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    width: 100%
  }
  ul li a:hover {
    background: #f00;
  }
  li:hover li {
    float: none;
  }
  li:hover a {
    background: #0026ff;
  }
  li:hover li a:hover {
    background: #4800ff;
  }
  .drop-nav li ul li {
    border-top: 0px;
  }
  .s {
    position: relative;
    width: 100%
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
      <ul id="test1" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
      <ul id="test2" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="s">
  <ul class="drop-nav">
    <li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
      <ul id="test3" class="collapse">
        <li><a href="#">Joomla</a></li>
        <li><a href="#">Drupal</a></li>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Concrete 5</a></li>
      </ul>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>

how to create dropdown menu when screen resolution is low?

1 Answers1