Jak zrobić strony/menu z ikonkami i wyszukiwarką na górze bloga
Przejrzałam wszystkie dostępne instrukcje na blogu i zobaczyłam, że jest wpis o wielokolorowym menu, o wysuwanym menu, o menu na górze bloga i jeszcze parę instrukcji na temat menu pewnie by się znalazło, ale... zobaczyłam, że nie było nigdy wpisu na temat menu, które składa się z menu + ikonki społecznościowe + wyszukiwarka.
Dlatego też, postanowiłam zrobić dla Was instrukcję na menu z ikonkami i wyszukiwarką, które będzie znajdować się na górze bloga.
Żeby ikonki wyświetlały Wam się prawidłowo to nad < head > musimy dodać nasz font awesome do bloga. Odpowiednią sekcję do wklejenia znajdziecie tutaj: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css Pamiętaj, żeby za ostatnim " a przed > wstawić /. Końcówka kodu powinna wyglądać tak "/>
1. Przechodzimy do motyw - edytuj kod HTML
2. Klikamy obojętnie jakie miejsce w kodzie i wybieramy ctrl + f
3. W okienku wyszukiwania, które nam się pojawi wpisujemy </head> i POD tym elementem wklejamy kod:
Analiza:
# - miejsce na link, usuwamy # i wrzucamy nasz linkNAZWA STRONY - tutaj wpisujemy nazwę dla naszej strony
nazwa - to co pojawi nam się po najechaniu na stronę (małe szare okienko)
Jeśli chcecie usunąć lub dodać ikonki to (w przypadku usunięcia) usuwamy fragment od < li > do < /li > W przypadku dodania kolejnej ikonki, kopiujemy wiersz od < li > do < li > odpowiednio zmieniając dane. Fragment z nową ikonką, wklejamy za ostatnim < /li > ale przed < /ul >
Fragment dla nowej ikonki:
4. Zapisujemy
5. Przechodzimy do motyw - dostosuj i wklejamy kod:
Analiza:
.nav-primary {background: #000; padding: 10px 0px;} - tło menu oraz marginesy wewnętrzne.nav-primary .wrap {padding: 0 10px;} - marginesy wewnętrzne obejmujące tekst
#menutop a{display:block; padding: 0 15px; font: 700 11px Open Sans, sans-serif; color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0px;} - marginesy tekstu (możemy ustawić odstęp między stronami), ustawienia fontu: grubość, wielkość, font, kolor fontu, styl dla tekstu (tutaj ustawione na wielkie litery), odstęp między literami
#menutop ul li:hover a{color: #ea9999; font-weight: 700;} - kolor linku po najechaniu kursorem, grubość fontu po najechaniu kursorem
.nav-primary ul .check {padding-left: 5px !important;} - margines wewnętrzny lewy (możemy ustawić dzięki niemu pozycję wyszukiwarki)
#menutop ul.menux li a{color: #fff; border: 0px; text-decoration: none; font-size: 12px;} - kolor fontu dla rozwijanej części menu, wielkość fontu
#menutop ul.menux{
visibility: hidden;
opacity: 0;
height: auto;
overflow: hidden;
background: #000;
width: 165px;
opacity: 0.9;
z-index: 999;
} - tło dla rozwijanej części menu, szerokość rozwijanej części menu
#menutop ul li ul li a:hover{color: #ea9999;} - kolor po najechaniu kursorem na tekst w części rozwijanej
#menutop #searchBox {
text-transform: uppercase;
border: none;
color: #fff; font:700 13px Open Sans, sans-serif;
outline: none;
text-decoration: none;
letter-spacing: 2px;
padding-left: 10px;
padding-right: 20px;
background-color: transparent;
width: 80px;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
-webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;
} - sekcja odpowiadająca za wyszukiwarkę w menu, styl dla tekstu, kolor fontu, ustawienia fontu: grubość, rodzaj fontu, odstęp między literami, margines wewnętrzny lewy, margines wewnętrzny prawy, szerokość
#menutop #searchBox:focus {
width: 80px;
border-bottom: 1px solid #fff;
} - szerokość, po kliknięciu w wyszukiwarkę (efekt rozsuwania, jeśli chcemy mieć statyczną wyszukiwarkę, szerokość musimy ustawić taką samą jak szerokość przed kliknięciem w nią (sekcja wyżej), dolne obramowanie - linia, która pojawia się po kliknięciu możemy ustawić grubość, rodzaj i kolor
#menutop li.socialicon {float: right; } - ułożenie ikonek społecznościowych (tutaj ustawione na prawą stronę)
#menutop li.socialicon a {padding: 0 10px; font-size: 13px !important;} - marginesy wewnętrzne ikonek, wielkość ikonek
Efekt:
