Responsywne menu

Robię responsywne(mobilne) menu do mojej strony. Problem jest taki, że menu zamiast się rozwijać to się zwija, tj. slide idzie do góry a nie na dół. Prezentuję warstwy kodu:

HTML:

<nav>
   <ul>
      <a href="#" class="button-menu">MENU</a>
         <li>zakladka1</li>
         <li>zakladka2</li>
    </ul>
</nav>

CSS:

@media (max-width: 800px) {
	nav { background:#000; color:#eee; font-size:17px; height:35px; line-height:0; padding-top:9px; position:fixed; top:0; width:100%; }
	nav a { color:#fff; margin-right:10px; text-decoration:none; } 
	nav a:hover { color:#ccc; text-decoration:underline; } 
	nav li { display:none; }
}

jQuery:

$(document).ready(function(){
   $(".button-menu").click(function(){
	$("nav").slideToggle("slow");
   });
});

Dlaczego tak jest? Może mi ktoś oprawić kod?

Po pierwsze bezposrednim dzieckiem tagu ul nie powinno byc nic innego tylko li. Wywal a przed ul. Po drugie ustawiles toggle na samego nav'a, wiec to do niego zostalo zbindowane toggle. Wszystko byloby ok, gdyby nie fakt, ze znacznik a na ktory klikasz jest w srodku. Jezeli chcesz, zeby wysuwalo Ci sie menu to musisz to zbindowac na ul i przeniesc a przed to co ma sie chowac w tym wypadku przed ul. Najlepiej zmienic tag a na button bedzie to wtedy poprawne uzycie tagu.

http://jsfiddle.net/u4egc87y/2/

A jak zrobić, żeby to menu przesuwało cały pasek a nie tylko tekst na nachodzący na niego?

Wybacz, ale nie rozumiem o co chodzi.

Chodzi o to, że przedstawiona wersja menu przez Ciebie wysuwając się przechodzi przez górną belkę(nav). Chodziło mi o coś takiego, żeby menu przy rozwijaniu rozciągało tą belkę za sobą w dół. Rozumiesz?

To trzeba je inaczej zorganizować wtedy. Nie chce mi sie tego robić, bo w internecie jest tego pełno http://www.jqueryrain.com/example/jquery-menu-example/ <- 350 rozwijanych menu..

Ok. Na razie zrobiłem tak:

https://jsfiddle.net/u4egc87y/10/

Mam takie pytanie. Jak zrobić, żeby border z li był rozciągany na całą szerokość ekranu(nadałem width 100%;) i nic. Druga sprawa. Dlaczego przy klikaniu w menu pojawia się taki dziwny przeskok a nie płynne przejście? Może ktoś zerknąć w kod wyżej?

Mógłby ktoś zerknąć na kod i pomóc?

Jezeli korzystasz z Chrome wcisnij F12 lub ctrl + shift + I kliknij w lewym gornym rogu lupke i zaznacz menu. Pozniej popatrz z prawej strony na to co masz nalozone na to menu. Przeskakuje Ci tak na oko o ile? Jakies 40-50 px nie? min-height=50px mowi Ci cos?:P

No to jedziemy dalej. Gdybys sie przylozyl to wiedzialbys, ze ul ma -webkit-padding-start: 40px; i dlatego nie dziala Ci width: 100%, wystarczy rowniez zbadac ten element i wszystko widac jak na dloni. Nav rowniez ma nalozony padding:9px; wiec tez go musisz zdjac, jezeli chcesz miec ul na 100% szerokosci ekranu.

A skąd to-webkit-padding-start: 40px; tam się miało wziąć? Nie ma tam nic takiego. Usunięcie padding: 9px; też nic nie daje.

Pewne elementy maja defaultowy styl (wlasciwie kazde) np. header font-size, albo div display:block itd.

Zmienilem w 4 linii i w 15.. https://jsfiddle.net/u4egc87y/13/ i usunalem min-height:50px gdzies, nie pamietam gdzie, dziala?

Teoretycznie działa ale nie jest całkiem rozciągnięte na całą stronę. Od lewej strony trochę wystaje.

Bo li maja margin na litosc boska..

Ostatnie pytanie. Jak powinna wyglądać wersja menu dla zwykłego monitora, czyli NIE dla urządzeń mobilnych? Gdzie dać display:none?
Gdy wyłączę

nav .toggle-menu{display:none;}

to nie wyświetla się menu w żadnej z wersji. Co zrobić?

http://www.amazon.com/CSS3-Missing-David-Sawyer-McFarland/dp/1449325947/ref=sr_1_1?s=books&ie=UTF8&qid=1438023937&sr=1-1&keywords=css3

A czy oprócz książki możesz coś mi poradzić odnośnie kodu?

Może mi ktoś powiedzieć jak to zrobić?