Dobry wieczór,
Znalazłem fajny sidebar, tyle że był z prawej strony a ja chcę z lewej, wszystko pozmieniałem, jest elegancko, teraz tylko głowię się nad tym jak przesunąć ten kolorowy kwadrat po najechaniu na którąś opcje, chcę by był pod ikonkami (ikonki na nim) i ikony w centrum. Oraz jak zrobić by własnie ten kwadrat o którym mowa zachowywał się jak link? Chcę by cały element wysuwany był linkiem.(ikona tez)
html;
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="author" content="PROFF"/>
<title>PROFF-Code</title>
<meta name="description" content="Pasja informatyki, nauka, programowanie, html"/>
<meta name="keywords" content= "www,html,pasja,informatyki"/>
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div id="bg"></div>
<ul id="fs-links">
<li id="fs-links-steam">
<i class="fa fa-steam"></i>
<a href="#link-do-fb"></a>
</li>
<li id="fs-links-youtube">
<i class="fa fa-youtube"></i>
<a href="#link-do-twittera"></a>
</li>
<li id="fs-links-twitch">
<i class="fa fa-twitch"></i>
<a href="#link-do-google"></a>
</li>
</ul>
<body>
css;
body{ background-color: gray;}
/* Floating Social Links */
#fs-links * {
box-sizing: border-box; /* Grubość borderów nie będzie dodawana do rozmiaru bloku */
}
/* Główny kontentr linków - lista ul */
#fs-links {
list-style-type: none; /* usunięcie punktora listy */
margin: 0; /* reset marginesów zewnętrznych */
padding: 0; /* reset marginesów wewnętrznych */
position: fixed; /* 'przykleja' linki do okna przegladarki - podczas przewijania strony, linki pozostaną w tym samym miejscu */
left: 0; /* odległość linków od lewej krawędzi okna przeglądarki - pozycjonuje slider po lewej stronie */
font-size: 0; /* usuwa odstępy pomiędzy elementami listy */
top: 17%; /* odległość linków od górnej krawędzi okna przeglądarki */
}
/* Element listy - li */
#fs-links li {
margin-bottom: 5px; /* zewnętrzny, dolny margines elementu listy - odstępy pomiędzy linkami */
position: relative; /* nadaje elementowi listy pozycjonowanie relatywne */
left: -20px; /* Pozycjonuje linki (ich część tekstową) poza widocznym obszarem strony -
* tutaj ustawiamy długość linków, jeżeli zmienimy tę wartość,
* trzeba również zmienić width w #fs-links li a
*/
/* Płynne wyjechanie linku */
-webkit-transition: all .5s ease; /* prędkość i rodzaj animacji */
-o-transition: all .5s ease; /* prędkość i rodzaj animacji */
transition: all .5s ease; /* prędkość i rodzaj animacji */
}
/* Efekt po najechaniu kursorem na link */
#fs-links li:hover {
left: 0; /* Po najechaniu kursorem wskazany link w całości powinien pokazać się w widocznej części okna przeglądarki - raczej nie należy zmieniać */
}
/* Link właściwy */
#fs-links li a {
display: inline-block; /* zmienia sposób wyświetlania elementu listy */
height: 40px; /* wysokość linku */
line-height: 40px; /* wysokość lini - pozycjonowanie tekstu linku w pionie - powinien być taki sam jak wysokość linku */
border: solid #114400 1px; /* rodzaj, kolor i grubość obramowania, dla pełnego efektu border w #fs-links li i powinno być takie samo */
border-left: none; /* usuwa lewą linię obramowania */
width: 30px; /* Długość linków */
background: #303030; /* tło pod linkiem */
}
/* Ikona */
#fs-links li i {
display: inline-block;
border: solid #114400 1px; /* Styl obramowania */
border-right: none; /* Usunięcie obramowania z prawej strony */
height: 40px; /* Wysokość ikony - najlepiej, aby była równa wysokości linka */
line-height: 40px; /* Wyrównanie wertykalne - powinno być równe wysokości ikony */
width: 40px; /* szerokość ikony */
text-align: center; /* wyrównanie horyzontalne ikony - środkowanie */
font-size: 18px; /* rozmiar ikony */
vertical-align: top;
font-size: 22px; /* rozmiar ikony */
color: #fff; /* kolor ikony */
position: relative;
padding-left: 30px;
background: #303030; /* Tło ikony */
}
/* Obramowanie ikony */
#fs-links li i:after {
content: "";
display: block;
border: solid #303030 1px;
position: absolute;
top: 3px; bottom: 3px; left: 3px; right: 3px; /* dzięki temu obramowanie ikony mieści się idealnie w środku */
background: #303030; /* tło koła */
z-index: -1; /* ustawia warstwę z tłem koła poniżej ikony */
}
/* Link: steam */
#fs-links-steam:hover i:after {
background: #44629e;
border-color: #44629e;
}
/* Link: youtube */
#fs-links-youtube:hover i:after {
background: #48c8f1;
border-color: #48c8f1;
}
/* Link: twitch*/
#fs-links-twitch:hover i:after {
background: #dd4b39;
border-color: #dd4b39;
}
