How to hide the social media bar?

Navigation
0

Good morning. I have created a contact bar with social networks following a tutorial. I have seen on a website how it has a small arrow to hide this bar and I would like to do the same but not if it is done with javascript or modifying the css that I have would be worth it. Optionally, I would like to give it a more striking appearance, for example rounded corners, something that gives it a more striking appearance. I have tried with css without success. Getting to hide it would be ideal. I leave the sample of what I have achieved. Greetings. 

*{
    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>
    
asked by Miguel Espeso 11.12.2017 в 09:54
source

1 answer

1

To hide it simply put a call to a function.

I added another button and pressing it I call ocultar() .

I have removed some buttons to show the result in the snippet.

For rounded edges you can use border-top-right-radius: 10px; border-bottom-right-radius: 10px;

EDIT: I have added a common class for all the icons you want to hide ( lateral ). And I've put a last hidden button, which works the other way around the rest. It will be shown when the rest is hidden and vice versa. In this way you can return to remove the sidebar. To this button you can give a different or smaller aspect so that it does not bother. 

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>
    
answered by 11.12.2017 / 10:31
source
Checkboxs selected from MySQL database Postgresql Sub Query