Menu responsywne - jak.?

malyd77

Avatar: malyd77

2017-06-17 22:23

Witam

Zrobiłem znajomemu proboszczowi stronę www.parafia-wnmp-zabrze.pl. Oczywiście za darmo. Generalnie wszystko działa poza tym że chciałbym aby osoba która przegląda stronę na telefonie lub tablecie miała menu w formie rozwijanej belki. Chciałbym aby to wyglądało tak jak w tutorialu ze strony:

https://www.footstep.pl/blog/responsywne-menu-tutorial

generalnie według tego pomysłu filozofii nie ma:
1. W pliku CSS stworzone są style dla menu po zmniejszeniu strony do 800 px
2. Do pliku HTML dodany jest zapis z którym mam największy problem

<script src="/js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$(".menu-trigger").click(function(){
$('nav').slideToggle();
});
});

Problem jest taki:
1. w którym pliku należy umieścić powyższy fragment kodu -> czy jest to plik

header.php

znajdujący się w katalogu:
\templates\webstyle003

2. jakimi wartościami zastąpić
".menu-trigger"
'nav'

Siedzę i główkuję i niestety z moją znajomością html-a, php, css-a nie umiem nic wymyślić.

Chyba że jest inne rozwiązanie tego problemu.
Z góry dzięki za pomoc w rozwiązaniu tego problemu

» Quick.Cms v6.x

Dawid

selekcjoner

Avatar: selekcjoner

2017-06-17 23:06

$('nav').slideToggle(); zamień na $('.menu-1').slideToggle();

Wstaw do .header.php kod <div class="menu-trigger">Menu</div> nad <?php echo $oPage->listPagesMenu( 1 (...)

malyd77

Avatar: malyd77

2017-06-18 11:52

Dzięki selekcjoner za pomoc. Zrobiłem tak jak poradziłeś. Efekt jest prawie tak jak bym chciał ale nie do końca.

Pojawił mi się napis Menu który sobie postulowałem ale pojawia się także stare menu.
Efekt który uzyskałem działa tak że po wczytaniu strony na tablecie lub telefonie mam napis Menu i stare menu. Po naciśnięciu na Menu zwija albo rozwija stare menu a nowe to responsywna się nie rozwija.

Zastanawiam się czy to kwestia stylów CSS czy gdzieś popełniłem błąd

Dawid

selekcjoner

Avatar: selekcjoner

2017-06-18 13:54

Dla @media screen and (max-width:1199px){ dołóż #header .menu-1{display: none;}

malyd77

Avatar: malyd77

2017-06-18 21:22

selekcjoner dzięki pomogło.
Temat można zamknąć

Dawid

Do góry
o nas | kontakt