simple responsive html (with optional drop down menus and floating nav)

Question

I've found loads of assistance online with floating navs and responsive navs.. but i'd like to combine them and also leave the option of drop down sub menus in both responsive layouts

does anyone have any experience of this?

this is what I have so far - this gives a responsive layout - here is a fiddle - (NB: in this fiddle the responsive hamburger doesn't work - but it does) https://jsfiddle.net/fa6xj2z1/

Question: there are a) no drop down menus and b) no floating top nav. Can anyone help me add drop down menu items and floating nav to this?

Here is the code

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
      position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
 }
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex
          ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat
          cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.
        </p>
        <p>
          Nulla efficitur pharetra leo. In convallis lobortis
          nisl, ut pretium purus aliquam eget. Maecenas
          vestibulum venenatis eros, a volutpat mi malesuada eu.
          Cum sociis natoque penatibus et magnis dis parturient
          montes, nascetur ridiculus mus. Nam mollis vitae eros
          quis congue. Ut eget massa semper, cursus ligula et,
          euismod lacus. Sed neque metus, tristique eget
          scelerisque vitae, luctus at metus. Proin vel
          ullamcorper arcu. Praesent dapibus eleifend turpis et
          euismod. Sed tincidunt lobortis erat, nec elementum
          libero molestie sed. Phasellus eget tristique lorem.
        </p>
        <p>
          Maecenas dictum molestie nisi, eu ornare mauris posuere
          a. Proin tempus est ligula, ut varius risus faucibus
          nec. Morbi ultrices leo et vulputate facilisis. Nunc
          congue, leo a facilisis dictum, metus neque tempus
          arcu, ac aliquet nulla mi a felis. Maecenas quis
          euismod velit. Curabitur dapibus ipsum vitae
          ullamcorper auctor. Nullam nec ultricies urna.
          Curabitur lacinia nec ipsum a condimentum. Quisque
          lacinia faucibus augue, sed efficitur enim mollis eget.
          In et metus non ante interdum varius nec in sem.
        </p>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</body>
</html>

you want dropdown menus in a responsive layout? i wouldn't recommend this from a user experience view... dropdowns are terrible to use, especially on mobile devices — Punit, Dec 05 '16 at 23:01
@Punit I agree it's certainly a compromise, but since any top nav can easily get "too fat" and I'd prefer a "sub menu'd" nav to a wrapped menu nav.. (personally) .. just to be clear: I think in mobile responsive mode i'd probably just render it all horizontally and alter the colour — Mr Heelis, Dec 05 '16 at 23:16
You can just use something like `x.classList.toggle("active")` for the toggling stuff. Pretty useful. [Here's a link to docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). I also use this in [my answer](http://stackoverflow.com/a/40985132/3421659) below! — Andrew, Dec 05 '16 at 23:23

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

the best solution for that is using Boostrap

You have Dropdowns and also navbars

This is an example of a navbar with Dropdowns:

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

i dont recomend avoid, boostrap is tested by a lot of users, and a lot of browsers versions — MatCas, Dec 05 '16 at 22:45
Not only is it unreasonable to use Bootstrap for this one simple problem the OP has, Bootstrap is NOT necessarily the best solution anyway. Downvoting. — Andrew, Dec 05 '16 at 22:46
nevertheless... I doubt that this is too hard.. I have seen many examples of all three online I am just trying to get all three in one place ! — Mr Heelis, Dec 05 '16 at 22:47
@Mr Heelis no, I downvoted this incredibly low-quality answer. Your question is fine. — Andrew, Dec 05 '16 at 22:50

score 0 · Answer 2 · answered Dec 05 '16 at 23:18

Try this for reference. (I apologize for the ugliness)

var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');

btn.addEventListener("click", function(){
    ul.classList.toggle("active");
});

#bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #333;
}
nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-family: Verdana;
  text-decoration: none;
}
nav ul li:hover {
  background-color: #666;
}
#navBtn {
  display: none;
}
@media screen and (max-width: 500px) {
  nav ul li,
  nav ul li a {
    text-align: center;
    display: block;
  }
  nav ul {
    display: none;
  }
  nav ul.active {
    display: block;
  }
  #navBtn {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    background-color: #333;
    color: #fff;
  }
}

<div id="bar">
  <button id="navBtn">&#9776;</button>
  <nav>
    <ul id="navUl">
      <li><a href="#">home</a></li>
      <li><a href="#">news</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
    </ul>
  </nav>
</div>

You do not need a framework for this. As a side note, you can also technically do this with pure CSS (though, that's a bit tricky; you'd use a checkbox w/ labels for it).

Also, I saw your className += code, so I wanted to specifically point out the Element.classList property. It comes with .add(), .remove(), .toggle() and other useful methods. Read about it here. It's beautiful.

simple responsive html (with optional drop down menus and floating nav)

2 Answers2