-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstickySidebar.html
More file actions
215 lines (192 loc) · 5.35 KB
/
stickySidebar.html
File metadata and controls
215 lines (192 loc) · 5.35 KB
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
header{
background-color:#ee6664;
text-align:center;
padding:10px 0px;
}
header h1{
margin:0px;
font-size:26px;
color:#414141;
font-weight:1000;
font-family: 'Acme', sans-serif;
}
h1 span{
font-weight:400;
}
body{
font-family: "Open Sans", arial;
color:#fff;
background: #666c82;
margin:0;
}
.flex{
display:flex;
}
nav{
margin-top:15px;
background:#DAF7A6;
height:100%;
width:250px;
box-shadow:4px 4px 4px #3C3F35;
border-radius:5px;
margin-left:1%;
position:sticky;
position:-webkit-sticky;
top:20px;
}
nav a {
text-decoration:none;
color:BLACK;
font-size: 16px;
display:block;
border-bottom:1px solid #03A2A2;
}
nav a:hover{
color:#fff;
background-color:#3863F4;
}
.fa {
position: relative;
top:12px;
width: 70px;
height: 36px;
text-align: center;
font-size:20px;
}
nav span {
position:relative;
top:12px;
}
.logo{
position:relative;
top:0px;
padding:1px;
background-color:#CCF581;
color:#07145D;
font-family: 'Big Shoulders Display', cursive;
text-align:center;
line-height: 0.8;
}
.logo p{
color:black;
}
.contents{
background-color:#3E414F;
padding:15px 30px;
width:75%;
margin:15px 3%;
box-shadow:4px 4px 4px #3C3F35;
border-radius:5px;
}
.contents h3{
border-bottom: 1px solid grey;
padding-bottom:10px;
font-family: 'Shadows Into Light', cursive;
margin-bottom: 20px
}
.contents p{
text-align:justify;
margin-bottom:50px;
line-height:2;
}
footer{
background:#323232;
padding:10px;
height:25px;
}
.left{
float:left;
margin-left:3%;
}
.right{
display:inline-block;
float:right;
margin-right:3%;
}
.right a{
color:white;
margin-right:8px;
text-decoration:none;
}
.right a:hover{
border-bottom: 2px solid white;
}
</style>
</head>
<body>
<header>
<h1><span>Sticky Sidebar Menu </span>Using Only CSS</h1>
<h3>W3Codepen-- Where we Hone your web skill</h3>
</header>
<div class="flex">
<nav>
<a class="logo" href="#">
<h2>W3Codepen</h2>
<p>Sticky Sidebar Menu</p>
</a>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span>Home</span>
</a>
<a href=" #">
<i class="fa fa-user fa-lg"></i>
<span>Profile</span>
</a>
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span>E-mail</span>
</a>
<a href="#">
<i class="fa fa-html5 fa-lg"></i>
<span>HTML5</span>
</a>
<a href="#">
<i class="fa fa-css3 fa-lg"></i>
<span>CSS3</span>
</a>
<a href="#">
<i class="fa fa-book fa-lg"></i>
<span>How to</span>
</a>
<a href=" ">
<i class="fa fa-cog fa-lg"></i>
<span>Setting</span>
</a>
<a href="#">
<i class="fa fa-question-circle fa-lg"></i>
<span>Help</span>
</a>
</nav>
<div class="contents">
<h1>Sticky Sidebar Tutorial</h1>
<p>Sticky sidebar nav menu has it's hybrid position combined as relative and fixed. Normally the sidebar behaves like a normal element with its position:relative property. But as we scroll up the cotent, the sidebar moves up a certain portion and then sticks as it reaches a threshold point. For that we will be using property:sticky which is relatively new concept to CSS3.</p>
<h3> Introduction</h3>
<p>Let's briefly understand what we are going to develop in this tutorial as a sticky navbar menu using html and CSS. We will have a basic header footer and contents with sidebar fixed to the side in this example. Now as we scroll up you can see that the every elements on the page gets scrolled up. But as the sidebar reaches a threshold point, it gets stuck to that point and while others move, the nav menu doesn't. We will be building this sticky feature of sidebar nav menu which gets fixed when we scroll using simple HTML and CSS. </p>
<h3>HTML -- HyperText Markup Language</h3>
<p>We have used HTML and CSS to develop sticky sidebar Menu, in this tutorial. We've made use of sticky positioning for that purpose</p>
<h3>CSS -- Cascading StyleSheet</h3>
<p>we will be using property:sticky which is relatively new concept to CSS3.Sticky sidebar nav menu has it's hybrid position combined as relative and fixed.</p>
<h3>JS -- JavaScript</h3>
<p> We will be not be making use of JavaScript at all. All our development process will revolve around HTML and CSS only. Though you can make use of javaScript as you prefer.</p>
<h3>Position:Sticky</h3>
<p>Sticky position is a combination of relative postiioning and fixed positioning. When an element is declared as sticky postion. We need to add other property top, left, right or bottom to set a threshold from which the element gets stick as we scroll up the contents. This position is relatively new to CSS3 and so most developers have been using Javascript for sticky position of element. As this position took a long time to get browser support. Still it is n't supported by internet explorer or edge 15 and earlier versions. To support it in safari we need to add vendor prefix -webkit-.</p>
</div>
</div>
<footer>
<div class="left">
Copyright ©2019 w3CodePen | Powered by Pacific SoftTech
</div>
<div class="right">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Privacy Policy</a>
</div>
</footer>
</body>
</html>