Forum PHP.pl > [CSS]Menu rozwijane

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

EDYTOR KODU [KLIKNIJ]

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

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.

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.

[KOD ŻRÓDŁOWY]

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

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".

david8213

18.04.2019, 11:39:50

Coś mi nie wychodzi. Możesz zerknąć: [KLIKNIJ ver2.]

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:
Diff1

Wersja Jquery i java script
js/Jquery

Sprawdź, testuj i modyfikuj

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

[KOD KLIKNIJ]

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.

david8213

21.04.2019, 18:02:23

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

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ć .

david8213

29.04.2019, 19:29:36

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.