Bootstrap snippet: Social navigation box

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<!-- Font awesome --> <script src="https://use.fontawesome.com/cb2d0db4c2.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 h col-xs-12"> <ul class="nav nav-tabs nav-justified"> <li class="border-bottom-active" role="presentation"> <a class="home" href="#home"> Home <span class="badge"> 12 </span> </a> </li> <li class="profile" role="presentation"> <a href="#profile"> Profile </a> </li> <li class="messages" role="presentation"> <a href="#messages"> Messages <span class="badge"> 3 </span> </a> </li> </ul> <div class="row "> <div class="col-md-12 "> <div class=" row" id="home"> <div class="col-md-12 "> <div class="row"> <div class="col-md-3 "> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> </div> <div class="col-md-9"> <div class="col-md-12 content"> <div class="list-group"> <a class="list-group-item " href="#"> <h4 class="list-group-item-heading"> Elio Zac </h4> <p class="list-group-item-text"> OMG! </p> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> </div> <div class="col-md-9"> <div class="col-md-12 content"> <div class="list-group"> <a class="list-group-item " href="#"> <h4 class="list-group-item-heading"> Clarence Etwood </h4> <p class="list-group-item-text"> Come here baby. </p> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> </div> <div class="col-md-9"> <div class="col-md-12 content"> <div class="list-group"> <a class="list-group-item " href="#"> <h4 class="list-group-item-heading"> Rick Stark </h4> <p class="list-group-item-text"> Bitch! </p> </a> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> </div> <div class="col-md-9"> <div class="col-md-12 content"> <div class="list-group"> <a class="list-group-item " href="#"> <h4 class="list-group-item-heading"> Frank Ziu! </h4> <p class="list-group-item-text"> Come on! </p> </a> </div> </div> </div> </div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous disabled"> <a href="#"> <span aria-hidden="true"> ← </span> Older </a> </li> <li class="next"> <a href="#"> Newer <span aria-hidden="true"> → </span> </a> </li> </ul> </nav> </div> <div class="row hidden tab" id="profile"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 text-center"> <a href=""> <img class="img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> <i aria-hidden="true" class="fa fa-wrench "> </i> </a> <h2>Mikel Row</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</p> </div> </div> </div> </div> <div class="row hidden tab" id="messages"> <div class="col-md-12 content"> <div class="row"> <div class="col-md-12 content"> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> <div class="media-body "> <h4 class="media-heading dropdown"> Marko Steve <button class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button"> <i class="fa fa-angle-down" id="box-options"> </i> </button> <ul aria-labelledby="box-options" class="dropdown-menu pull-right"> <li> <a href="#"> <i aria-hidden="true" class="fa fa-trash-o"> </i> Delete </a> </li> </ul> </h4> <p> Look around. Stop, look around again! </p> </div> </div> </div> <div class="col-md-12 content"> <div class="media "> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> <div class="media-body"> <h4 class="media-heading dropdown"> Luna Jun <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button"> <i class="fa fa-angle-down" id="box-options"> </i> </button> <ul aria-labelledby="box-options" class="dropdown-menu pull-right"> <li> <a href="#"> <i aria-hidden="true" class="fa fa-trash-o"> </i> Delete </a> </li> </ul> </h4> <p> Wait a moment. </p> </div> </div> </div> <div class="col-md-12 content"> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> <div class="media-body"> <h4 class="media-heading dropdown"> Jean Cyan <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button"> <i class="fa fa-angle-down" id="box-options"> </i> </button> <ul aria-labelledby="box-options" class="dropdown-menu pull-right"> <li> <a href="#"> <i aria-hidden="true" class="fa fa-trash-o"> </i> Delete </a> </li> </ul> </h4> <p> OH my god! </p> </div> </div> </div> <div class="col-md-12 content"> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img alt="img/boat.jpg" class="media-object img-circle" src="http://www.laesenciadelvino.com/img/bodegas/iconoContacto.jpg"/> </a> </div> <div class="media-body"> <h4 class="media-heading dropdown"> Daniel Orland <button aria-expanded="false" aria-haspopup="true" class="btn btn-xs btn-default dropdown-toggle pull-right" data-toggle="dropdown" type="button"> <i class="fa fa-angle-down" id="box-options"> </i> </button> <ul aria-labelledby="box-options" class="dropdown-menu pull-right"> <li> <a href="#"> <i aria-hidden="true" class="fa fa-trash-o"> </i> Delete </a> </li> </ul> </h4> <p> Hello? </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-8 "> </div> </div> </div>
.nav li a { border: none !important; } .border-bottom-active { border: none !important; border-bottom: 3px solid red !important; color: green; } .nav-tabs { margin-bottom: 30px; } .content { padding-bottom: 20px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom: 10px; /*border: 1px solid gray; background-color: ;*/ } .media-object { width: 64px; height: 64px; } #profile img { width: 180px; position: relative; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } #profile i { transition: opacity 0.5s linear; -webkit-transition: opacity 0.5s linear; opacity: 0.8; color: blue; font-size: 30px; position: absolute; top: 30%; left: 46%; } #profile a .fa-wrench { display: none; } #profile a:hover .fa-wrench { display: inline; color: red; } #profile a:hover img { opacity: 0.5; }
$(document).ready(function() { var menues = $(".nav li"); // manejador de click sobre todos los elementos menues.click(function() { // eliminamos active de todos los elementos menues.removeClass("border-bottom-active"); // activamos el elemento clicado. $(this).addClass("border-bottom-active"); }); }); $(document).ready(function() { $(".home").on("click", function() { $('#profile').addClass('hidden'); $('#messages').addClass('hidden'); $('#home').removeClass('hidden'); }); $(".profile").on("click", function() { $('#home').addClass('hidden'); $('#messages').addClass('hidden'); $('#profile').removeClass('hidden'); }); $(".messages").on("click", function() { $('#home').addClass('hidden'); $('#profile').addClass('hidden'); $('#messages').removeClass('hidden'); }); });
chubureitor

Social navigation box

chubureitor
  Sep 7th, 01:04
1.1K Views