Jak zrobić żeby po wybraniu z MENU zakładki LINK1 lub LINK2 lub LINK3 podświetliła mi się na szaro zakładka MENU tak jak zakładka poniżej. Oraz żeby po kliknieciu LINK1,2 lub 3 znikało pole wyboru LINK1 LIN2 LINK3
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
background-image: url("bg111.jpg");
background-color: #cccccc;
height: 600px;
background-position: center;
background-repeat: repeat;
background-size: cover;
position: relative;
}
.tab {
width: 100%;
overflow: hidden;
// border: 1px solid #ccc;
// background-color: #f1f1f1;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.7);
position: fixed;
//height: 50px;
}
.tab button {
// background-color: inherit;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.0);
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 10.1px;
transition: 0.3s;
font-size: 17px;
color: white;
}
.tab button:hover {
background-color: #acc;
color: black;
}
.tab button.active {
background-color: #ccc;
color: black;
}
.tab a.active {
background-color: #ccc;
color: black;
}
.tabcontent {
margin: auto;
display: none;
padding: 6px 12px 9px;
border: 1px solid #000;
border-top: none;
text-align: justify;
color: white;
// background-color: #f1f1dd;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.2);
// height: 10.8em;
//position: absolute;
//bottom: 0;
}
iframe {
display: none;
margin-top: -9000px;
}
#prvHostingStats {
display: none;
margin-top: -9000px;
}
#prvHostingStatsBottom {
display: none;
margin-top: -9000px;
}
#right_box {
display: none;
margin-top: -9000px;
}
.button_close {
display: none;
margin-top: -9000px;
}
#prv_billboard_closer {
display: none;
margin-top: -9000px;
}
#prv_main_link {
display: none;
margin-top: -9000px;
}
#privacySettingsPopup {
display: none;
margin-top: -9000px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: fixed;
margin-top: 3.0em;
}
.dropdown-content a {
float: none;
color: black;
padding: 9px 16px;
text-decoration: none;
display: block;
text-align: left;
//z-index: 9999;
}
a:hover, .dropdown:hover {
background-color: #acc;
color: black;
}
.dropdown-content a:hover {
background-color: #acc;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="Mneu(event, 'Start')" id="defaultOpen">Home</button>
<button class="tablinks" onclick="Mneu(event, 'Mapy')">Mapy</button>
<button class="tablinks" onclick="Mneu(event, 'Travels')">Travels</button>
<button class="tablinks" onclick="Mneu(event, 'Kontakt')">Kontakt</button>
<button class="tablinks" onclick="Mneu(event, 'Zaloguj')">Zaloguj</button>
<div class="dropdown">
<button class="dropbtn11111">Menu
<i class="fa11111 fa-caret-down11111"></i>
</button>
<div class="dropdown-content">
<a href="#" class="tablinks" onclick="Mneu(event, 'Link1')">Link 1</a>
<a href="#" class="tablinks" onclick="Mneu(event, 'Link2')">Link 2</a>
<a href="#" class="tablinks" onclick="Mneu(event, 'Link3')">Link 3</a>
</div>
</div>
</div>
<div id="Start" class="tabcontent">
<br><br><h3>Start</h3>
<p>Start Start Start Start Start Start Start Start </p>
</div>
<div id="Mapy" class="tabcontent">
<br><br><h3>Mapy</h3>
<p>Mapy Mapy Mapy Mapy Mapy Mapy Mapy Mapy Mapy</p>
</div>
<div id="Travels" class="tabcontent">
<br><br><h3>Travels</h3>
<p>Travels Travels Travels Travels Travels Travels</p>
</div>
<div id="Kontakt" class="tabcontent">
<br><br><h3>Kontakt</h3>
<p>Kontakt Kontakt Kontakt</p>
</div>
<div id="Zaloguj" class="tabcontent">
<br><br><h3>Zaloguj</h3>
<p>Zaloguj Zaloguj Zaloguj Zaloguj Zaloguj Zaloguj</p>
</div>
<div id="Link1" class="tabcontent">
<br><br><h3>Link1</h3>
<p>Link1 Link1 Link1 Link1 Link1 Link1 Link1 Link1</p>
</div>
<div id="Link2" class="tabcontent">
<br><br><h3>Link2</h3>
<p>Link2 Link2 Link2 Link2 Link2 Link2 Link2 Link2</p>
</div>
<div id="Link3" class="tabcontent">
<br><br><h3>Link3</h3>
<p>Link3 Link3 Link3 Link3 Link3 Link3 Link3 Link3 Link3</p>
</div>
<script>
function Mneu(evt, zakladka) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(zakladka).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
EDYTOR KODU [KLIKNIJ]To nie działa
<script>
function Mneu()
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Ten post edytował david8213 15.04.2019, 01:50:22
[CSS]Menu rozwijane
david8213 [CSS]Menu rozwijane 14.04.2019, 22:56:28 
