Klikalne rozwijane menu

pytanie zadane 16 marca 2016 w JavaScript przez n0s1gnal Użytkownik (700 p.)
edycja 16 marca 2016 przez n0s1gnal

Witam, mam problem otóż próbuje napisać skrypt w jsie ,że po naciśnięciu przycisku menu, moje rozwijane menu wysuwa się,a jak drugi raz się naciśnie chowa się. Niestety, wychodzi mi tylko,że po naciśnięciu wysuwa się i jest ciągle.Dodam,że ten przycisk jest w sticky menu z poradnika pana Mirosława :P.Czy, ktoś byłby tak dobry i mi pomógł/napisał ten skrypt ? Tylko to menu zostało mi do zrobienia responsywnej WWW :P

Z góry dzięki za pomoc

/Edycja

Chciałbym jeszcze prosić o pomoc z widocznością, ponieważ jak menu jest na samej górze to to rozwinięte menu jest niewidoczne dopiero jak zjadę troszkę niżej się pojawia

6 odpowiedzi

odpowiedź 17 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 6 lipca 2016 przez n0s1gnal

Najlepsza

Nie wiem czy o to Ci chodzi, ale zrobiłem zwykłe pokazywanie/chowanie menu:

http://codepen.io/anon/pen/xVgXdL

Animacje możesz sobie dopisać.

komentarz 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

Kod nie działa ;/

Niby na tej stronce wszystko działa, ale u mnie już nie zabardzo ;/

+ pada nawigacja zwykła ;/

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

A podmieniłeś/skopiowałeś HTML, CSS i JS? Bo ja modyfikowałem wszystko.

Jakieś błędy w konsoli?

komentarz 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

Uncaught TypeError: Cannot read property 'addEventListener' of null

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

EventListener odwołuje się do elementu #menu w HTMLu. Sprawdź, czy nie popełniłeś jakiejś literówki w kodzie.

Jeśli dalej nie działa, to pokaż kod (może gdzieś coś źle wkleiłeś).

komentarz 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

Właśnie skopiowałem kod, który był na stronie ;/ nawet kilka razy xd

komentarz 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

Okej daje trochę więcej niż podałem wyżej może gdzieś indziej leży problem

	<div class="nav" >
			<a href="#nhome" class="logo"><b>Artur</b></a>
			
<ul id="menu" class="mainMenu">

  <li>MENU
    <ul id="ul" class="list">
    
      <li><a href="#nhome">HOME</a></li>
    
      <li><a href="#nomnie">O MNIE</a></li>
    
      <li><a href="#noferta">OFERTA</a></li>
    
      <li><a href="#nportfolio">PORTFOLIO</a></li>
    
      <li><a href="#nkontakt">KONTAKT</a></li>
      </ul>
    </li>
  </ul>
			<a class="space"></a>
			<a href="#nkontakt" class="option">KONTAKT</a>
			<a href="#nportfolio" class="option">PORTFOLIO</a>
			<a href="#noferta" class="option">OFERTA</a>
			<a href="#nomnie" class="option">O MNIE</a>
			<a href="#nhome" class="option" style="background-color: #EEEEEE;color:#181818;">HOME</a>
	</div>



$(document).ready(function () {
var NavY = $('.nav').offset().top;
var stickyNav = function () {
var ScrollY = $(window).scrollTop();	 
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
	 
stickyNav();
	 
$(window).scroll(function () {
stickyNav();
});
});

$(document).ready(function () { 		$.localScroll(); 	});

/*function display() {     
  var div = document.getElementById('ul');    
  with(div.style) {        
    display = 'block';        
    backgroundColor = '#222222';        
    position = 'absolute';    
  }     
}*/

(function (doc)
{
  var display = doc.getElementById('menu');
  
  console.log(display);
  display.addEventListener('click', function(ev)
  {
    var thatUl = ev.target.querySelector('#ul');
      console.log(thatUl.classList);
    thatUl.classList.toggle('show');
  }, false);
}(document))

.mainMenu {
  text-align: left;
  margin-right: 30px;
}

ul.mainMenu li {
  list-style-type: none;
  height: 35px;
  margin: 0;
  padding: 15px 2% 0 2%;
  text-decoration: none;
  float: right;
  width: 110px;
  /*display: none;*/
  text-align: center;
  color: #757575;*/
}

ul.mainMenu li a {
  display: block;
  width: 110px;
  color: #757575;
  text-decoration: none;
}

ul.mainMenu li ul {
  display: none;
  padding: 5px;
  width: 110px;
  text-align: center;
}

@media only screen and (max-width: 1050px) {
  ul.mainMenu li {
    display: block;
  }
}

@media only screen and (max-width: 750px) {
  ul.mainMenu li {
    display: block;
  }
}

.list.show
{
  display: block;
  background-color: #222222;
  position: absolute;
}

.nav 
{
	font-weight: 400;
	border-bottom: 2px solid #757575;
	background-color: #FFFFFF;
	z-index: 1000;
}

	.space
	{
		float: right;
		display: block;
		color: #757575;
	}

	
.option 
{
	text-decoration: none;
	position:relative;
	float: right;
	display: block;
	text-align: center;
	color: #757575;
}

.logo
{
	text-decoration: none;
	color:#202020;
	font-weight:600;
	float: left;
	display: block;
	text-align: center;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

.nav{height: 50px;width: 100%;margin: 0 auto;font-size: 18px;}
	.option{height:35px;margin: 0px 0px 0 0;padding: 15px 2% 0 2%;}
	.logo{height: 35px;margin: 0px 0px 0 0;padding: 15px 2% 0 2%;}
	.space{width:15px;height:35px;margin: 0px 0px 0 0;padding: 15px  0 0 0;	}

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

Kod działa, tzn menu pojawia się i znika - jeśli to chciałeś osiągnąć, to jest ok.

http://codepen.io/anon/pen/RaKMJP

Czy u siebie w pliku HTML podpiąłeś jQuery (najpierw/wyżej) a potem tą bibliotekę jQuery.localscroll? Najlepiej to umieść je na koniec tagu <body>, a nie w <head>.

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

odpowiedź 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

		HTML	

                    <ul id="menu">
					<li onclick="display()">MENU
					<ul id="ul">
					<li><a href="#nhome">HOME</a></li>
					<li><a href="#nomnie">O MNIE</a></li>
					<li><a href="#noferta">OFERTA</a></li>
					<li><a href="#nportfolio">PORTFOLIO</a></li>
					<li><a href="#nkontakt">KONTAKT</a></li>
					</ul>
					</li>
					</ul>

JavaScript

function display() {

    var div = document.getElementById('ul');
    with (div.style) {
        display='block';
		backgroundColor='#222222';
		position='absolute';
    }
	
}

CSS

#menu {
     text-align: left;
	 margin-right:30px;
}

ul#menu li {
     list-style-type: none;
	height:35px;
	margin: 0;
	padding: 15px 2% 0 2%;
	text-decoration: none;
	float: right;
	width:110px;
	display: none;
	text-align: center;
	color: #757575;
}


ul#menu li a {
     display : block;
     width:110px;
	 color: #757575;
     text-decoration : none;
}

ul#menu li ul {
     display: none;
	 padding:5px;
     width: 110px;
	 text-align:center;
}

@media only screen and (max-width: 1050px)
{
	ul#menu li {display:block;}
}

@media only screen and (max-width: 750px)
{
	ul#menu li {display:block;}
}

odpowiedź 18 marca 2016 przez niezalogowany

odpowiedź 18 marca 2016 przez Schizohatter Nałogowiec (39,600 p.)

odpowiedź 17 marca 2016 przez n0s1gnal Użytkownik (700 p.)

Średnio znam się na JSie ale może można by było zrobić, że if zmienna == true > moja funkcja na chowanie + ustawianie na false || if zmienna == false > moja funkcja na wyswietlanie + ustawienie na true??

komentarz 18 marca 2016 przez niezalogowany

Witaj tu masz artykuł (jeśli Cię to interesuje) Jak zrobić animowane menu w HTML(5) i CSS(3) http://bit.ly/1RreDna może trochę inne niż to Twoje ale takie które się wysuwa po najechaniu myszką płynie i chowa po zjechaniu myszką. Bez użycia JavaScriptu.