<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Hoverable Side Navigation with Icon</
title
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
/* Head banner team */
.banner {
text-align: center;
width: ;
}
h1 {
color: green;
}
/* styling sidebar */
.sidehoverbar a {
background-color: grey;
position: absolute;
font-size: 22px;
text-decoration: none;
Color: white;
padding: 10px;
border-radius: 0px 25px 25px 0px;
left: -190px;
transition: 0.5s;
opacity: 0.5;
}
/* Hover effect on sidebar */
.sidehoverbar a:hover {
left: 0px;
opacity: 1;
background-color: #4CAF50;
}
/* float icons*/
.sidehoverbar i {
float: right;
}
/* defining position of each nav bar */
.article {
top: 50px;
width: 210px;
height: 30px;
}
.Interview {
top: 110px;
width: 210px;
height: 30px;
}
.Scripter {
top: 170px;
width: 210px;
height: 30px;
}
.Suggested {
top: 230px;
width: 210px;
height: 30px;
}
.Practice {
top: 290px;
width: 210px;
height: 30px;
}
/* content margin */
.hoverable-topic {
margin-left: 55px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"banner"
>
<
h1
>GeeksforGeeks</
h1
>
<
p
>
A Online Computer Science
Portal for Geeks
</
p
>
</
div
>
<
div
class
=
"hoverable-topic"
>
<
h3
>Hoverable Side Navigation with Icon</
h3
>
<
p
>
There are many kind of sidebar, hoverable
sidebars are on them and quite popular.
You can easily create hoverable sidebar by
using the HTML and CSS only. To add extra
features may you need to add some jQuery.
But that totally depends on your
requirements.
</
p
>
</
div
>
<
div
class
=
"sidehoverbar"
>
<
a
href
=
"#"
class
=
"article"
>
Write an Article
<
i
class
=
"fa fa-edit"
></
i
>
</
a
>
<
a
href
=
"#"
class
=
"Interview"
>
Interview Experience
<
i
class
=
"fa fa-file-o"
></
i
>
</
a
>
<
a
href
=
"#"
class
=
"Scripter"
>
Technical Scripter
<
i
class
=
"fa fa-commenting"
></
i
>
</
a
>
<
a
href
=
"#"
class
=
"Suggested"
>
Suggested Topic
<
i
class
=
"fa fa-plus"
></
i
>
</
a
>
<
a
href
=
"#"
class
=
"Practice"
>
Coding Practice
<
i
class
=
"fa fa-laptop"
></
i
>
</
a
>
</
div
>
</
body
>
</
html
>