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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

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

Sayantan Nandy () - 8 years ago - Reply 0