DROPDOWN MODULE TRIGGERED BY BUTTON

Trifecta · ‎Jun 12, 2017

Hi all,

I would like to have a link/button trigger a module to dropdown(revealing more information). Similar to the attached but am wondering the best way to set this up? Any suggestions out there.

you click a icon and the dropdown appearsdropdown

aliciaw · ‎Jul 6, 2017

If you have familiarity with CSS and design, you can do this using CSS:

At it's most basic form, a simple drop down menu can be creating using this format.

<style>
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

You could try taking a look at the source code of the page you're looking at to see if you can learn more about how they got the specific styling, but it looks like that's just a customized version of a drop-down menu.

A great resource for technical deisgn work is W3 Schools, they have some great resources for menus:

https://www.w3schools.com/css/css_dropdowns.asp

skjha · ‎Jun 28, 2020

Like this image, we are going to create a simple and attractive menu. Create a dropdowns HTML menu box that appears when the user moves the mouse over the main menu. So first open your code editor like sublime, notepad++, visual studio code, etc.

Create new file in your code editor and save it with the name index.html and add the code given below.

Create new file in your code editor and save it with the name index.html and add the code given below.index.html file to create dropdowns HTML menu

<!DOCTYPE html>
<html>
<head>
	<title>Multi Level Dropdowns HTML menu</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div  class="navbar">
	<ul>
		<li class="active"><a href="#"><i class="fa fa-home"></i> Home</a></li>
		<li><a href="#"><i class="fa fa-user"></i> About</a>
			<div class="dropdown">
				<ul>
					<li><a href="#">Mission</a></li>
					<li><a href="#">Vision</a></li>
					<li><a href="#">Team</a></li>
				</ul>
			</div>
		</li>
		<li><a href="#"><i class="fa fa-clone"></i> Services</a>
			<div class="dropdown">
				<ul>
					<li><a href="#">Web Design</a></li>
					<li class="dropdown-child"><a href="#">Web Development</a><i class="fa fa-angle-right"></i>
						<div class="sub-dropdown">
						<ul>
							<li><a href="#">WordPress Website</a></li>
							<li><a href="#">Ecommerce Website</a></li>
							<li><a href="#">Custom Website</a></li>
						</ul>	
						</div>

					</li>
					<li><a href="#">IT Support</a></li>
				</ul>
			</div>
		</li>
		<li><a href="#"><i class="fa fa-users"></i> Testimonials</a></li>
		<li><a href="#"><i class="fa fa-angellist"></i> Portfolio</a></li>
		<li><a href="#"><i class="fa fa-mobile"></i> Contact</a></li>
	</ul>
</div>
</body>
</html>

Here in this code, I used two link tags for the reference of style and font icons inside header tag after the title.

<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

So next you have to create style.css file. and make sure your reference this file to HTML. and also used CDN for font awesome icons. For getting this CDN you can visit this link bootstrap-font-awesome and just copy the given Font Awesome CSS link given and paste it inside heade...

after that add the given css code to your style.css file which is already created.style.css file to create dropdowns HTML menu

*{
	margin: 0;
	padding:0;	
}

body{
	background:url('img/bg.jpg');
	background-size:cover;
	box-sizing: border-box;
	font-family: sans-serif;

}
.navbar{
	background: #58D68D;
	text-align: center;
}
.navbar ul{
	display:inline-flex;
	list-style: none;
	color: #ECF0F1;
}
.navbar ul li{
	width: 120px;
	margin:10px;
	padding: 10px;
}
.navbar ul li a{
	text-decoration: none;
	color: #ECF0F1;
}
.active, .navbar ul li a:hover {
    color:#edcfd1;
    text-shadow: 1px 1px 2px #17202A;
}
.dropdown{
	display: none;
}

.navbar ul li:hover .dropdown{
	display: block;
	position: absolute;
	background-color:#58D68D;
	margin-top: 10px;
	margin-left: 10px; 
}

.navbar ul li:hover .dropdown ul{
	display: block;
}
.navbar ul li:hover .dropdown ul li{
	width: 150px;
	border-bottom: solid 1px #ECF0F1;
	margin: 2px;
	background: transparent;
	text-align: left;
	padding: 10px;
	margin-left: 15px;
	margin-right: 15px;
}
.navbar ul li:hover .dropdown ul li:last-child{
	border-bottom: none;
}
.fa-angle-right{
	float: right;
}

.sub-dropdown{
	display: none;
}
.dropdown-child:hover .sub-dropdown{
	position: absolute;
	display: block;
	margin-top: -30px;
	margin-left: 150px;
	background: #58D68D;
}

Just save all files and open them in browse. Then you can see the stunning multilevel dropdowns HTML menu.

want to learn more about dropdowns HTML menu using CSS. this is the easy way discussed here.

CMS Development