0

Buenas. He creado una barra de contacto con las redes sociales siguiendo un tutorial. He visto en una web como tiene una pequeña flecha para ocultar esta barra y quisiera hacer lo mismo pero no si se hace con javascript o modificando el css que tengo valdría. Opcionalmente, me gustaría darle un aspecto mas llamativo, por ejemplo esquinas redondeadas , algo que le de un aspecto mas llamativo. Lo he intentado con css sin éxito. Conseguir ocultarlo seria ideal. Dejo la muestra de lo que he conseguido. Un saludo.

*{
    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 {
    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-info {background: #88F34F;}

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/*ARCHIVO QUE VIENE CON LOS ICONOS*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?t00qb8');
  src:  url('fonts/icomoon.eot?t00qb8#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?t00qb8') format('truetype'),
    url('fonts/icomoon.woff?t00qb8') format('woff'),
    url('fonts/icomoon.svg?t00qb8#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-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-switch:before {
  content: "\e9b6";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.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">
</head>
<body>

   <div class="social">
       <ul>
           <li><a href="https://www.facebook.com/profile.php?id=100009248037432" class="icon-facebook"></a></li>
           <li><a href="https://twitter.com/laparramiguel" class="icon-twitter"></a></li>
           <li><a href="http://www." class="icon-youtube"></a></li>
           <li><a href="https://plus.google.com/u/0/109747958435546403812" class="icon-google"></a></li>
           <li><a href="mailto: [email protected]" class="icon-envelop"></a></li>
           <li><a href="https://paseandoporlanubedelared.blogspot.com.es/" class="icon-blogger2"></a></li>
           <li><a href="http://www." class="icon-info"></a></li>

       </ul>
      
   </div>
</body>
</html>

2
  • 1
    wow, es muchísimo código para tan poco, para darle redondeado usas border-radius: valor y para hacerlo desaparecer, tienes muchas opciones, puedes usar display: none o visibility: hidden
    – ESCM
    Commented el 11 dic. 2017 a las 9:12
  • Creo que se puede hacer con javascript, usando un glyphicon 'fechita' como boton para esconder tu .social'
    – Juan L
    Commented el 11 dic. 2017 a las 9:14

1 respuesta 1

1

Para ocultarlo simplemente ponle una llamada a una función.

He añadido otro botón y pulsándolo llamo a ocultar().

He quitado algunos botones para que se vea el resultado en el snippet.

Para lor bordes redondeados puedes utilizar border-top-right-radius: 10px; border-bottom-right-radius: 10px;

EDITO: He añadido una clase común para todos los iconos que quieres ocultar (lateral). Y he puesto un último botón oculto, que funcione a la inversa que el resto. Se mostrará cuando el resto se oculte y al revés. De este modo puedes volver a sacar la barra lateral. A este botón puedes darle un aspecto diferente o más pequeño para que no moleste.

function ocultar(){
$(".lateral").hide();
$("#mostrar").show();
}
function mostrar(){
$(".lateral").show();
$("#mostrar").hide();
}
#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:0px;
    z-index: 2000;
}

.social ul {
    list-style: none;
}

.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; 
    -0-transition:all 500ms;
    transition: all 500ms;*/
}

.social ul li a {
    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-info {background: #88F34F;}

.social ul li a:hover{
    padding: 10px 30px;
    background: #000;
}

/*ARCHIVO QUE VIENE CON LOS ICONOS*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?t00qb8');
  src:  url('fonts/icomoon.eot?t00qb8#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?t00qb8') format('truetype'),
    url('fonts/icomoon.woff?t00qb8') format('woff'),
    url('fonts/icomoon.svg?t00qb8#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-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-switch:before {
  content: "\e9b6";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-plus:before {
  content: "\ea0a";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook3:before {
  content: "\ea92";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
</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="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="http://www." class="icon-info lateral"></a></li>
<li><a href="#" class="icon-info lateral" onclick="ocultar()"></a></li>
<li><a href="#" class="icon-info" onclick="mostrar()" id="mostrar"></a></li>
       </ul>
      
   </div>
</body>
</html>

7
  • Gracias, a ver si con tu aportación soy capaz de tener opción de volver a mostrar la barra. Me estoy dando cuenta que he formulado mal la pregunta, pues quería tener opción de ocultar y poder mostrar de nuevo. No se si crear otra pregunta. Gracias por el apoyo. Muchas gracias. Commented el 11 dic. 2017 a las 9:46
  • 1
    @MiguelEspeso He actualizado la respuesta para volver a mostrar la barra lateral. Un saludo
    – Flowen
    Commented el 11 dic. 2017 a las 9:53
  • Gracias, aqui funciona perfoectamente pero en mi navegador no consigo que el boton haga su funcion. No encuentro la clase (lateral) en el css. Bueno, seguire buscando de estoy haciendo mal. Gracias Commented el 11 dic. 2017 a las 10:36
  • 1
    La clase lateral la utilizo en el javascript. En el css no la utilizo. Al comienzo del css he añadido #mostrar{display:none;}. Por si es lo que te falla.
    – Flowen
    Commented el 11 dic. 2017 a las 10:40
  • 1
    Acuérdate de hacer referencia a tu archivo javascript. En los snippet de aquí no hay que añadirlas, al igual que tendrás la de los css.
    – Flowen
    Commented el 11 dic. 2017 a las 10:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.