Przerobienie menu na responsywne

Question

Mam sobie taki kod CSS, tyle, że nie bardzo wiem jak przerobić to aby menu było responsywne. Najlepiej by się zwijało w te 3 taki paski. To, że wykorzystać media-queries to wiem, ale jak to wykorzystać już aby schować statyczne menu i stworzyć mobilne to już niestety nie wiem.

 

 

    /*Menu*/
        #menu, #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #menu {
            width: 100%;
            border: 1px solid #222;
            background: #111 linear-gradient(#444, #111);
            box-shadow: 0 1px 1px #777;
        }

        #menu:before,
        #menu:after {
            content: "";
            display: table;
        }

        #menu:after {
            clear: both;
        }

        #menu {
            zoom:1;
        }

        #menu li {
            float: left;
            border-right: 1px solid #222;
            box-shadow: 1px 0 0 #444;
            position: relative;
        }

        #menu a {
            float: left;
            padding: 12px 30px;
            color: #999;
            text-transform: uppercase;
            font: bold 12px Arial, Helvetica;
            text-decoration: none;
            text-shadow: 0 1px 0 #000;
            transition-duration: 300ms;

        }

        #menu li:hover > a {
            color: #fafafa;
            background-color: #ff9a12;
        }

        *html #menu li a:hover { /* IE6 only */
            color: #fafafa;
        }

 

Comments

No Panowie... ktoś musi wiedzieć w jak prosty sposób zwinąć to dla mobile..

---

Być może oglądałeś, być może nie, ale dosyć popularny filmik dla początkujących o prostej stronce w RWD:

https://www.youtube.com/watch?v=H7LUUsbpbrg

o zrobieniu menu na przycisk z trzema paskami (mam nadzieję, że o to pytasz) zaczyna się (chyba, bo widzę, że dalej jest stylowanie tego menu) w 1:12:00.

Btw., nie styluj po ID, tylko po Class: http://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109776#q109776

---

dzięki, nie oglądałem, bo nie siedzę we froncie kompletnie. Znajomy mnie prosił o stworzenie strony i tak powoli coś skręcam w bootstrapie i css. Czytam artykuły comanndera i efekt wrzucę tutaj kiedyś, bo pewnie semantycznie nadal będzie kiepsko ;)

Answer 1

Jak chcesz żeby menu na mobilce fajnie działało to poczytaj o Bootstrapie. Jest specjalny kod do tego.

Comments

Przeczytaj jeszcze raz o co mi chodzi.. nie widziałem by bootstrap potrafił stworzyć slide menu przy zmianie rozdzielczości..