• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Anchor linki w Hamburger Menu - klikasz i nic się nie dzieje

+1 głos
47 wizyt
pytanie zadane 22 lipca w HTML i CSS przez plaster Nowicjusz (130 p.)

Witajcie.
Jestem początkujący w temacie html i css. Mam szablon w którym wszystko działa jak należy na kompie, tabie itd. natomiast w wersji mobilnej jest problem z linkami w hamburger menu. Samo menu jest widoczne i rozwijalne ale po kliknięciu na link z menu nic się nie dzieje. Czy ktoś może zerknąć na kod i spróbować wskazać błąd?

<header>
		<div class="container">
			<div class="logo pull-left animated wow fadeInLeft">
				<img src="img/logo.png" alt="" title="">
			</div>

			
			<nav class="pull-left">
				<ul class="list-unstyled">
					<li class="animated wow fadeInLeft" data-wow-delay="0s"><a href="#about">About</a></li>
					<li class="animated wow fadeInLeft" data-wow-delay=".1s"><a href="#app_features">Features</a></li>
					<li class="animated wow fadeInLeft" data-wow-delay=".2s"><a href="#testimonials">Testimonials</a></li>
				</ul>
			</nav>

			<div class="social pull-right">
				<ul class="list-unstyled">
					<li class="animated wow fadeInRight" data-wow-delay=".2s"><a href="#"><img src="img/facebook.png" alt="" title=""></a></li>
					<li class="animated wow fadeInRight" data-wow-delay=".1s"><a href="#"><img src="img/twitter.png" alt="" title=""></a></li>
					<li class="animated wow fadeInRight" data-wow-delay="0s"><a href="#"><img src="img/google.png" alt="" title=""></a></li>
				</ul>
			</div>

			<span class="burger_icon">menu</span>
		</div>
	</header>
header .burger_icon{
	display: none;
	float: right;
	background: #ffffff;
	padding: 5px 10px;
	text-transform: uppercase;

	color: #43b779;
	font-family: "open_regular", Helvetica, Arial, sans-serif;
	font-size: 14px;

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	margin: 45px 10px 0 0;
}

header .burger_icon:hover{
	cursor: pointer;
}

header .burger_icon.active{
	background: #359663;
	color: #ffffff;
}

 

komentarz 23 lipca przez pablop76 VIP (115,380 p.)
Z tego kodu nic się nie da wywnioskować.
komentarz 23 lipca przez plaster Nowicjusz (130 p.)
przeniesione 23 lipca przez Comandeer
pełna wersja tego szablonu jest dostępna pod tym adresem: https://github.com/pixelhint/Capture

jest prosty i w miarę fajny i do nauki idealny ale pierwsze co zauważyłem to właśnie ten błąd i chciałbym w ramach uczenia się dojść z pomocą forum co tu jest nie tak...

1 odpowiedź

+1 głos
odpowiedź 23 lipca przez pablop76 VIP (115,380 p.)

Jest błąd w implementacji scrollTo, ale nie szukałem szczegółów. Sprawdź dokumentację, albo zmień ten fragment na pure javascript.

	//Navigation menu scrollTo
	$('header nav ul li a').click(function (event) {
		event.preventDefault();
		var section = $(this).attr('href');
		var section_pos = $(section).position();
		if (section_pos) {
			console.log(section_pos);
			// $(window).scrollTo({ top: section_pos.top, left: '0px' }, 1000);
			window.scrollTo({
				top: section_pos.top,
				left: 0,
				behavior: 'smooth'
			});
		}

	});

Jeszcze rzuca się w oczy błąd niewłaściwego użycia parametru event

	$('.app_link').click(function(e){
		event.preventDefault();
		$(window).scrollTo({top:$("#hero").position().top, left:'0px'}, 1000);		
	});

 

komentarz 23 lipca przez plaster Nowicjusz (130 p.)

ok zmieniłem kod ScrollTo i "goły" szablon działa na dekstopie
 

//Navigation menu scrollTo
	$('header nav ul li a').click(function(event){

		var section = $(this).attr('href');

		if (section[0] !== "#") return; // drop the link if the first char is not #

		var section_pos = $(section).position();

		if(section_pos){
			$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
		}

		event.preventDefault();

	});

natomiast nadal nic się nie dzieje w wersji (mobilnej) landing page - anchory nie działają, kurcze już mi bokiem to wychodzi.... niby taki bzdet a nie umiem sobie z tym poradzić...

komentarz 23 lipca przez pablop76 VIP (115,380 p.)
Ale ja tu nie widzę zmiany.
komentarz 23 lipca przez plaster Nowicjusz (130 p.)
//Navigation menu scrollTo
	$('header nav ul li a').click(function(event){
		event.preventDefault();
		var section = $(this).attr('href');
		var section_pos = $(section).position();

		if(section_pos){
			$(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);
		}
		
	});

to jest oryginał

komentarz 23 lipca przez pablop76 VIP (115,380 p.)
edycja 23 lipca przez pablop76

Ale to scrollTo  jest problemem nie ten kod.

Podałem Ci czysty js zamiast scrollTo do podmiany w skrypcie zamiast

  $(window).scrollTo({top:section_pos.top, left:'0px'}, 1000);

wstaw

        window.scrollTo({
            top: section_pos.top,
            left: 0,
            behavior: 'smooth'
        });

Tak samo nicescroll rzuca błędy.

 

Popraw to lub podmień podpięcie tych pluginów z cdn

 

<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"
		integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

1
komentarz 23 lipca przez plaster Nowicjusz (130 p.)
edycja 23 lipca przez plaster
aaaa ok, sorki nie trybnąłem za pierwszym razem, no i jest git teraz!!!

dzięki stary - jesteś wielki!!!

różnica teraz jest taka, że przewijanie do anchora jest dużo szybciej niż było wcześniej ale za to na landingu działa!!!

Podobne pytania

0 głosów
2 odpowiedzi 442 wizyt
0 głosów
3 odpowiedzi 886 wizyt
+1 głos
2 odpowiedzi 96 wizyt
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

84,177 zapytań

132,948 odpowiedzi

294,113 komentarzy

55,590 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...