Menu - otwieranie i zamykanie odpowiednich div'ów

komentarz 14 marca 2017 przez Pastor Nowicjusz (140 p.)

Witam!!
Dzięki za odpowiedź. Przykłady fajne, lecz jak je zapisać. W przykładach klikamy w konkretnego diva. Lecz ja mam menu, z którego wywołuje konkretne "divy" Nie klikamy na nie bezpośrednio.

komentarz 14 marca 2017 przez Pastor Nowicjusz (140 p.)

HTML
<!DOCTYPE html>
<!--
Author: Sebastian Pastuszka
E-mail: s.pastuszka08@gmail.com
-->
<html>
    <head>
        <title>JavaSite</title>
        <meta charset="UTF-8">
        <meta name="keywords" content="JavaScript, JQ,  JS, Web, html, css">
        <meta name="description" content="WebSite in HTML, CSS , Java Script ">
        <link rel="icon" type="image/x-icon"  href="images/favicon.ico">
        <link type="text/css"  rel="stylesheet" href="css/style.css">
        <link type="text/css"  rel="stylesheet" href="css/normalize.css">
        <link type="text/css"  rel="stylesheet" href="css/main.css">
        <script src="js/modernizr-2.8.3.min.js"></script>
        
    </head>
    <body>
        <div class="dropdown left fix">
            <div class="dropdown-icon">
                <img src="images/menu-icon.png"/>
            </div>
            <ul class="dropdown-menu" style="display:none ;" >
                <li><span class="F">Facebook</span></li>
                <li><span class="Y">Youtube</span></li>
                <li><span class="T">Twitter</span></li>
                <li><span class="I">Instagram</span></li>
                <li><span class="Tw">Twitch</span></li>
            </ul>
            </div>
        <div class="social left">
            <div class="description">
                <div class="facebook"  style="display:none ;">
                    <p><b>Facebook</b> – serwis społecznościowy, w ramach którego zarejestrowani użytkownicy mogą tworzyć sieci i grupy, dzielić się wiadomościami i zdjęciami oraz korzystać z aplikacji, będący własnością Facebook, Inc. z siedzibą w Menlo Park. W styczniu 2014 liczba użytkowników na całym świecie wynosiła około miliarda, a co miesiąc wgrywanych jest ponad 1 mld zdjęć oraz 10 mln filmów, których obecnie jest 265 miliardów. Średni wiek użytkownika serwisu to 22 lata. Dane zgromadzone na Facebooku to ponad 980 petabajtów, co 24 godziny przybywa ponad 0,5 petabajta
Projekt został uruchomiony 4 lutego 2004 na Uniwersytecie Harvarda (w stanie Massachusetts) i był początkowo przeznaczony przede wszystkim dla uczniów szkół średnich i studentów szkół wyższych (college’ów, uniwersytetów). Jego głównym autorem jest Mark Zuckerberg (obecnie pełni on funkcję dyrektora generalnego). Serwis zatrudnia ok. 1000 pracowników (stan na sierpień 2009)Planowane przychody przekroczą 150 mln USD (2008) We wrześniu 2009 założyciel Facebooka poinformował na swoim blogu, że Facebook po raz pierwszy przestał przynosić straty i zaczął pokrywać swoje koszty operacyjne oraz inwestycje w nowe serwery.
W marcu 2008 autor portalu, 23-letni Mark Zuckerberg, plasując się na 785. miejscu rankingu Forbesa zestawiającego najbogatszych ludzi świata, został najmłodszym miliarderem świata (1,5 mld USD)
W październiku 2010 na ekrany kin wszedł film The Social Network ukazujący historię portalu Facebook (pierwotnie TheFacebook) i jego założycieli. W zakończeniu filmu podano szacunkową wartość portalu i wynosiła ona 25 miliardów dolarów.
18 maja 2012 roku Facebook jako firma pojawił się po raz pierwszy na amerykańskiej giełdzie NASDAQ, stając się najwyżej wycenianą w dniu debiutu spółką giełdową w historii. Szacunki dotyczące wartości serwisu okazały się jednak mocno przesadzone, gdyż oczekiwania inwestorów były zbyt duże w stosunku do realnych możliwości serwisu[10].</p>
                </div>
                <div class="Youtube" style="display:none;">
                    <p><b>YouTube</b> – serwis internetowy założony w lutym 2005 roku, który umożliwia bezpłatne umieszczanie, odtwarzanie strumieniowe, ocenianie i komentowanie filmów. Serwis używa technologii HTML5 i FLV do wyświetlania szerokiego wyboru filmów zamieszczonych przez użytkowników (tzw. user-generated content), takich jak zwiastuny filmowe lub telewizyjne, teledyski, jak i dzieła amatorskie: wideoblogi i krótkie własne filmy. Większość materiałów została załadowana na YouTube przez prywatne osoby, ale wiele przedsiębiorstw (na przykład Columbia Broadcasting System, BBC, Universal Music Group, w Polsce Polska Agencja Prasowa, Grupa TVN, CD Projekt), różne instytucje i organizacje oferują część swoich materiałów przez YouTube jako część programu partnerskiego.
Niezarejestrowani użytkownicy mogą oglądać filmy, podczas gdy zarejestrowani mają możliwość umieszczenia nieograniczonej liczby filmów. Filmy, które zostaną uznane za zawierające treści nieodpowiednie dla młodszych użytkowników, są dostępne tylko dla zarejestrowanych w wieku co najmniej 18 lat. Umieszczanie filmów zawierających pornografię, objętych prawem autorskim, propagujących nienawiść oraz zachowania przestępcze i będących zniesławieniem jest zabronione w warunkach korzystania z usługi. Profile kont zarejestrowanych użytkowników są określane jako „kanały”. Na stronach serwisu wyświetlane są reklamy.</p>
                </div>
                <div class="Twitter" style="display:none;">
                    <p><b>Twitter</b> – serwis społecznościowy udostępniający usługę mikroblogowania założony 21 marca 2006 roku.Zarejestrowany użytkownik może wysyłać i odczytywać tak zwane tweety (czyt. tłity). Tweet to krótka wiadomość tekstowa (maks. 140 znaków) wyświetlana na profilu autora wpisu oraz pokazywana użytkownikom, którzy obserwują dany profil. Twitter umożliwia tagowanie (znak kratki # przed słowem czyni to słowo tagiem) oraz odpowiadanie innym użytkownikom (@nazwa_użytkownika = odpowiedź). Użytkownicy piszą krótkie wiadomości w swoim profilu na Twitterze przez stronę www, SMS-em lub przez aplikację mobilną. Angielskie słowo tweet oznacza ćwierkanie, ćwierkać. W języku polskim używany jest czasownik tweetować oznaczający pisać na Twitterze.</p>
                </div>
                <div class="Instagram" style="display:none;">
                    <p><b>Instagram</b> – fotograficzny serwis społecznościowy hostingu zdjęć, połączony z aplikacją o tej samej nazwie (dostępną na systemy operacyjne Windows Phone, iOS oraz Android), który umożliwia użytkownikom edycję zdjęć i filmów, stosowanie do nich filtrów cyfrowych oraz udostępnianie ich w różnych serwisach społecznościowych. Charakterystyczną cechą aplikacji był nadawany zdjęciom kwadratowy kształt, podobnie jak w aparatch fotograficznych marki Kodak serii Instamatic, aparatach do fotografii błyskawicznej firmy Polaroid oraz w średnioformatowych aparatach formatu 6x6 w przeciwieństwie do proporcji obrazu 4:3, który jest wykorzystywany przez większość aparatów fotograficznych oraz urządzeń mobilnych dysponujących funkcją foto. 27 sierpnia 2015 roku udostępniono możliwość umieszczania zdjęć i filmów w innych formatach obrazu[3].</p>
                </div>
                <div class="Twitch" style="display:none;">
                    <p><b>Twitch</b> – strona internetowa będąca platformą medialną udostępniającą wideo strumieniowe (na żywo), przeznaczona w głównej mierze do transmisji rozgrywek sportu elektronicznego oraz gier komputerowych. Strona została założona w czerwcu 2011 przez współwłaścicieli serwisu Justin: Justina Kana i Emmetta Sheara. Według danych serwisu, stronę miesięcznie odwiedza 45 milionów widzów. W sierpniu 2014 roku platforma została kupiona przez Amazon.com za kwotę 970 milionów dolarów.
Serwis jest dostępny na platformę mobilą Android i iOS. Jest też zintegrowany z oprogramowaniem na komputery osobiste. Z serwisu korzystały m.in. platformy Origin i Uplay, transmitowane były rozgrywki gier rozgrywane na kartach graficznych Nvidia, transmitowane były też oficjalnie takie gry jak np. Minecraft czy Eve Online.
Twitch dostępny jest również na konsolach: Xbox 360, Xbox One, PlayStation 4 oraz Ouya.
                    </p>
                </div>
            </div>
        </div>
        
      
        
        <script src="js/jquery-1.12.0.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

Java Script

var main = function() {
  $(document).keypress(function(event){
      if(event.which === 109){
          $('.dropdown-menu').toggle();
      }
      else if (event.which === 102) {
          $('.facebook').toggle();
      }
      else if (event.which === 121) {
          $('.Youtube').toggle();
      }
      else if (event.which === 116) {
          $('.Twitter').toggle();
      }
      else if (event.which === 105) {
          $('.Instagram').toggle();
      }
      else if (event.which === 84) {
          $('.Twitch').toggle();
      }
  });
    $('.dropdown-icon').click(function() {
    $('.dropdown-menu').toggle();
  });
    $('.dropdown-menu').click(function(event){
       var target = $( event.target );
       if (target.is ('.F')) {
           $('.facebook').toggle();
      }
      else if (target.is ('.Y')) {
          $('.Youtube').toggle();
      }
      else if (target.is ('.T')) {
          $('.Twitter').toggle();
      }
      else if (target.is ('.I')) {
          $('.Instagram').toggle();
          clear();
      }
      else if (target.is ('.Tw')) {
          $('.Twitch').toggle();
      }
    });
};
$(document).ready(main);

komentarz 17 marca 2017 przez Pastor Nowicjusz (140 p.)

https://github.com/Pastor08/JavaScriptSite. Co muszę zmienić aby każd apozycja z menu pokazywała opis, lecz każdy osobno. jeden div z opisem pokazuje się, a drugie który był np. przed nim aktywny zamyka się. (Tylko jeden opis danego "social media" aktywny)

Pozdrawiam