He creado una barra Social, y con ayuda de @Flowen se puede ocultar mediante un botón. La cosa es que he intentado cambiar de aspecto como me sugirió sin conseguirlo. Es el botón de abajo de la fila, el verde, que tiene un icono de una flecha que no se ve por que los estilos están en otro archivo muy extenso. A ver que debo hacer para que de primeras se vea el botón, y para volver a mostrar se vea una flechita ( > ) y moleste menos que el dicho botón. No se si debo hacerlo con css o javascript. Muestro el código. Gracias.
function ocultar(){
$(".lateral").hide();
$("#mostrar").show();
}
function mostrar(){
$(".lateral").show();
$("#mostrar").hide();
}
/* CREADO CON AYUDA DE @Flowen */
/* Estilos de las pestañas*/
#mostrar{
display:none;
}
*{
margin:0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.social{
position: fixed;
left:0;
top:200px;
z-index: 2000;
}
.social ul {
list-style: none;
}
/*.social ul li a {
display: inline-block;
color: #fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms;
-0-transition:all 500ms;
transition: all 500ms
}*/
.social ul li a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
color: #fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
.social ul li .icon-facebook {background: #3b5998 ;}
.social ul li .icon-twitter {background:#00abf0 ;}
.social ul li .icon-youtube {background:#F8030E ;}
.social ul li .icon-google {background: #d95232;}
.social ul li .icon-envelop {background: #666666 ;}
.social ul li .icon-blogger2 {background:#F88103 ;}
.social ul li .icon-chevron-left{background: #88F34F;}
.social ul li .icon-chevron-right{background: #88F34F;}
.social ul li a:hover{
padding: 10px 30px;
background: #000;
}
/* Estilos de las fuentes*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fk3lx7');
src: url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
url('fonts/icomoon.woff?fk3lx7') format('woff'),
url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-email:before {
content: "\e900";
}
.icon-info:before {
content: "\e901";
}
.icon-mail:before {
content: "\e902";
}
.icon-skype2:before {
content: "\e903";
}
.icon-linkedin-with-circle:before {
content: "\e904";
}
.icon-controller-fast-backward:before {
content: "\e913";
}
.icon-chevron-left:before {
content: "\e914";
}
.icon-chevron-right:before {
content: "\e915";
}
.icon-chevron-small-left:before {
content: "\e916";
}
.icon-chevron-small-right:before {
content: "\e917";
}
.icon-chevron-thin-left:before {
content: "\e918";
}
.icon-chevron-thin-right:before {
content: "\e919";
}
.icon-controller-fast-forward:before {
content: "\e91a";
}
.icon-game-controller:before {
content: "\e907";
}
.icon-globe:before {
content: "\e908";
}
.icon-info2:before {
content: "\e905";
}
.icon-location-pin:before {
content: "\e909";
}
.icon-magnifying-glass:before {
content: "\e90a";
}
.icon-mail3:before {
content: "\e906";
}
.icon-old-phone:before {
content: "\e90b";
}
.icon-paper-plane:before {
content: "\e90c";
}
.icon-price-tag:before {
content: "\e90d";
}
.icon-tablet:before {
content: "\e90e";
}
.icon-thumbs-up:before {
content: "\e90f";
}
.icon-google:before {
content: "\e910";
}
.icon-youtube3:before {
content: "\e911";
}
.icon-play:before {
content: "\e912";
}
.icon-envelop:before {
content: "\e945";
}
.icon-location:before {
content: "\e947";
}
.icon-location2:before {
content: "\e948";
}
.icon-bubbles4:before {
content: "\e970";
}
.icon-users:before {
content: "\e972";
}
.icon-cog:before {
content: "\e994";
}
.icon-cogs:before {
content: "\e995";
}
.icon-mail2:before {
content: "\ea84";
}
.icon-mail4:before {
content: "\ea86";
}
.icon-google-plus2:before {
content: "\ea8c";
}
.icon-google-plus3:before {
content: "\ea8d";
}
.icon-facebook:before {
content: "\ea90";
}
.icon-facebook2:before {
content: "\ea91";
}
.icon-telegram:before {
content: "\ea95";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-youtube:before {
content: "\ea9d";
}
.icon-youtube2:before {
content: "\ea9e";
}
.icon-github:before {
content: "\eab0";
}
.icon-blogger2:before {
content: "\eab8";
}
.icon-tumblr2:before {
content: "\eaba";
}
.icon-skype:before {
content: "\eac5";
}
.icon-linkedin:before {
content: "\eac9";
}
.icon-bubble2:before {
content: "\e96e";
}
.icon-fire:before {
content: "\e9a9";
}
.icon-lab:before {
content: "\e9aa";
}
.icon-magnet:before {
content: "\e9ab";
}
.icon-bin:before {
content: "\e9ac";
}
.icon-bin2:before {
content: "\e9ad";
}
.icon-briefcase:before {
content: "\e9ae";
}
.icon-airplane:before {
content: "\e9af";
}
.icon-truck:before {
content: "\e9b0";
}
.icon-road:before {
content: "\e9b1";
}
.icon-accessibility:before {
content: "\e9b2";
}
.icon-target:before {
content: "\e9b3";
}
.icon-shield:before {
content: "\e9b4";
}
.icon-power:before {
content: "\e9b5";
}
.icon-switch:before {
content: "\e9b6";
}
.icon-power-cord:before {
content: "\e9b7";
}
.icon-clipboard:before {
content: "\e9b8";
}
.icon-menu4:before {
content: "\e9c0";
}
.icon-cloud:before {
content: "\e9c1";
}
.icon-cloud-download:before {
content: "\e9c2";
}
.icon-cloud-upload:before {
content: "\e9c3";
}
.icon-cloud-check:before {
content: "\e9c4";
}
.icon-download2:before {
content: "\e9c5";
}
.icon-point-up:before {
content: "\ea03";
}
.icon-plus:before {
content: "\ea0a";
}
.icon-play2:before {
content: "\ea15";
}
.icon-play3:before {
content: "\ea1c";
}
.icon-backward2:before {
content: "\ea1f";
}
.icon-forward3:before {
content: "\ea20";
}
.icon-arrow-right:before {
content: "\ea34";
}
.icon-arrow-left:before {
content: "\ea38";
}
.icon-arrow-right2:before {
content: "\ea3c";
}
.icon-arrow-left2:before {
content: "\ea40";
}
.icon-circle-right:before {
content: "\ea42";
}
.icon-circle-left:before {
content: "\ea44";
}
.icon-google-plus:before {
content: "\ea8b";
}
.icon-facebook3:before {
content: "\ea92";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Social</title>
<link rel="stylesheet" href="redes.css">
<link rel="stylesheet" href="redes-fonts.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="social">
<ul>
<li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
<li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
<li><a href="http://www." class="icon-youtube lateral"></a></li>
<li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
<li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
<li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
<li><a href="#" class="icon-chevron-left lateral" onclick="ocultar()"></a></li>
<li><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar"></a></li>
</ul>
</div>
<script src="redes.js"></script>
</body>
</html>
/* Estilos de las pestañas*/
#mostrar{
display:none;
}
*{
margin:0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.social{
position: fixed;
left:0;
top:200px;
z-index: 2000;
}
.social ul {
list-style: none;
}
/*.social ul li a {
display: inline-block;
color: #fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms;
-0-transition:all 500ms;
transition: all 500ms
}*/
.social ul li a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
color: #fff;
background: #000;
padding: 10px 15px;
text-decoration: none;
-webkit-transition:all 500ms ease;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
.social ul li .icon-facebook {background: #3b5998 ;}
.social ul li .icon-twitter {background:#00abf0 ;}
.social ul li .icon-youtube {background:#F8030E ;}
.social ul li .icon-google {background: #d95232;}
.social ul li .icon-envelop {background: #666666 ;}
.social ul li .icon-blogger2 {background:#F88103 ;}
.social ul li .icon-chevron-left{background: #88F34F;}
.social ul li .icon-chevron-right{background: #88F34F;}
.social ul li a:hover{
padding: 10px 30px;
background: #000;
}
/* Estilos de las fuentes*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fk3lx7');
src: url('fonts/icomoon.eot?fk3lx7#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fk3lx7') format('truetype'),
url('fonts/icomoon.woff?fk3lx7') format('woff'),
url('fonts/icomoon.svg?fk3lx7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-email:before {
content: "\e900";
}
.icon-info:before {
content: "\e901";
}
.icon-mail:before {
content: "\e902";
}
.icon-skype2:before {
content: "\e903";
}
.icon-linkedin-with-circle:before {
content: "\e904";
}
.icon-controller-fast-backward:before {
content: "\e913";
}
.icon-chevron-left:before {
content: "\e914";
}
.icon-chevron-right:before {
content: "\e915";
}
.icon-chevron-small-left:before {
content: "\e916";
}
.icon-chevron-small-right:before {
content: "\e917";
}
.icon-chevron-thin-left:before {
content: "\e918";
}
.icon-chevron-thin-right:before {
content: "\e919";
}
.icon-controller-fast-forward:before {
content: "\e91a";
}
.icon-game-controller:before {
content: "\e907";
}
.icon-globe:before {
content: "\e908";
}
.icon-info2:before {
content: "\e905";
}
.icon-location-pin:before {
content: "\e909";
}
.icon-magnifying-glass:before {
content: "\e90a";
}
.icon-mail3:before {
content: "\e906";
}
.icon-old-phone:before {
content: "\e90b";
}
.icon-paper-plane:before {
content: "\e90c";
}
.icon-price-tag:before {
content: "\e90d";
}
.icon-tablet:before {
content: "\e90e";
}
.icon-thumbs-up:before {
content: "\e90f";
}
.icon-google:before {
content: "\e910";
}
.icon-youtube3:before {
content: "\e911";
}
.icon-play:before {
content: "\e912";
}
.icon-envelop:before {
content: "\e945";
}
.icon-location:before {
content: "\e947";
}
.icon-location2:before {
content: "\e948";
}
.icon-bubbles4:before {
content: "\e970";
}
.icon-users:before {
content: "\e972";
}
.icon-cog:before {
content: "\e994";
}
.icon-cogs:before {
content: "\e995";
}
.icon-mail2:before {
content: "\ea84";
}
.icon-mail4:before {
content: "\ea86";
}
.icon-google-plus2:before {
content: "\ea8c";
}
.icon-google-plus3:before {
content: "\ea8d";
}
.icon-facebook:before {
content: "\ea90";
}
.icon-facebook2:before {
content: "\ea91";
}
.icon-telegram:before {
content: "\ea95";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-youtube:before {
content: "\ea9d";
}
.icon-youtube2:before {
content: "\ea9e";
}
.icon-github:before {
content: "\eab0";
}
.icon-blogger2:before {
content: "\eab8";
}
.icon-tumblr2:before {
content: "\eaba";
}
.icon-skype:before {
content: "\eac5";
}
.icon-linkedin:before {
content: "\eac9";
}
.icon-bubble2:before {
content: "\e96e";
}
.icon-fire:before {
content: "\e9a9";
}
.icon-lab:before {
content: "\e9aa";
}
.icon-magnet:before {
content: "\e9ab";
}
.icon-bin:before {
content: "\e9ac";
}
.icon-bin2:before {
content: "\e9ad";
}
.icon-briefcase:before {
content: "\e9ae";
}
.icon-airplane:before {
content: "\e9af";
}
.icon-truck:before {
content: "\e9b0";
}
.icon-road:before {
content: "\e9b1";
}
.icon-accessibility:before {
content: "\e9b2";
}
.icon-target:before {
content: "\e9b3";
}
.icon-shield:before {
content: "\e9b4";
}
.icon-power:before {
content: "\e9b5";
}
.icon-switch:before {
content: "\e9b6";
}
.icon-power-cord:before {
content: "\e9b7";
}
.icon-clipboard:before {
content: "\e9b8";
}
.icon-menu4:before {
content: "\e9c0";
}
.icon-cloud:before {
content: "\e9c1";
}
.icon-cloud-download:before {
content: "\e9c2";
}
.icon-cloud-upload:before {
content: "\e9c3";
}
.icon-cloud-check:before {
content: "\e9c4";
}
.icon-download2:before {
content: "\e9c5";
}
.icon-point-up:before {
content: "\ea03";
}
.icon-plus:before {
content: "\ea0a";
}
.icon-play2:before {
content: "\ea15";
}
.icon-play3:before {
content: "\ea1c";
}
.icon-backward2:before {
content: "\ea1f";
}
.icon-forward3:before {
content: "\ea20";
}
.icon-arrow-right:before {
content: "\ea34";
}
.icon-arrow-left:before {
content: "\ea38";
}
.icon-arrow-right2:before {
content: "\ea3c";
}
.icon-arrow-left2:before {
content: "\ea40";
}
.icon-circle-right:before {
content: "\ea42";
}
.icon-circle-left:before {
content: "\ea44";
}
.icon-google-plus:before {
content: "\ea8b";
}
.icon-facebook3:before {
content: "\ea92";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Social</title>
<link rel="stylesheet" href="redes.css">
<link rel="stylesheet" href="redes-fonts.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="social">
<ul>
<li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook lateral"></a></li>
<li><a href="https://twitter.com/laparramiguel" class="icon-twitter lateral"></a></li>
<li><a href="http://www." class="icon-youtube lateral"></a></li>
<li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google lateral"></a></li>
<li><a href="mailto: [email protected]" class="icon-envelop lateral"></a></li>
<li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2 lateral"></a></li>
<li><a href="#" class="icon-chevron-left lateral" onclick="ocultar()"></a></li>
<li><a href="#" class="icon-chevron-right" onclick="mostrar()" id="mostrar"></a></li>
</ul>
</div>
</body>
</html>