ryanstua Posted November 13, 2018 Posted 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 Posted November 13, 2018 Posted 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 Posted November 13, 2018 Posted November 13, 2018 (edited) 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 Posted February 13, 2020 Posted 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; }
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now