"Fixed left/right panel on hover"
Bootstrap 3.3.0 Snippet by gesper999

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <div class="container"> <div class="row"> <h1>For md and lg</h1> <p class="text-muted">First of all thanks to: <a href="http://bootsnipp.com/snippets/featured/left-sideways-panel-header"><small>Left Sideways Panel Header</small></a></p> <div id="leftSLideBar" class="hidden-xs hidden-sm"> <div class="panel panel-default"> <img alt="" src="http://spectr-forum.com/images/logo%20white.svg"> <div class="panel-leftheading"> <h3 class="panel-lefttitle">Регистрация и подписка</h3> </div> <div class="panel-rightbody"> <div> <i class="fa fa-user"></i> <p><a href="">Регистрация <br>участников</a></p> </div> <div> <i class="fa fa-envelope-o"></i> <p><a href="#">Подписка <br>на новости</a></p> </div> </div> <div class="clearfix"> </div> </div> </div> <div id="rightSLideBar" class="hidden-xs hidden-sm"> <div class="panel panel-default"> <div class="panel-leftheading"> <h3 class="panel-lefttitle"><i class="fa fa-mobile"></i> Мобильный гид<br> по конференциям</h3> </div> <div class="panel-rightbody"> <div> <img src="http://spectr-forum.com/images/eventlook-u14310.png" alt=""> </div> <div> <h4>Мобильный гид EventLook</h4> <p>Исчерпывающая и самая актуальная <br>информация о «Спектре-2015» теперь доступна всем участникам мероприятия в их мобильных устройствах</p> </div> <div id="botcell"> <a href="#"><img src="http://spectr-forum.com/images/google_play_logo.png" alt=""></a> <a href="#"><img src="http://spectr-forum.com/images/itunes-app-store-logo.png" alt=""></a> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>
.panel { background: transparent; border-color: transparent; border-radius: 0 26px 26px 0; box-shadow: none; color: #fff; height: 441px; margin-bottom: 20px; position: relative; width: auto; } .panel a { color: #fff; font-size: 24px; font-weight: 300; } .panel a:hover{ text-decoration: none; } .panel-rightbody i{ font-size: 40px; } .panel-default > .panel-leftheading { background: #D64A58; } .panel-leftheading { float: left; height: 100%; padding: 10px 15px; position: absolute; width: 42px; border-radius: 0 15px 15px 0; } .panel-lefttitle { position: absolute; -webkit-transform: rotate(270deg); -webkit-transform-origin: left top; -moz-transform: rotate(270deg); -moz-transform-origin: left top; -ms-transform: rotate(270deg); -ms-transform-origin: left top; -o-transform: rotate(270deg); -o-transform-origin: left top; transform: rotate(270deg); transform-origin: left top; } .panel-rightbody { background: #d64a58 none repeat scroll 0 0; display: none; float: left; height: 100%; margin-left: 42px; padding: 15px; width: 746px; border-radius: 0 25px 25px 0; } .panel-rightbody > div { display: table-cell; vertical-align: middle; text-align: center; } #leftSLideBar { left: -1px; position: fixed; top: 10px; } #leftSLideBar .panel-rightbody p { line-height: 17px; } #leftSLideBar .panel-rightbody i.fa { margin-bottom: 30px; } #leftSLideBar .panel-leftheading { opacity:0.8;} #leftSLideBar .panel-lefttitle { bottom: -20px; font-size: 23px; font-weight: 300; left: 0; line-height: 28px; padding-left: 77px; white-space: nowrap; } #leftSLideBar .panel.panel-default > img:first-child { height: 64px; opacity: 0.7; position: absolute; right: 53px; top: 37px; width: 169px; } #leftSLideBar:hover .panel-rightbody { display: table; } #rightSLideBar { right: 40px; position: fixed; top: 50px; } #rightSLideBar .panel-lefttitle{ bottom: 10px; font-size: 15px; font-weight: 300; margin-left: -12px; white-space: normal; width: 250px; } #rightSLideBar .panel-lefttitle i.fa{ display: block; float: left; font-size: 44px; padding-right: 11px; } #rightSLideBar .panel-leftheading { font-size: 15px; font-weight: 300; line-height: 15px; right: -47px; border-radius: 15px 0 0 15px; width: 49px; } #rightSLideBar .panel-rightbody{ width: 505px; background: #1bb4a4; position: relative; border-radius:10px 0 0 10px; border:1px solid #000; border-right: none; } #rightSLideBar .panel-rightbody > div{ vertical-align : top; } #rightSLideBar .panel{ height:247px;} #rightSLideBar .panel-rightbody h4 { font-size: 17px; font-weight: 700; line-height: 20px; text-align: left } #rightSLideBar .panel-rightbody p{ font-size: 12px; font-weight: 400; line-height: 14px; max-width: 264px; text-align: left; } #rightSLideBar:hover .panel-rightbody { display: table; } #rightSLideBar:hover .panel-leftheading { background:#1BB4A4; } #botcell { bottom: 17px; left: 74px; position: absolute; } #rightSLideBar:hover .panel-leftheading, #leftSLideBar:hover .panel-leftheading{ border-radius: 1px 1px 1px 1px; opacity: 1; } #rightSLideBar:hover .panel-leftheading{ border-top: 1px solid #000; border-bottom: 1px solid #000; }

Related: See More

Vue Argon Design System
Bootstrap Images to Left and Right with Text and Heading
Hover Effect Style
Different types of hover and transition effect.

Questions / Comments:

How to write code as the sidebar would also appear up the carasol.

Sayantan Nandy () - 8 years ago - Reply 0