15. Kody na menu

Przychodzę dziś z instrukcją na menu. Zdaję sobie sprawę, że czasem trudno wymyślić jakieś fajny wygląd menu i jego efekt po najechaniu. Samo zmienienie koloru czasem nie wystarcza, dlatego postanowiłam dać wam parę gotowych kodów. Trochę czasu zajęło mi zrobienie żywych podglądów w poście. Mam jednak nadzieję, że wszystko dobrze się wyświetla. 

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #e31546 ; display: block ; text-align: center ; font-weight: normal !important; margin: -7px ; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; position: relative ; left :0px ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { background: #440010 ; text-decoration: none !important ; left: 10px ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #0097a8; display: block ; margin: -7px ; font-weight: normal !important; text-align: center ; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; border: solid 2px #12daf2 ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { background: #12daf2 ; border-color: #0097a8 ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #3c751c; display: block ; margin: -7px ; text-align: center ; font-weight: normal !important; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; position: relative ; left :0px ; border-radius: 50px ; transform: rotateX(0deg); -o-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { { transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); background: #23300e ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { { background: #d6decd; color: #281b1b ; display: block ; margin: -7px ; text-align: center ; font-weight: normal !important; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; position: relative ; left :0px ; transform: rotateY(0deg); -o-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { transform: rotateY(180deg); -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); background: #3f2b2b ; color: #d6decd ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #e0dc00; color: #000 ; display: block ; margin: -7px ; font-weight: normal !important ; text-align: center ; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; position: relative ; left :0px ; transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { transform: scale(0.8); -o-transform: scale(0.8); -moz-transform: scale(0.8); -webkit-transform: scale(0.8); background: #fcfaa4 ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #162978; display: block ; margin: -7px ; font-weight: normal !important ; text-align: center ; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; box-shadow: 0px 0px #8d9fe8 inset, 0px 0px #8d9fe8 inset ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { box-shadow: 140px 0px #8d9fe8 inset, -140px 0px #8d9fe8 inset ; }

Strona1

Strona2

Strona3

Strona4

#PageList1 a, #PageList1 a:visited { background: #ff0000; display: block ; margin: -7px ; font-weight: normal !important ; text-align: center ; text-transform: uppercase ; font-size: 7px; letter-spacing: 2px ; padding: 5px ; box-shadow: 0px 0px #540000 inset, 0px 0px #540000 inset ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transtion:all 1s; } #PageList1 a:hover { box-shadow: 0px 20px #540000 inset, 0px -20px #540000 inset ; }

Mam nadzieję, że kody okażą się przydatne. Oczywiście to tylko część z nich. Mam w głowie jeszcze wiele pomysłów na wygląd menu, którymi podzielę się z Wami w najbliższej przyszłości. W razie pytań, próśb czy propozycji piszcie śmiało.