A drop down menu

ryanstua · November 13, 2018

Not sure if this is the right place however I am trying to build, using HTML/CSS, a menu where items are arranged horizontally. One of the menu items, when clicked, opens a drop down menu. This sub menu is 100% wide aligned from the left edge of the page and will contain additional links. these links are arranged in columns and I want there to be 3 columns. Any help on this would be very much appreciated.

JMRKER · November 13, 2018

Can you provide an HTML example of the layout of the elements you are trying to include in your request?

I'm unclear as to the requirements.

dsonesuk · November 13, 2018

Its called a mega-menu

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_mega_menu_responsive

Edited November 13, 2018 by dsonesuk

ishan_shah · February 13, 2020

Hey @ryanstua, You can do something like that:

Html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<div class="navbar">  
    <div class="dropdown">
    <button class="dropbtn">Menu 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
     
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link A</a>
          <a href="#">Link B</a>
          <a href="#">Link C</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link X</a>
          <a href="#">Link Y</a>
          <a href="#">Link Z</a>
        </div>
      </div>
    </div>
  </div>
  <a href="#home">Home</a>
  <a href="#news">About Us</a>
 
</div>
</body>
</html>

And css:

 * {
      box-sizing: border-box;
    }
    
    body { 
      margin: 0;
    }
    
    .navbar {
      overflow: hidden;
      background-color: #333;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font: inherit;
      margin: 0;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: red;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content .header {
      background: red;
      padding: 16px;
      color: white;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: #ccc;
      height: 250px;
    }
    
    .column a {
      float: none;
      color: black;
      padding: 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .column a:hover {
      background-color: #ddd;
    }
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

Sign In

A drop down menu

Recommended Posts

ryanstua

JMRKER

dsonesuk

ishan_shah

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity