Jak stworzyć fajne menu do strony?

pytanie zadane 25 marca 2016 w JavaScript przez giallorossi91 Początkujący (310 p.)

Witam, jestem początkującym webmasterem i nie mogę sobie poradzić z moim menu do strony. Chciałbym aby po kliknięciu jednej z opcji menu(div menu) z lewej strony(div nav) wyświetliły mi się rozne opcje. Jak sie do tego zabrac? Z góry dziekuje za odpowiedź.

3 odpowiedzi

odpowiedź 25 marca 2016 przez Adam Jakś Dyskutant (8,940 p.)
wybrane 25 marca 2016 przez giallorossi91

Najlepsza

1. Dołączamy jQuery (https://developers.google.com/speed/libraries/)

2. Ustawiamy domyślny styl dla diva, który ma się pojawiać(na przykład visibility:hidden;).

3. Dodajemy zdarzenie click do diva, którego kliknięcie powodować ma wyświetlenie zawartości

<script>
 $('#id_diva').click( function() {
  $('#id_zawartości').css('atrybut', 'wlasciwosc'); //na przykład visibility:visible; 
 }); 
</script>

Przynajmniej ja bym tak zrobił. Oczywiście jest też mnóstwo innych możliwości.

komentarz 25 marca 2016 przez giallorossi91 Początkujący (310 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#menu').click( function() {
  $(#nav).css('visibility', 'visible'); 
});
</script>
</head>
<body>

	<div id="menu">
		<div class="option"><a href="#null">Klub</a></div>
         <div class="option"><a href="#null">Kibice</a></div>
	</div>
	
	<div id="nav">
		<div class="item_klub">111</div>
		<div class="item_kibice">222</div>
	</div>
		
	</body>
</html>

chcialbym aby po nacisnieciu Kibice wyświetliło mi 111 a po Kibice 222

komentarz 25 marca 2016 przez Adam Jakś Dyskutant (8,940 p.)

W takim przypadku lepszą opcją była by podmiana zawartości wewnętrznego html diva.

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> //bug wyświetlania kodu na forum powoduje, że ta linijka może wyglądać niepoprawnie. Kod dodajemy taki, jak na stronie google.
</head>
<body>
 
    <div id="menu">
        <div class="option" id="klub"><a href="#null">Klub</a></div>
         <div class="option" id="kibice"><a href="#null">Kibice</a></div>
    </div>
     
    <div id="nav">
        <div class="klub-kibice"></div>
    </div>
     <script>
		$('#klub').click( function() {
		  $('.klub-kibice').html('111'); 
		});

		$('#kibice').click( function() {
		  $('.klub-kibice').html('222'); 
		});
	</script> 
    </body>
</html>

Co ważne, skrypt aby działać poprawnie musi znajdować się poniżej kodu html.

komentarz 25 marca 2016 przez giallorossi91 Początkujący (310 p.)

Dzięki za pomoc;)

odpowiedź 25 marca 2016 przez Mateusz11 Pasjonat (22,910 p.)

1. Gotowca nie dostaniesz

2. Nie sam JS ani jQuery, tylko HTML i JS(opcjonalne)

3. <ul><li>

4. Google

komentarz 25 marca 2016 przez giallorossi91 Początkujący (310 p.)

Nie liczę na gotowca ;) nie wiem jak się zabrać żeby połaczyć html z java żeby to jakos fajnie funkcjonowało. wujek podpowiada o uzyciu onClick ale na javie sie kompletnie nie znam

komentarz 26 marca 2016 przez Mateusz11 Pasjonat (22,910 p.)

JAVA TO NIE JAVASCRIPT!

odpowiedź 25 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod strony:

http://forum.pasja-informatyki.pl/faq#faq1

nie wiem jak się zabrać żeby połaczyć html z java żeby to jakos fajnie funkcjonowało. wujek podpowiada o uzyciu onClick ale na javie sie kompletnie nie znam

Java to nie JavaScript!

http://forum.pasja-informatyki.pl/116866/roznica-pomiedzy-js-a-java?show=116866#q116866

komentarz 25 marca 2016 przez giallorossi91 Początkujący (310 p.)

przykladowo chcialbym zeby po nacisniejciu jednego z wyborow menu np

<div id="menu">
				
				<div class="option">Klub</div>
				<div class="option">Kibice</div>
				
				
</div>

wyświetlały mi się w divie "nav" różne opcje do kazdego z osobna .

Kodu jako tako nie mam jeszcze bo nie wiem jak sie za to zabrac :(

komentarz 25 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Skromnie to opisałeś, zatem zaproponuje skromne rozwiązanie:

CSS

.navigation .hide
{
     display: none;
}

JavaScript

(function (doc)
{
     var menu = doc.getElementById('menu'),
              nav1 = document.getElementsByClassName('navigation')[0],
              nav2 = document.getElementsByClassName('navigation')[1];

     menu.addEventListener('click', function(ev)
     {
          if (ev.target.childNodes.innerHTML === 'Klub')
               nav1.classList.toggle('hide');

          else if (ev.target.childNodes.innerHTML === 'Kibice')
               nav2.classList.toggle('hide');
     }
}(document));