-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstickyMenu.html
129 lines (107 loc) · 3.92 KB
/
stickyMenu.html
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
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<style>
.sticky-section{
overflow:hidden;
background-color:#09689E;
margin-bottom:50px;
width:100%;
color:white;
position:-webkit-sticky;
position:sticky;
top:0px;
}
nav a{
float:right;
text-decoration:none;
color:white;
font-size:18px;
padding: 20px 30px;
display:inline-block;
transition: all 0.5s ease 0s;
}
body {
margin: 0;
padding: 0;
}
#logo{
font-size:20px;
font-weight:bold;
float:left;
padding: 15px 15px;
margin-left:16%;
}
nav{
margin-right:17%;
}
header{
background-color:#DAF7A6;
text-align:center;
padding:40px 0px;
}
header h1{
margin:0px;
font-size:26px;
color:#414141;
font-weight:1000;
font-family: 'Acme', sans-serif;
}
h1 span{
font-weight:400;
}
nav a:hover{
background-color:#002e5b;
color:wheat;
}
.content{
margin: 50px 17%;
}
.content h3{
border-bottom: 1px solid grey;
padding-bottom:10px;
font-family: 'Shadows Into Light', cursive;
margin-bottom: 20px
}
.content p{
text-align:justify;
margin-bottom:50px;
line-height:2;
}
</style>
</head>
<body>
<header>
<h1><span>Sticky Navigation Menu </span>Using Only CSS</h1>
<h3>W3Codepen-- A place to nurture Your Web Skills</h3>
</header>
<div class="sticky-section">
<div id="logo">W3Codepen</div>
<nav>
<a href='#JavaScript'>JavaScript</a>
<a href="#CSS">CSS</a>
<a href="#HTML">HTML</a>
<a href="#logo">Home</a>
</nav>
</div>
<div class="hello">
xyo
</div>
<div class="content">
<h1>Sticky Navbar Tutorial</h1>
<p>Sticky positioned elements is a combination of relative and fixed positioning. Lets understand what that means. When a element is positioned as sticky with CSS3, a threshold value is also added along it. Initially the element behaves like a normal Relative positioned element. Now as you scroll your webpage, when the page reaches the set threshold the element gets stick to that positioned and so the position behavior changes from relative to fixed.</p>
<h3> Introduction</h3>
<p>Lets briefly understand what we are going to develop. Simple as that, we will have a navigation bar fixed at a certain position. Now as your scroll your page, the navbar scrolls as well. Now obviously, we don't want to hide our navbar from user coz' that is the guide to browse across our page. So instead of letting the navbar scroll beyond the browser viewport, we will be sticking the navigation bar to the top. And as you scroll up your contents gets scrolled up while the bar will always be visible at the top. Now lets see what are we going to use for the development</p>
<h3>HTML -- HyperText Markup Language</h3>
<p>In this tutorial, We have used HTML and CSS to develop sticky navigation Menu. We've made use of sticky positioning for that purpose</p>
<h3>CSS -- Cascading StyleSheet</h3>
<p>Sticky position is relatviely new to CSS. This is just a hybrid form of relative and fixed position which changes at a preset threshold.</p>
<h3>JS -- JavaScript</h3>
<p>This tutorial teaches the development of sticky navigation bar with just HTML and CSS. We will be making no use of JavaScript at all. Though most web developers use JavaScript for sticky navigation menu since the sticky concept on
CSs is relatively new.</p>
<h3> Web Development Introduction</h3>
<p>It's Amazing how Web has reached to every corner of the world flourishing the infromation. Imagine how our life could have been, had there not been websites to search visit when you are in deperate need for answers or when you are bored. I find myself engrossed in this web entagnlement and get amazed at this wonderous achievement of human. If you are reading this portion, Then seriously? What's wrong with You? Focus on Development Section. Not within these Paragraphs. These are Just some Fillers</p>
</div>
</body>
</html>