Responsywne menu

Question

Witam,

 

W jaki sposób zrobić responsywne menu, które powiedzmy przy rozdzielczości mniejszej niż 800px będzie ikoną po której kliknięciu rozwinie się menu?

 

Aktualny kod HTML:

<div class="sticky_bar">
<div id="podmenu">
<section class="nav">
<ul>
  <li><a href="#home"><b>Home</b></a></li>
  <li><a href="#czym_jest_linux"><b>Czym jest Linux?</b></a></li>
  <li><a href="#dystrybucje"><b>Dystrybucje</b></a></li>
  <li><a href="#linus_torvalds"><b>Linus Torvalds</b></a></li>
  <li><a href="komendy.html"><b>Komendy</b></a></li>
  <li><a href="#ciekawostki"><b>Ciekawostki</b></a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#kontakt"><b>Kontakt</b></a></li>
    <li><a href="o_autorach.html"><b>O autorach</b></a></li>
  </ul>
</ul>
</section>
</div>
</div>

 

Aktualny kod CSS:

.nav
{
position: sticky;
left: 0px;
margin-right: 0px;
margin-bottom: 14px;
padding-top: 15px;
padding-bottom: 8px;
padding-right: 5px;
padding-left: 13px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1da6f9;
   font-size: large;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #ffffff;
    color: #1da6f9;
}

 

Answer 1

Możesz takie coś uzyskać używając Bootstrapa - [LINK]. Jeżeli takie coś Ci nie pasuje, na internecie jest mnówstwo poradników dot. tworzenia własnych stron responsywnych od zera - tyle że to będzie o wiele trudniejsze i czasochłonne ;).

Comments

Tworzenie responsywnej strony od zera nie jest trudniejsze niż tworzenie nieresponsywnej strony od zera.

---

Zależy ile już stron zrobiłeś - responsywność dodaje kilka własnych zasad, poleceń, myślę że czasami też dłużej się zastanawia nad pewnymi rzeczami. Pierwsza responsywna strona to problem, ale piąta czy siódma - już nie, a na pewno nie tak jak ta pierwsza właśnie :)

Answer 2

Albo tak ostylowac menu przy uzyciu media query zeby sie zmienilo do odpowiedniego wygladu, albo zrobic drugie i pokazywac/ukrywac w zaleznosci od rozdzielczosci. Pierwsza opcja lepsza moim zdaniem ale trudniejsza do wykonania.

Answer 3

Ja będę takie coś próbować robić i na pewno będę się wzorować na stronie Pana Mirosława bo mi się bardzo podoba. U Niego coś takiego jest. Jak mi się uda to dam znać. Ale coś czuję, że trzeba będzie użyć JavaScript. A zresztą zanim to zrobię to na pewno ktoś Ci wcześniej pomoże.

[edit]

Popatrzyłam i na blogu MZ też jest używany Bootstrap. Tak więc radek024 ma racje.

Pozdrawiam,