Wyświetlanie treści dla mobilnej wersji strony

0

Odnośnie wcześniejszego tematu dotyczącego menu mobilnego. Postanowiłem to przepisać od nowa, pisząc po swojemu. Ale zawsze utknę na tym samym problemie. Otóż, może najpierw kod

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            nav { background: #000; position: absolute; left: 0; top: 0; width: 100%; color: #fff; }
            nav ul { list-style:none; text-align:center;}
            nav li { display:inline; }
            nav .button-menu { display:none; }
            @media (max-width: 800px) {
                nav li { display:block; }
                nav .button-menu { color:#fff; }
            }
        </style>

        <script>

        </script>
    </head>
    <body>
        <nav>
            <ul>
                <a class="button-menu">MENU</a>
                <li>Home</li>
                <li>O mnie </li>
                <li>Usługi</li>
                <li>Portfolio</li>
                <li>Kontakt</li>
            </ul>
        </nav>
    </body>
</html>

Efekt:
https://jsfiddle.net/5ao1utdo/

Po oddaleniu strony widać menu w wersji nie mobilnej. I tu mam pytanie.
Chcę, żeby:

<a class="button-menu">MENU</a>

widoczne było tylko dla strony mobilnej. Zatem utworzyłem taki kod jak powyżej. Dlaczego gdy:

w "zwykłej" wersji ustawiam:

nav .button-menu { display:none; }

oraz w wersji mobilnej:

nav .button-menu { color: #fff }

to ten div button-menu NIE WYŚWIETLA się w żadnej wersji strony. Może mi to ktoś wytłumaczyć, bo męczę się z tym już kilka godzin. Proszę o podpowiedź w tej sprawie.

0

Po co zakładać dwa tematy do tego samego problemu?

Po pierwsze, pomiędzy znacznikami ul znajdują się tylko i wyłącznie li.

        <nav>
            <p class="button-menu">MENU</p>
            <ul>
                <li>Home</li>
                <li>O mnie </li>
                <li>Usługi</li>
                <li>Portfolio</li>
                <li>Kontakt</li>
            </ul>
        </nav>

Po drugie jak coś się wyłącza to wypadałoby to włączyć ponownie, ponieważ zmiana koloru elementu który jest niewidoczny nic nie daje.

@media (max-width: 800px) {
                nav li { display:block; }
                nav .button-menu { background-color: red; display: block; }
            }
0

Tak, wiem teraz do tego sam doszedłem. Dziękuję za pomoc. Pomogło mi przepisanie kodu i analiza linijka po linijce, co za co odpowiada.

A powiedzcie mi jeszcze co mam zrobić, żeby po kliknięciu w odnośnik z menu mobilnego, ów menu się z powrotem zwijało?

0

Trzeba zastosować czysty Javascript lub bibliotekę tego języka JQuery i obsłużyć zdarzenie onClick.

0

Zakładam że dopiero zaczynasz uczyć się HTMLa, ale może warto już na tym poziomie zainteresować się biblioteką Bootstrap(szczególnie jeżeli interesujesz się stronami mobilnymi). Służy ona głównie do tego aby tworzyć responsywne(dostosowujące się do szerokości okna) strony internetowe. Pisząc jedną stronę masz od razu wersję na komputer, table czy telefon. Ponadto bardzo łatwo znaleźć w niej gotowe rozwiązania do tego typu rzeczy. Np. tu masz przykład z chowającym się menu na telefonie(możesz podejrzeć, zmniejszając szerokość okna :D ) http://getbootstrap.com/examples/offcanvas/ Poszukaj sobie na tej stronie więcej przykładów

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0