Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS]Menu rozwijane

Napisany przez: david8213 14.04.2019, 22:56:28

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

[XML] pobierz, plaintext 
<!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> 
[XML] pobierz, plaintext

https://www.w3schools.com/code/tryit.asp?filename=G341A1TCQJNK

To nie działa

[XML] pobierz, plaintext 
<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>
[XML] pobierz, plaintext

Napisany przez: emillo91 15.04.2019, 22:05:20

W java script masz takie coś jak .addEventListener a eventy jakie mogą Ciebie zainteresować to click, mouseover, mouseout oraz atrybut parentNode, który pobierze rodzica klikniętego linku.

Napisany przez: david8213 17.04.2019, 07:59:39

Dzięki za podpowiedz. Znikanie zrobiłem ale mam problem z podświetlaniem.
Czy mógłbyś mi pomóc?

Potrzebuję zrobić tak że jak wybiorę którąś pozycję z MENU2 to podświetli mi się MENU2 oraz poniżej wybrana pozycja.
Poniżej wybrane pozycje już się podświetlają. Trzeba tylko dorobić podświetlanie się MENU2 po kliknięciu na którąś z poniższych pozycji.

https://www.w3schools.com/code/tryit.asp?filename=G36NPFSZRLUC

Elementy (dzieci) już mi się podświetlają. Potrzebuję tylko jeszcze zrobić aby podświetlił się główny element czyli MENU2 (rodzic)

Ja bardziej robię w CSS niż w JS.Więc proszę o proste wyjaśnienie

Napisany przez: emillo91 17.04.2019, 22:04:24

Po pierwsze musisz zmienić nazwę funkcji w odnośnikach z menu rozwijanego, gdyż za każdym kliknięciem przypisujesz klasę active dla klikniętego elementu, czyli w tym przypadku linków. Funkcja "Menu", którą utworzyłeś najpierw usuwa klasę "active" ze wszystkich elementów, które ją posiadają a następnie dodaje ją do elementu klikniętego. Aby osiągnąć zamierzony efekt musisz dodać usuwanie klasy active ze wszystkich elementów, po wywołaniu funkcji "myFunction" i dodać klasę do klikniętego elementu, tak jak to robisz w funkcji "Menu".

Napisany przez: david8213 18.04.2019, 11:39:50

Coś mi nie wychodzi. Możesz zerknąć: https://www.w3schools.com/code/tryit.asp?filename=G381HBGPPS6K

Napisany przez: emillo91 19.04.2019, 20:57:22

Byłeś blisko ale niestety musisz przećwiczyć poruszanie się po drzewie DOM bo bez tego będzie ciężko. Niestety java script ma mniejsze pole popisu bo aby wykonać operację na danym elemencie musisz pobierać informacje o nim przy pomocy id albo w pętli. Lepsze zastosowanie ma Jquery, które pozwala masowo wykonywać operację na wielu elementach. Poniżej masz link z porównaniem tego co zrobiłeś, z tym co ja dodałem. Drugi link to moja wersja java script oraz wersja w jquery.

Wersja java script:
https://www.diffnow.com/report/81p7a

Wersja Jquery i java script
https://www.diffnow.com/report/velph

Sprawdź, testuj i modyfikuj

Napisany przez: david8213 20.04.2019, 14:13:35

Dzięki bardzo:)

Dołożyłem drugie submenu ale przełączanie między nimi powoduje że nie znika z jednego formatka... Co zapomniłem dołożyc, w którym miejscu

https://www.w3schools.com/code/tryit.asp?filename=G30EPHO2MMTA

Napisany przez: emillo91 20.04.2019, 17:13:11

Bo po kliknięciu w przycisk "rozwijający" sub menu musisz wyszukać i ukryć już inne, rozwinięte sub menu. W tych funkcjach tego nie ma więc musisz sobie dodać takie sprawdzenie. Coś podobnego robisz po kliknięciu w jeden z linków sub menu. Proponowałbym pomyśleć nad jakąś wspólną funkcją, którą dodawałbyś do każdego przycisku i w niej mógłbyś wykonywać takie operacje jak na przykład ukrywanie sub menu.

Napisany przez: david8213 21.04.2019, 18:02:23

coś mi to nie wychodzi. jak zobie jedno to nie działa drugie albo odwrotnie

Napisany przez: emillo91 21.04.2019, 21:32:47

Musisz dodać sprawdzanie w tych dwóch funkcjach, które są odpowiedzialne za rozwijanie menu. Takie sprawdzanie już jest w funkcji menu2 tylko musisz je przekleić .

Napisany przez: david8213 29.04.2019, 19:29:36

no chyba nie do końca. bo nadal nie działa