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;}
.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;}
Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)
Instrukcja przeczytana i bardzo pomocna dla bloggerów :) Ankieta wypełniona :)
OdpowiedzUsuńBardzo przydatny post, myślę że przypadnie do gustu wielu blogerom :)
OdpowiedzUsuńDziękuję :)
OdpowiedzUsuń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ńJasne, pisz śmiało, a postaram Ci się pomóc :)
OdpowiedzUsuńNo więc moje pytania to:
OdpowiedzUsuń- 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 ;)
Zapraszam na maila :)
OdpowiedzUsuńNapisałam, czekam na szybką odpowiedź :)
OdpowiedzUsuń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ńJeśli masz szablon Awesome inc. (rewelacja) to taki błąd może występować, trzeba zmienić szablon na Simple (prosty)
OdpowiedzUsuńZmieniłam, ale ani rozwijane menu nie zniknęło ani nie odblokował się układ.
OdpowiedzUsuńMusisz mieć w szablonie jakiś kod, który blokuje
OdpowiedzUsuńTak wygląda mój układ teraz :
OdpowiedzUsuńWygląd układu się zmienił, bo Blogger wprowadził aktualizacje
OdpowiedzUsuńok, dzięki :) A co zrobić by usunąć to menu ? :( Przepraszam że tak nudzę, ale spędza mi to sen z powiek :(
OdpowiedzUsuńTrzeba odszukać, gadżetu HTML/JavaScript, w którym jest dodane to menu i wybrać edytuj - usuń ;)
OdpowiedzUsuńDZIĘKUJĘ CI OGROMNIE !!! JUŻ MYŚLAŁAM ŻE SIĘ TEGO NIE POZBĘDĘ :) :) :) :) :) WIELKIE DZIĘKI <3
OdpowiedzUsuńNie ma za co ;)
OdpowiedzUsuńPrzydatny post, wszystko klarownie wyjaśnione :)
OdpowiedzUsuńTen post bardzo mi się przydał, dziękuję :)
OdpowiedzUsuńŚwietny instruktarz :D bardzo pomocny,
OdpowiedzUsuń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/
Hej :)
OdpowiedzUsuń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!
Proszę pisać na maila. Nie rozwiązuje problemów w komentarzach.
OdpowiedzUsuńSuper jest to menu, ale teraz pytanie co dalej? Jak podpiąć pod to posty?
OdpowiedzUsuń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ń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ńJeśli połączyłaś dwa obce sobie kody to wcale się nie dziwię, że jest jakiś błąd.
OdpowiedzUsuńa jak mam zrobić ?
OdpowiedzUsuńWykonać całą powyższą instrukcję, bez mieszania z innym kodem.
OdpowiedzUsuńZrobiłam wszystko według instrukcji, ale pojawił się pewien problem w postaci dziwnych kreseczek pod menu... Czy da się to jakoś usunąć?
OdpowiedzUsuńhttp://okiemkoniary.blogspot.com/ https://uploads.disquscdn.com/images/71c309c722a933409087e22c526725a42b18715c9264fd29e89159631a6e0936.png
Tak się dzieje, jak się edytuje darmowy szablon z zagranicznych stron, który ma skrócony kod szablonu
OdpowiedzUsuńDziękuję :)
OdpowiedzUsuńDziękuje bardzo za tutorial ♥ Takie pytanie z mojej strony : czy da się ( a jeśli tak,to jak) 'podpinać' posty pod konkretne strony ? np mam strone /zakladke 'DIY' i chcialabym,zeby wszytskie posty DIY pojawialy sie tez tam po kliknieciu w nia.
OdpowiedzUsuńPozdrawiam serdecznie
Czy da się ustawić ,,wyśrodkowanie" menu?
OdpowiedzUsuńO co dokładnie chodzi? Kod do tego menu już zawiera wyśrodkowanie
OdpowiedzUsuńKiedy go użyłam na swoim blogu pasek menu był przesunięty do lewej. Blog miał zaimportowany szablon christina.
OdpowiedzUsuńNie ma problemu - zawsze staram się szybko pomóc :)
OdpowiedzUsuńDziękuję za szybką odpowiedź :D
OdpowiedzUsuńI tu jest właśnie odpowiedź dlaczego pojawił się błąd. Nie wiem co to za szablon, ale obstawiam, że innego autora, po usunięciu menu które było w danym szablonie (albo i nie) został kod do poprzedniego menu, więc ten kod z tej instrukcji będzie się z tamtym gryzł.
OdpowiedzUsuńHej,
OdpowiedzUsuńMam problem z tymi kodmai, może będziesz w stanie mi pomóc. Otóż wgrałam kod i raz po najechaniu kursora menu działa i rozwija się, a raz "kursor nie łapie" i menu nie rozwija się. Czy wiesz, co może być tego przyczyną? Długość liter w pierwszym szeregu menu nie powinna mieć znaczenia? Czy to kwestia przechodzenia (transition)?
Bardzo prosiłabym o pomoc. Możesz zajrzeć na moją stronę i zobaczyć w czym problem? oczy zobaczyly . pl (wszystko pisane razem ). proponuję spróbować kilka razy, bo raz rozwija się 3 razy pod rzad, a potem np. 3 razy nie rozwija się.
Zaczęłam szablon od początku w blogerze (wybrałam inny i znowu wróciłam na prosty), więc raczej nie mam naleciałości po innych kodach...
Byłabym bardzo wdzięczna za podpowiedź, z jakiego powodu raz działa a raz nie.
Z wszelkimi problemami proszę pisać na maila, w komentarzach nie odpowiadam ;)
OdpowiedzUsuń