Claire_ 
Blogger.Klub
Dołączyła: 14 Lut 2013
Posty: 42
|
Wysłany:
2014-08-30, 18:35 Jak do nieruchomego menu dodać gadżet HTML?
|
|
|
Cześć,
właśnie dziś stworzyłam na swoim blogu nieruchome menu, które przewija się wraz z całą stroną. Chciałabym jednak aby znalazło się w nim również miejsce dla ikon społecznościowych. Niestety - nie mam absolutnie pojęcia jak mogę je przypisać do tego elementu.
Menu zostało zrobione dzięki kodom CSS i wygląda tak:
Kod #PageList1 {
z-index: 10;
}
#PageList1 ul {
background: #FFFFFF;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
border-bottom: 1px
solid
}
#PageList1 ul li {
float: none;
display: inline;
}
#PageList1 li a:link, #PageList1 li a:visited {
text-transform: uppercase;
color: #000000;
padding: 10px 20px;
font-family: 'arial', serif; font-size: 20px;
font-weight: 500;
}
#PageList1 li a:hover {
color: #FF0080;
background: #FFFFFF;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s
}
A kod HTML dla ikon społecznościowych tak:
Kod <style> #social a:hover {background-color: transparent; opacity:0.1;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <div id="social"> <center><a href=" https://www.facebook.com/pages/Książkowo-świat-domowej-biblioteczki/321826507939474?ref=ts&fref=ts" target=" target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Facebook-48.png" border="0" alt="FB" /></a><a href=" https://twitter.com/jagoda_anna " target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Twitter-48.png" border="0" alt="Twitter" /></a ><a href=" http://instagram.com/jagodaanna?ref=badge " target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Intsagram-48.png" border="0" alt="link" /><a href="mailto:j.galeza@wp.pl" target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Mail-48.png" border="0" alt="email" /></a></a></center></div>
Czy moglibyście mi pomóc? Bardzo proszę 
|
|
FAQ
Szukaj
Użytkownicy
Blogger Polska!
Rejestracja
Zaloguj
