Jump to content
LudwigvanHofen

w3.css code snippet for collapsing dropdown navigation bars

Recommended Posts

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 :D

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

Share this post


Link to post
Share on other sites

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> 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...