Now a days drop down menus are becoming more and more popular. so today, we are going to discuss how to create Facebook style drop down menu design using CSS. Here we haven't used jQuery script to Hide or display the drop down list, all the things are designed with the help of HTML and CSS only.
When user hover over setting icons, then it will display the drop down menu list.
Facebook-style Drop down Menu
Lets see the complete example for Drop down menu design using css. Here we have combined the HTML and CSS source code in one HTML file, hope you would not face any difficulties. Apart from this we have provided the proper comments for the drop down menu design, it helps you during the identification of source code.
Facebook like dropdown menu.html
check out HTML and CSS code below.
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <style> * { margin: 0px; padding: 0px } #main-container { width: 100%; margin: 0px auto; } body{ background-color:#e9ebee; } #header { width: 100%; height:30px; background-color: #4267b2; padding: 10px; color: white; } #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header section > #fb-icon { margin-left: 140px; } #header section > img { float: left; margin-left: 10px; } #header section > input { float: left; margin-top: 0px; margin-left: 10px; margin-right: 400px; } #header nav { width: 50%; float: left; } #header nav ul { list-style: none; } #header nav ul li { float: left; min-width: 10%; padding: 4px; margin-left: 10px; background-color: #ffffcc; text-align: center; color: black; } #header nav ul li a, a { text-decoration: none; } input { display: block; margin-top: 10px; min-width: 20%; height: 6px; padding: 10px; border: solid 1px #BDC7D8; } @media screen and (max-width: 1000px) { #header section > input { margin-right: 40px; } } /* -----------Drop Down Css code ----------------- */ .dropdown { position: relative; display: inline-block; } ul { list-style-type: none; margin: 0; padding: 0; top:41px; right:0px; width: 200px; background-color: white; font-weight:bold; position: absolute; display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } ul:before{ content:""; position:absolute; width:0px; height:0px; border: 10px solid; border-color: transparent transparent white transparent; right:5px; top:-21px; } li a { color: #000; text-decoration: none; } li { padding: 8px 16px; border-bottom: 1px solid #e5e5e5; } li:last-child { border-bottom: none; } li:hover { background-color: #e5e5e5; color: white; } .dropdown:hover ul{ display: block; } </style> </head> <body> <div id="main-container"> <header id="header"> <section> <img id="fb-icon" src="fb.png" width="30" /> </section> <section> <input type="text" id="search" placeholder="Search Friend" autocomplete="off" /> </section> <section> <img src="user.png" width="30" /> </section> <section> <img src="chat.png" width="30" /> </section> <section > <img src="earth.png" width="30" /> </section> <!-- Drop Down menu HTML code --> <section style="margin-left:40px;" class="dropdown" style="background:red;"> <img src="setting.png" width="30" /> <ul > <li><a class="active" href="#Create Page">Create Page</a></li> <li><a href="#Manage Pages">Manage Pages</a></li> <li><a href="#Create Ads">Create Ads</a></li> <li><a href="#Manage Ads">Manage Ads</a></li> <li><a href="#Activity Logs">Activity Logs</a></li> <li><a href="#Setting">Setting</a></li> <li><a href="#Log Out">Log Out</a></li> </ul> </section> </header> </div> </body> </html>
Download link :
Demo Link :
This is all about Facebook like drop down menu design. Hope you like this simple example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
Almost certainly it will be exceptionally valuable for my future tasks. Might want to see some different posts on a similar subject!
ReplyDeletecss beautifier