Jump to content

Recommended Posts

Posted

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. 

 

 

Posted

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.

 

  • 1 year later...
Posted

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;
    }

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...