Jak zrobić rozwijane menu

12.11.2015


Nie wiem czy pamiętacie, jak napisałam kiedyś wpis o tym, jak zrobić rozwijane menu na podstawie profilki.pl. Ta opcja bez wątpienie jest szybka i nie ma strachu o to, że coś popsujemy. Jednak, słyszałam od Was, że nie zawsze menu ze strony profilki.pl działa poprawnie, dlatego w dzisiejszym wpisie pokażę Wam, jak takie menu wykonać samemu. Nie musicie się o nic martwić, ponieważ będziemy pracować tylko na gadżecie HTML/JavaScript i kodach CSS. Oprócz tego na końcu tego wpisu znajdziecie ankietę, dotyczącą bloga. Bardzo proszę o wypełnienie jej, ponieważ pomoże mi to w usprawnieniu mojej strony.

1. Tradycyjnie przechodzimy do układu naszego bloga. Pamiętajmy o tym, aby usunąć gadżet strony. Układ - dodaj gadżet - HTML/Javascript



2. Wklejamy kod i klikamy "zapisz":



<!-- START MENU -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='#'>KATEGORIE</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
</ul></div>
</div>
<!-- KONIEC MENU -->

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy kod:


/* MENU */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  }
.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;
letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; }
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px;
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222;
display: block;
margin: 0;
padding: 15px;
}
#nav li a:hover, #nav li a:active {
color: #888888;
margin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
float: none;
margin: 0;
padding: 7px 10px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
color: #888888;
padding: 7px 10px;
width:147px;
border-left:3px solid #888888;transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

Analiza kodu:
Wszystkie pogrubione wartości są zmienne!

.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  } - kolor tła i wyrównanie.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; } - rodzaj fontu, wygląd tekstu (tutaj ustawione na tekst pisany wielkimi literami, jeśli nie chcemy tej opcji w miejsce uppercase wpisujemy none), wielkość fontu, odległość między literami, kolor teksu, grubość, rodzaj i kolor ramki.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; } - kolor fontu, po najechaniu myszą.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px; - wysokośćposition: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222; - kolor odwiedzonego linkudisplay: block;
margin: 0;
padding: 15px}
#nav li a:hover, #nav li a:active {
color: #888888; - kolor tekstu po najechaniu mysząmargin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  - kolor tła, rozwijanej części menu width: 150px;
color: #222222; - kolor tekstu, rozwijanej części menu float: none;
margin: 0;
padding: 7px 10px;
text-align:left; - wyrównanie}
#nav li li a:hover, #nav li li a:active {
color: #888888; - kolor tekstu po najechaniu myszą w rozwijanej części menu padding: 7px 10px;
width:147px;
border-left:3px solid #888888; transition: all 0.3s ease-in-out; - efekt (pasek z lewej strony) przy najechaniu myszą na tekst w rozwijanej części menu. Grubość, rodzaj i kolor-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

4. Efekt końcowy:



Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)

32 komentarze:

  1. Instrukcja przeczytana i bardzo pomocna dla bloggerów :) Ankieta wypełniona :)

    OdpowiedzUsuń
  2. Bardzo przydatny post, myślę że przypadnie do gustu wielu blogerom :)

    OdpowiedzUsuń
  3. Cudowna instrukcja ! Ankieta wypełniona. Mam pytanie, udzielasz prywatnych porad blogowych ? Bo ja mam kilka pytań, a nie mam się do kogo zgłosić :c

    OdpowiedzUsuń
  4. Jasne, pisz śmiało, a postaram Ci się pomóc :)

    OdpowiedzUsuń
  5. No więc moje pytania to:
    - jak obramować całą kolumnę, ale bez gadżetów?
    - jak zrobić tak, że : jest data na środku i żeby przechodził przez nią taki pasek, ale żeby nie skreślił tej daty ( ma tak na blogu don't be normal)
    - chcialabym mieć dwa paski z kartami jeden pod naglowkiem drugi na samej górze
    - jak oddać gadżet "szukaj "na górny pasek z kartami
    Mogłabym poprosić o kody, albo instrukcje do tych zagadnień? Z góry dziękuje ;)

    OdpowiedzUsuń
  6. Napisałam, czekam na szybką odpowiedź :)

    OdpowiedzUsuń
  7. hej, chciałam zobaczyć jakby takie rozwijane menu pasowało do mojego bloga - aczkolwiek po zrobieniu wszystkich kroków które tutaj napisałaś po dodaniu na bloga - profilki zmieniły całkowicie układ mojego bloga i został on również zablokowany i nie mogę nic w nim zmieniać ani dodawać - proszę napisz co zrobić w tej sytuacji, jak to usunąć ?

    OdpowiedzUsuń
  8. Jeśli masz szablon Awesome inc. (rewelacja) to taki błąd może występować, trzeba zmienić szablon na Simple (prosty)

    OdpowiedzUsuń
  9. Zmieniłam, ale ani rozwijane menu nie zniknęło ani nie odblokował się układ.

    OdpowiedzUsuń
  10. Musisz mieć w szablonie jakiś kod, który blokuje

    OdpowiedzUsuń
  11. Tak wygląda mój układ teraz :

    OdpowiedzUsuń
  12. Wygląd układu się zmienił, bo Blogger wprowadził aktualizacje

    OdpowiedzUsuń
  13. ok, dzięki :) A co zrobić by usunąć to menu ? :( Przepraszam że tak nudzę, ale spędza mi to sen z powiek :(

    OdpowiedzUsuń
  14. Trzeba odszukać, gadżetu HTML/JavaScript, w którym jest dodane to menu i wybrać edytuj - usuń ;)

    OdpowiedzUsuń
  15. DZIĘKUJĘ CI OGROMNIE !!! JUŻ MYŚLAŁAM ŻE SIĘ TEGO NIE POZBĘDĘ :) :) :) :) :) WIELKIE DZIĘKI <3

    OdpowiedzUsuń
  16. Przydatny post, wszystko klarownie wyjaśnione :)

    OdpowiedzUsuń
  17. Ten post bardzo mi się przydał, dziękuję :)

    OdpowiedzUsuń
  18. Świetny instruktarz :D bardzo pomocny,
    Mogłabym prosić o pomoc? Robiłam wszystko wg instrukcji - tylko koloru w jednym miejscu nie mogę zmienić. A mianowicie po najechaniu na kategorię (np. Podróże) chciałabym aby nadal były brązowe a one wyświetlają się na biało)
    Kombinowałam w każdą stronę już i jakoś nic mi nie chce tego zmienić, możesz pomóc w którym mijscu to?
    http://trishamorningcoffee.blogspot.com/

    OdpowiedzUsuń
  19. Hej :)
    Jakiś czas temu zastosowałam Twój szablon [Girllifestyle] na swojego bloga [na-rewersach.blogspot.com], którego porzuciłam jeszcze zanim cokolwiek w nim napisałam.
    Przyszedł czas na reaktywację i mam problem z kategoriami/stronami:

    Jak (albo co) mam w nie wstawić, by po kliknięciu na nazwę kategorii pokazywał się tekst (w przypadku zakładki 'o mnie' i 'kontakt') lub wszystkie posty z konkretną etykietą?

    Z góry dziękuję za pomoc!

    OdpowiedzUsuń
  20. Proszę pisać na maila. Nie rozwiązuje problemów w komentarzach.

    OdpowiedzUsuń
  21. Super jest to menu, ale teraz pytanie co dalej? Jak podpiąć pod to posty?

    OdpowiedzUsuń
  22. Na to również jest instrukcja na blogu - kategorie wyglądające jak strony. Jeśli chcemy podpiąć daną etykietę. Jeśli sam link to po prostu zamieniamy # na dany link.

    OdpowiedzUsuń
  23. Zrobiłam takie menu z mojego, kiedy najeżdżam na KATEGORIE i chcę przecisnąć jedną etykietę to nie mogę włączyć, bo je rozwinięte się chowa . Co jest ? :(

    OdpowiedzUsuń
  24. Jeśli połączyłaś dwa obce sobie kody to wcale się nie dziwię, że jest jakiś błąd.

    OdpowiedzUsuń
  25. Wykonać całą powyższą instrukcję, bez mieszania z innym kodem.

    OdpowiedzUsuń
  26. Zrobiłam wszystko według instrukcji, ale pojawił się pewien problem w postaci dziwnych kreseczek pod menu... Czy da się to jakoś usunąć?
    http://okiemkoniary.blogspot.com/ https://uploads.disquscdn.com/images/71c309c722a933409087e22c526725a42b18715c9264fd29e89159631a6e0936.png

    OdpowiedzUsuń
  27. Tak się dzieje, jak się edytuje darmowy szablon z zagranicznych stron, który ma skrócony kod szablonu

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona