We Keep Coding

How to active the menu button when it display the page?

Can anyone help me to Insert the menu button in active-based?
And I need it suitable for my Blogger menu... please... I really need help...
As the image shows above, it actually looks like this.
I have tried many active based by using JavaScript, CSS, but none of it works.
Below is my CSS code, is there any problem?
.dropbtn {
background-color: grey;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: blue;}
<div class="dropdown active">
Home</button>
</div>
<div class="dropdown">
About</button>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
Posts</button>
</div>
<div class="dropdown">
Template</button>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>

You should not nest a button inside an a tag, that is not valid HTML. You can use styles to get a similar look.
HTML
<nav>
<div class="dropdown active">
<a class="dropbtn" href="#">Home</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">About</a>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Posts</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Template</a>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>
</nav>
CSS (for the active class)
/* styles the direct child link of .active */
.active > a {
background-color: red;
}

Javascript collapse DIV on click

I'm learning javascript, but I'm encountering some problems I need help with. I have a notification box with different groups. I'm wanting it to be possible for only one notification group to be open at a time.
With CSS, i'm having all notification groups collapsed by default. Whenever someone clicks on new group tab, the existing group should collapse and the new tab should open.
CodePin: https://codepen.io/dansbyt/pen/xxgayPa
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
}
else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
})
.notification-list-item{
padding: 5px 25px 15px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even){background-color: #E3E3E3}
.notification-tab {
border-bottom: 1px solid #e3e3e3;
display: inline-block;
width: 100%}
.visible {display: block !important}
.profiledrop {
width: 300px;
height: auto;
display: none;
max-height: 400px;
overflow-y: auto;
padding: 0;
margin: 0;
background: #eee;
margin-top: 3px;
margin-right: -15px;
border-top: 4px solid blue;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
min-height: 65px;}
.notification-list{
padding: 0;
overflow-y: auto;
height: 0px;
max-height: 200px;
transition: height .15s;}
.active .notification-list {height: 200px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
a {color: #5B7042; text-decoration: none; font-weight: bold}
.label{
float: right;
margin-top: 20px;
margin-right: 10px;
color: $primary-color;
border: 1px solid orange;
padding: 0px 7px;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.item-footer .date{float: right}
.expanded {background-color: purple}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Hi</a>
<ul class="profiledrop visible">
<li class="notification-group">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Complete an assignment you need to do before the deadline on Monday.</p>
<div class="item-footer">
<span class="from">project3</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Alivia was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5s ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Marshall was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">30m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Trae was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">1d ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Kennedy was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5d ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group active">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">History homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Math homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Science homework added by Brandi.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
</ul>
</div>

Change dropbtn text with value of clicked option in the dropdown-content

I need help figuring out how to change the button text with whatever dropdown menu item is clicked. I was trying to do using onclick, but I couldn't figure out how to make it work. My professor suggested using the class attribute, jquery click() and the attr() method. Any suggestions or hints you can give would be helpful. I am open to using a different kind of drop down menu, but it does have to be a hover drop down menu that scrolls instead of showing the full list.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<script>
</script>
<body>
<table style="width:25%">
<tr>
<td valign= "top">
<h3 id= "total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn">Jan</button>
<div class="dropdown-content">
<a class="option" href="#" onclick="selected=Jan">Jan</a>
<a class="option" href="#" onclick="selected=Feb">Feb</a>
<a class="option" href="#" onclick="selected=Mar">Mar</a>
<a class="option" href="#" onclick="selected=Apr">Apr</a>
<a class="option" href="#" onclick="selected=May">May</a>
<a class="option" href="#" onclick="selected=Jun">Jun</a>
<a class="option" href="#" onclick="selected=Jul">Jul</a>
<a class="option" href="#" onclick="selected=Aug">Aug</a>
<a class="option" href="#" onclick="selected=Sep">Sep</a>
<a class="option" href="#" onclick="selected=Oct">Oct</a>
<a class="option" href="#" onclick="selected=Nov">Nov</a>
<a class="option" href="#" onclick="selected=Dec">Dec</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

this
Inside the myFunction you can change the textContent of the button by the clicked elements textContent using this.
document.querySelector('.dropbtn').textContent = this.textContent;
event listeners
Instead of using the inline scripting I would recommend using eventListeners for your buttons
.addEventListener('click', myFunction);
// add an event listener to all of your <a> elements
document.querySelectorAll('.option').forEach((x) => {
x.addEventListener('click', myFunction);
});
function myFunction() {
document.getElementById('month').textContent = this.textContent;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<script>
</script>
<body>
<table style="width:25%">
<tr>
<td valign="top">
<h3 id="total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn">Jan</button>
<div class="dropdown-content">
<a class="option" href="#">Jan</a>
<a class="option" href="#">Feb</a>
<a class="option" href="#">Mar</a>
<a class="option" href="#">Apr</a>
<a class="option" href="#">May</a>
<a class="option" href="#">Jun</a>
<a class="option" href="#">Jul</a>
<a class="option" href="#">Aug</a>
<a class="option" href="#">Sep</a>
<a class="option" href="#">Oct</a>
<a class="option" href="#">Nov</a>
<a class="option" href="#">Dec</a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

use fixed :
Create function and call function in the a harf and send values
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.force-scroll {
overflow-y: scroll;
height: 200px;
}
</style>
</head>
<body>
<table style="width:25%">
<tr>
<td valign="top">
<h3 id="total">Orders for</h3>
</td>
<td>
<div class="dropdown force-scroll">
<button id="month" class="dropbtn" >Jan</button>
<div class="dropdown-content" id="main">
<a href="#" onclick="get_onclick(0)" >Jan</a>
<a href="#" onclick="get_onclick(1)" >Feb</a>
<a href="#" onclick="get_onclick(2)" >Mar</a>
<a href="#" onclick="get_onclick(3)" >Apr</a>
<a href="#" onclick="get_onclick(4)" >May</a>
<a href="#" onclick="get_onclick(5)" >Jun</a>
<a href="#" onclick="get_onclick(6)" >Jul</a>
<a href="#" onclick="get_onclick(7)" >Aug</a>
<a href="#" onclick="get_onclick(8)" >Sep</a>
<a href="#" onclick="get_onclick(9)" >Oct</a>
<a href="#" onclick="get_onclick(10)" >Nov</a>
<a href="#" onclick="get_onclick(11)" >Dec</a>
</div>
</div>
</td>
</tr>
</table>
<script>
let mydiv=document.getElementById('main');
get_onclick = (number) =>
{
document.getElementById("month").innerHTML =mydiv.children[number].textContent;
}
</script>
</body>
</html>

alter .dropdown-content formatting to fit specific buttons using id in css

I have a splash page with 3 dropdown buttons that I'm editing. Each of them is based on a specific color that represents a geological time period. I want the .dropdown-content formatting for each button to be different & to reflect this base color. When I try to use the id tag to alter each button's '.dropdown-content' attributes, it breaks the code. Here is the 'broken' css:
.dropbtn {
color: black;
padding: 16px;
font-size: 15px;
cursor: pointer;
}
#left.dropbtn {
border-color: #f57a5f;
background-color: rgba(245, 122, 95, 0.2);
}
#middle.dropbtn {
border-color: #9DC2A6;
background-color: rgba(157, 194, 166, 0.2);
}
#right.dropbtn {
border-color: #47C7EA;
background-color: rgba(71, 199, 234, 0.2);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
#left.dropdown-content {
display: none;
position: absolute;
background-color: #f57a5f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#middle.dropdown-content {
display: none;
position: absolute;
background-color: #9DC2A6;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#right.dropdown-content {
display: none;
position: absolute;
background-color: #47C7EA;
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;
font-size: 15px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(157, 194, 166, 0.2)}
/* 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 #left.dropbtn {
background-color: #f57a5f;
}
.dropdown:hover #middle.dropbtn {
background-color: #9DC2A6;
}
.dropdown:hover #right.dropbtn {
background-color: #47C7EA;
}
<div class="jumbotron">
<div class="container">
<div class="wrapper">
<h2><t id="the">The</t> Wowsers</h2>
<p>Revealing stuff & knowledge & things</p>
<div class="row">
<div class="dropdown">
<button id="left" class="splashMainButton btn btn-info dropbtn">Learn</button>
<div class="dropdown-content">
Teach & Learn
<a onclick="">News & Info</a>
</div>
</div>
<div class="dropdown">
<button id="middle" class="splashMainButton btn btn-info dropbtn">Data</button>
<div class="dropdown-content">
Enter
Visualize
Retrieve
Browse
</div>
</div>
<div class="dropdown">
<button id="right" class="splashMainButton btn btn-info dropbtn">Join & Support</button>
<div class="dropdown-content">
Join!
<a onclick="">Patreon!</a>
<a onclick="">Merch</a>
</div>
</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>
Do I have the nomenclature wrong in css? Do I need to add an id to the for each .dropdown-content?

You need a space after each ID, e.g.:
#middle .dropdown-content
Because .dropdown-content is a child of #middle.
Without a space, it means the element with both an ID of middle and a class of dropdown-content.
Also, ID's are (or at least should be) unique, so you don't need to do this:
#left.dropbtn
You can target the element with just the #left selector.

Doing a dropdown button in css

I'm trying to incorporate a dropdown button in my website but I don't know why the content of button is not showing correctly:
<body>
<div class="topnav">
<a id="inicio" href="index.php">Inicio</a>
<a id="contacto" href="login.php" >Login</a>
<a id="contacto" href="registro.php">Registro</a>
<a id="contacto" href="#" >Contacto</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Iniciar sesion
</div>
</div>
<input type="text" placeholder="Search..">
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
You can try the code here: https://jsfiddle.net/pgn6yw5f/

Set the background color of the dropdown-content a in your CSS-file. below is an example
dropdown-content a {
/* Your other styling */
background-color: inherit;
}
that solves the display issue.

After some search
Here is an example of a drop-down menu using CSS only to improve performance
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
for more examples on CSS only dropdown menus look HERE