w3.css code snippet for collapsing dropdown navigation bars

LudwigvanHofen · September 15, 2016

Hi there,

I just recently started using w3.css and was looking for some code template for a navigation bar, that is responsive. Here on your website there is just one useful suggestion for a collapsing navigation bar (near the end). Sadly this didn't help me with a navigation bar, which has a dropdown element, since these links won't be displayed on small devices (especially since hovering is not supported on most respective devices). So I made a few alterations based on the try it code (original code here) to make it work. I wanted to post my modifications here so, if you think they are useful, they might be implemented as another code snippet for orientation on the w3.css navigaton page. Hope you enjoy, if not so be it

my code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<ul class="w3-navbar w3-large w3-black w3-hide-small">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="w3-dropdown-hover"><a href="#">Dropdown Hover</a>
    <div class="w3-dropdown-content w3-card-4">
      <a href="#">Sublink 3a</a>
      <a href="#">Sublink 3b</a>
      <a href="#">Sublink 3c</a>
    </div>
  </li>
</ul>


<a class="w3-center w3-hide-medium w3-hide-large" href="#" onclick="myFunction()">
  <div class="w3-black" style="padding: 8px 16px">
    ☰
  </div>
</a>
<div id="demo" class="w3-hide w3-hide-large w3-hide-medium">
  <ul class="w3-navbar w3-left-align w3-border-top w3-large w3-black">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Dropdown Hover</a>
      <ul class="w3-navbar w3-left-align" style="padding-left: 15px;">
        <li><a href="#">Sublink 3a</a></li>
        <li><a href="#">Sublink 3b</a></li>
        <li><a href="#">Sublink 3c</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="w3-container">
  <p>In the example below, the navigation bar is replaced with a button (☰) in the center when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked. Dropdown Menus will be displayed, since mobile devices don't support hovering.</p>
  <p>Resize the screen to see the effect.</p>
</div>

<script>
function myFunction() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</body>
</html>

Peace and love

dsonesuk · September 15, 2016

using w3 css w3schools example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
#demo.active .w3-hide-small {display: block !important;}

</style>
</head>
<body>

<div id="demo" class=""><ul class="w3-navbar w3-large w3-black w3-left-align">
  <li class="w3-hide-medium w3-hide-large w3-black w3-opennav w3-right">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
  </li>
  <li><a href="#">Home</a></li>
  <li class="w3-hide-small"><a href="#">Link 1</a></li>
  <li class="w3-hide-small"><a href="#">Link 2</a></li>
  <li class="w3-hide-small"><a href="#">Link 3</a></li>
</ul>

</div>



<div class="w3-container">
  <p>In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked.</p>
  <p>Resize the screen to see the effect.</p>
</div>

<script>
function myFunction() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("active") == -1) {
        x.className += " active";
    } else { 
        x.className = x.className.replace(" active", "");
    }
}
</script>

</body>
</html>

Sign In

w3.css code snippet for collapsing dropdown navigation bars

Recommended Posts

LudwigvanHofen

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity