Menüü ja galerii - GreteNeilinn/G-Sushi GitHub Wiki

Ülevaade:

Failid, mis on seotud galerii ja menüüga, on järgmised:

  • g_sushi_menu.html
  • galerii.html
  • stiilgalerii.css
  • stiilmenüü.css
  • galerii.js
  • lisaks piltide kaustad

Menüü ja galerii koosnevad peamiselt .html'ist ja .css'ist. Kõik kasutatud pildid ja logod on saadud nende autorilt otse ja luba kasutamiseks on olemas.

Javascript

JavaScripti on kasutatud galeriis, ükshaaval suurendatult piltide vaatamisel.

Ülemine menüüriba

Menüüribal on logo ja teiste avalehtede linkidega nupud. Hiire liigutamine ülemise menüürea elemendi peale, käivitab antud elemendi paisumise. Seda efekti on tekitatud transition meetodil. <li><a href="g_sushi_menu.html" style="text-decoration:none">MENÜÜ</a></li>

Alumine riba

Alumisel ribal on, sarnaselt ülemisele, G-Sushi logo, aga menüü asemel tellimiseks viidatud telefoninumber.

Menüüleht

Menüülehel on kaks pildikollaaži, millest mõlemad on kokku pandud G-sushi asutajalt küsitud piltidest. Menüü aluseks on võetud kõige viimatisem internetist kättesaadav menüü. Kasutatud vaid .html'i ja .css'i.

Galerii

Galeriis on võimalik vaadata kõiki pilte, mis meie valdustesse anti. Valiku tegi Grete Püvi ise. Lisaks piltidele toidust, on võimalik veidi näha ka sealset interjööri ja suviseid kokteile ning isegi klientide saadetud tagasisidesõnumeid. Piltide suuremalt vaatamiseks tuleb neil klõpsata, suurendatud vaatest saab väljuda ristikesega lehe vaate ülaosas. Samuti saab pilte vahetada nupukestega, mis ilmuvad :hover'i kasutuse tõttu siis, kui neist hiirega üle liikuda. Galerii suuremas vaates on kasutatud veidi Javascripti. `

             <script>
                // Ava vaade
                function openModal() {
                  document.getElementById("myModal").style.display = "block";
                }
            
                // Sulge vaade
                function closeModal() {
                  document.getElementById("myModal").style.display = "none";
                }
            
                var slideIndex = 1;
                showSlides(slideIndex);
            
                // Eelmine/järgmine nupud
                function plusSlides(n) {
                  showSlides(slideIndex += n);
                }
            
                // Thumbnail pildi nupud
                function currentSlide(n) {
                  showSlides(slideIndex = n);
                }
            
                function showSlides(n) {
                  var i;
                  var slides = document.getElementsByClassName("mySlides");
                  var dots = document.getElementsByClassName("demo");
                  if (n > slides.length) {slideIndex = 1}
                  if (n < 1) {slideIndex = slides.length}
                  for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                  }
                  for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                  }
                  slides[slideIndex-1].style.display = "block";
                  dots[slideIndex-1].className += " active";
                }
            </script>`

Põhi võetud leheküljelt https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp.

⚠️ **GitHub.com Fallback** ⚠️