1# dyskretne menu [instrukcja]

Sama nie jestem fanką stron, które są niezbyt widoczne na blogu. Wiem jednak, że podczas tworzenia niektórych layoutów zastosowanie takiego tricku jest niezbędne, jeśli chcemy zachować estetykę.
Dlatego też jakiś czas temu opracowałam sposób na "dyskretne menu", którym dzisiaj się z wami bardzo chętnie podzielę. Efekt, który chcemy uzyskać jest widoczny poniżej.

Zaczynajmy!

W panelu bloga klikamy na szablon > dostosuj > zaawansowane > dodaj arkusz CSS, a później postępujemy zgodnie z poniższą instrukcją.

#PageList1 ul li {
list-style-type: none; /*kod konieczny do usunięcia stylu listy*/
display: inline-block; /*zablokowanie linków w jednej linijce*/
}

Ta część kodu jest konieczna, kiedy chcemy by menu (nawet umieszczone w kolumnie) było poziome. Możecie ją pominąć jeśli chcecie zdecydować się na menu pionowe. W dalszej części skupiamy się na kodach dla linków, które kryją się w naszej liście.

Zaczynamy od efektu, który jako pierwszy rzuci się w oczy naszych czytelników. Ukryjmy nasze linki pod kwadracikami i zacznijmy prace nad ich wyglądem.

#PageList1 a {
display: block; /*zablokowanie linków - nie zmieniamy*/
overflow: hidden; /*usunięcie nadmiaru tekstu - nie zmieniamy*/
width:25px;
height: 10px;
padding-top: 5px;
padding-bottom: 10px; /*dzięki temu i trzem powyższym możliwe jest ustalenie rozmiaru kwadracika*/
text-align: center; /*wyśrodkowanie tekstu*/
background: #88bf3a; /*kolor kwadracika*/
color: transparent; /*przezroczystość koloru tekstu*/
font-size: 12px; /*wielkość czcionki*/
transition: 1s; /*czas animacji*/
}

Żeby linki po rozsunięciu ładnie się prezentowały, nie możemy zapomnieć o odpowiednim stworzeniu kwadracika. Żeby to zrobić należy posiłkować się równaniem:

width = height + padding-top + padding-bottom

#PageList1 a:hover {
width: 200px; /*długość linka po najechaniu kursorem*/
color: white; /*kolor tekstu po najechaniu kursorem*/
transition: 1s; /*czas animacji*/
}

Nic trudnego, prawda?

gotowce

Dla leniwych przygotowałam gotowe kody, które można po prostu skopiować i wkleić do arkusza CSS. Ewolucje są najróżniejsze. Mam nadzieję, że Wam się przydadzą i będą dla Was inspiracją.

Strona pierwsza Strona druga Strona trzecia	Strona pierwsza Strona druga Strona trzecia	Strona pierwsza Strona druga Strona trzecia
#PageList1 ul li { list-style-type: none; display: inline-block; } #PageList1 a { display: block; overflow: hidden; width:25px; height: 10px; padding-bottom: 10px; font-family: Times; padding-top: 5px; text-transform: uppercase; background: #ffcc88; color: transparent; text-align: center; font-size: 11px; border: 2px solid #fa482e; border-radius: 50%; transition: 0.5s; } #PageList1 a:hover { width: 130px; background: #fa482e; border-radius: 0px; color: #ffcc88; border: 2px solid #ffcc88; transition: 0.5s; }	#PageList1 ul li { list-style-type: none; display: inline-block; } #PageList1 a { display: block; overflow: hidden; margin-left: 2px; width:15px; height:2px; padding-bottom: 11px; font-family: Arial; padding-top: 2px; text-transform: uppercase; box-shadow:inset 15px 0 0px 0px #535233; color: transparent; text-align: center; font-size: 9px; transition: 0.5s; } #PageList1 a:hover { width: 130px; background: transparent; padding-left: 15px; background: #A5A36C; color: #F5F4D7; transition: 0.5s; }	#PageList1 ul li { list-style-type: none; display: inline-block; } #PageList1 a { margin-right: 4px; box-shadow: 0px 0px 0px 3px #838689; border: dashed 1px #CAD7B2; display: block; overflow: hidden; margin-left: 2px; width:25px; height: 5px; padding-bottom: 15px; padding-top: 5px; text-transform: uppercase; background: #838689; color: transparent; text-align: center; font-size: 12px; transition: 0.5s; } #PageList1 a:hover { width: 130px; box-shadow: 0px 0px 0px 3px #A8CABA; background: #A8CABA; border: dashed 1px #838689; color: #5D4157; transition: 0.5s; }PageList1 a:hover { width: 150px; background: #fa482e; border-radius: 0px; color: #ffcc88; border: 2px solid #ffcc88; transition: 0.5s; }

Strona pierwsza Strona druga Strona trzecia	Strona pierwsza Strona druga Strona trzecia	Strona pierwsza Strona druga Strona trzecia
#PageList1 a { display: block; overflow: hidden; width:20px; height:15px; padding-bottom: 5px; font-family: Georgia; box-shadow:inset 20px 0 0px 0px #971919; color: transparent; font-size:11px; transition: 0.5s; } #PageList1 a:hover { width: 130px; background: transparent; padding-left: 25px; color: #971919 !important; transition: 0.5s; }	#PageList1 ul li { list-style-type: none; display: inline-block; } #PageList1 a { display: block; overflow: hidden; width:25px; height: 10px; padding-bottom: 10px; font-family: Times; padding-top: 5px; text-transform: uppercase; background-image: url(http://orig03.deviantart.net/c25f/f/2012/196/7/b/subtle_linen_texture__repeatable__by_itsaustinjordan-d57d5w2.png); background-position: right top; color: transparent; text-align: center; font-size: 11px; border: 1px dotted black; box-shadow: 0px 0px 3px 0px black; transition: 0.5s; } #PageList1 a:hover { width: 140px; background-position: left bottom; color: silver; text-shadow: 0px 0px 2px 1px grey; transition: 1s; }	#PageList1 ul li { list-style-type: none; display: inline-block; } #PageList1 a { display: block; overflow: hidden; width:25px; height: 10px; padding-bottom: 10px; font-family: Arial; padding-top: 5px; color: transparent; text-align: center; font-size: 11px; border-radius: 50%; background: #97D38D; background: -webkit-radial-gradient(circle, #97D38D, #1E6912); background: -o-radial-gradient(circle, #97D38D, #1E6912); background: -moz-radial-gradient(circle, #97D38D, #1E6912); background: radial-gradient(circle, #97D38D, #1E6912); box-shadow: 0px 0px 3px 0px #0A4600; transition: 1s; } #PageList1 a:hover { width: 140px; color: #0A4600; transition: 1s; box-shadow: 0px 0px 7px 0px #0A4600; }

*** Mam szczerą nadzieję, że post przypadł Wam do gustu i skorzystacie z mojej instrukcji. Pamiętajcie o zapoznaniu się z zasadami. :)

© Paletton, itsAustinJordan