Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Menu rozwijane
david8213
post 14.04.2019, 22:56:28
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6.  
  7. body {
  8. font-family: Arial;
  9. margin: 0;
  10. background-image: url("bg111.jpg");
  11. background-color: #cccccc;
  12. height: 600px;
  13.  
  14.  
  15. background-position: center;
  16. background-repeat: repeat;
  17.  
  18. background-size: cover;
  19. position: relative;
  20. }
  21.  
  22. .tab {
  23. width: 100%;
  24. overflow: hidden;
  25. // border: 1px solid #ccc;
  26. // background-color: #f1f1f1;
  27. background-color: rgb(0,0,0);
  28. background-color: rgba(0,0,0, 0.7);
  29. position: fixed;
  30. //height: 50px;
  31.  
  32. }
  33.  
  34. .tab button {
  35. // background-color: inherit;
  36.  
  37.  
  38. background-color: rgb(0,0,0);
  39. background-color: rgba(0,0,0, 0.0);
  40. float: left;
  41. border: none;
  42. outline: none;
  43. cursor: pointer;
  44. padding: 14px 10.1px;
  45. transition: 0.3s;
  46. font-size: 17px;
  47. color: white;
  48. }
  49.  
  50. .tab button:hover {
  51.  
  52. background-color: #acc;
  53. color: black;
  54. }
  55.  
  56. .tab button.active {
  57. background-color: #ccc;
  58. color: black;
  59. }
  60.  
  61. .tab a.active {
  62. background-color: #ccc;
  63. color: black;
  64. }
  65.  
  66. .tabcontent {
  67. margin: auto;
  68. display: none;
  69. padding: 6px 12px 9px;
  70. border: 1px solid #000;
  71. border-top: none;
  72. text-align: justify;
  73. color: white;
  74. // background-color: #f1f1dd;
  75.  
  76. background-color: rgb(0,0,0);
  77. background-color: rgba(0,0,0, 0.2);
  78. // height: 10.8em;
  79. //position: absolute;
  80. //bottom: 0;
  81. }
  82.  
  83.  
  84.  
  85.  
  86. iframe {
  87. display: none;
  88. margin-top: -9000px;
  89. }
  90.  
  91. #prvHostingStats {
  92. display: none;
  93. margin-top: -9000px;
  94. }
  95.  
  96.  
  97. #prvHostingStatsBottom {
  98. display: none;
  99. margin-top: -9000px;
  100. }
  101.  
  102. #right_box {
  103. display: none;
  104. margin-top: -9000px;
  105. }
  106.  
  107. .button_close {
  108. display: none;
  109. margin-top: -9000px;
  110. }
  111.  
  112. #prv_billboard_closer {
  113. display: none;
  114. margin-top: -9000px;
  115. }
  116.  
  117. #prv_main_link {
  118. display: none;
  119. margin-top: -9000px;
  120. }
  121.  
  122. #privacySettingsPopup {
  123. display: none;
  124. margin-top: -9000px;
  125. }
  126.  
  127.  
  128.  
  129.  
  130. .dropdown {
  131. float: left;
  132. overflow: hidden;
  133. }
  134.  
  135.  
  136. .dropdown-content {
  137. display: none;
  138. position: absolute;
  139. background-color: #f9f9f9;
  140. min-width: 160px;
  141. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  142. position: fixed;
  143. margin-top: 3.0em;
  144. }
  145.  
  146. .dropdown-content a {
  147. float: none;
  148. color: black;
  149. padding: 9px 16px;
  150. text-decoration: none;
  151. display: block;
  152. text-align: left;
  153. //z-index: 9999;
  154.  
  155.  
  156. }
  157.  
  158. a:hover, .dropdown:hover {
  159. background-color: #acc;
  160. color: black;
  161. }
  162.  
  163. .dropdown-content a:hover {
  164. background-color: #acc;
  165. color: black;
  166. }
  167.  
  168. .dropdown:hover .dropdown-content {
  169. display: block;
  170. }
  171.  
  172.  
  173.  
  174. </style>
  175. </head>
  176. <body>
  177.  
  178.  
  179. <div class="tab">
  180. <button class="tablinks" onclick="Mneu(event, 'Start')" id="defaultOpen">Home</button>
  181. <button class="tablinks" onclick="Mneu(event, 'Mapy')">Mapy</button>
  182. <button class="tablinks" onclick="Mneu(event, 'Travels')">Travels</button>
  183. <button class="tablinks" onclick="Mneu(event, 'Kontakt')">Kontakt</button>
  184.  
  185. <button class="tablinks" onclick="Mneu(event, 'Zaloguj')">Zaloguj</button>
  186.  
  187. <div class="dropdown">
  188. <button class="dropbtn11111">Menu
  189. <i class="fa11111 fa-caret-down11111"></i>
  190. </button>
  191. <div class="dropdown-content">
  192. <a href="#" class="tablinks" onclick="Mneu(event, 'Link1')">Link 1</a>
  193. <a href="#" class="tablinks" onclick="Mneu(event, 'Link2')">Link 2</a>
  194. <a href="#" class="tablinks" onclick="Mneu(event, 'Link3')">Link 3</a>
  195. </div>
  196. </div>
  197. </div>
  198.  
  199.  
  200.  
  201. <div id="Start" class="tabcontent">
  202. <br><br><h3>Start</h3>
  203. <p>Start Start Start Start Start Start Start Start </p>
  204. </div>
  205.  
  206. <div id="Mapy" class="tabcontent">
  207. <br><br><h3>Mapy</h3>
  208. <p>Mapy Mapy Mapy Mapy Mapy Mapy Mapy Mapy Mapy</p>
  209.  
  210.  
  211. </div>
  212.  
  213. <div id="Travels" class="tabcontent">
  214. <br><br><h3>Travels</h3>
  215. <p>Travels Travels Travels Travels Travels Travels</p>
  216.  
  217. </div>
  218.  
  219. <div id="Kontakt" class="tabcontent">
  220. <br><br><h3>Kontakt</h3>
  221. <p>Kontakt Kontakt Kontakt</p>
  222.  
  223. </div>
  224.  
  225. <div id="Zaloguj" class="tabcontent">
  226. <br><br><h3>Zaloguj</h3>
  227. <p>Zaloguj Zaloguj Zaloguj Zaloguj Zaloguj Zaloguj</p>
  228.  
  229. </div>
  230.  
  231. <div id="Link1" class="tabcontent">
  232. <br><br><h3>Link1</h3>
  233. <p>Link1 Link1 Link1 Link1 Link1 Link1 Link1 Link1</p>
  234.  
  235. </div>
  236.  
  237. <div id="Link2" class="tabcontent">
  238. <br><br><h3>Link2</h3>
  239. <p>Link2 Link2 Link2 Link2 Link2 Link2 Link2 Link2</p>
  240.  
  241. </div>
  242.  
  243. <div id="Link3" class="tabcontent">
  244. <br><br><h3>Link3</h3>
  245. <p>Link3 Link3 Link3 Link3 Link3 Link3 Link3 Link3 Link3</p>
  246.  
  247. </div>
  248.  
  249. <script>
  250. function Mneu(evt, zakladka) {
  251. var i, tabcontent, tablinks;
  252. tabcontent = document.getElementsByClassName("tabcontent");
  253. for (i = 0; i < tabcontent.length; i++) {
  254. tabcontent[i].style.display = "none";
  255. }
  256. tablinks = document.getElementsByClassName("tablinks");
  257. for (i = 0; i < tablinks.length; i++) {
  258. tablinks[i].className = tablinks[i].className.replace(" active", "");
  259. }
  260. document.getElementById(zakladka).style.display = "block";
  261. evt.currentTarget.className += " active";
  262. }
  263.  
  264. document.getElementById("defaultOpen").click();
  265. </script>
  266.  
  267. </body>
  268. </html>


EDYTOR KODU [KLIKNIJ]

To nie działa

  1. <script>
  2.  
  3. function Mneu()
  4.  
  5. window.onclick = function(event) {
  6. if (!event.target.matches('.dropbtn')) {
  7. var dropdowns = document.getElementsByClassName("dropdown-content");
  8. var i;
  9. for (i = 0; i < dropdowns.length; i++) {
  10. var openDropdown = dropdowns[i];
  11. if (openDropdown.classList.contains('show')) {
  12. openDropdown.classList.remove('show');
  13. }
  14. }
  15. }
  16. }
  17. </script>


Ten post edytował david8213 15.04.2019, 01:50:22
Go to the top of the page
+Quote Post
emillo91
post 15.04.2019, 22:05:20
Post #2





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
david8213
post 17.04.2019, 07:59:39
Post #3





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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 smile.gif

Ten post edytował david8213 17.04.2019, 08:21:46
Go to the top of the page
+Quote Post
emillo91
post 17.04.2019, 22:04:24
Post #4





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


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".
Go to the top of the page
+Quote Post
david8213
post 18.04.2019, 11:39:50
Post #5





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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

Ten post edytował david8213 18.04.2019, 12:29:09
Go to the top of the page
+Quote Post
emillo91
post 19.04.2019, 20:57:22
Post #6





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


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 smile.gif

Ten post edytował emillo91 19.04.2019, 20:58:16
Go to the top of the page
+Quote Post
david8213
post 20.04.2019, 14:13:35
Post #7





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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]

Ten post edytował david8213 20.04.2019, 14:15:22
Go to the top of the page
+Quote Post
emillo91
post 20.04.2019, 17:13:11
Post #8





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
david8213
post 21.04.2019, 18:02:23
Post #9





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


coś mi to nie wychodzi. jak zobie jedno to nie działa drugie albo odwrotnie
Go to the top of the page
+Quote Post
emillo91
post 21.04.2019, 21:32:47
Post #10





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

Ostrzeżenie: (0%)
-----


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ć .
Go to the top of the page
+Quote Post
david8213
post 29.04.2019, 19:29:36
Post #11





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


no chyba nie do końca. bo nadal nie działa
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 16:17