Jak zrobić strony/menu z ikonkami i wyszukiwarką na górze bloga

09.11.2018


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.

Zapamiętaj!
Ż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 link
NAZWA STRONY - tutaj wpisujemy nazwę dla naszej strony
nazwa - to co pojawi nam się po najechaniu na stronę (małe szare okienko)

Zapamiętaj!
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: 



Udostępnij ten wpis:

Brak komentarzy:

Prześlij komentarz

- 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Ń
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life