<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Responsive horizontal-scrollable menu</
title
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin
=
"anonymous"
>
<
style
>
.menubar {
background-color: green;
position: relative;
}
.menu {
display: inline-block;
width: auto;
vertical-align: middle;
}
.menu a {
color: white;
}
.menu a:hover {
background-color: white;
color:green;
}
.website_name {
display: block;
text-align: center;
position: relative;
}
body{
background-image: url(
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
/* To toggle the normal menu bar to
Horizontal-scrollable menu bar
when the window size reduced to particular size*/
@media (max-width: 72em)
{
.menu
{
display:block;
}
.menubar_top
{
position: relative;
padding: 0.5em;
}
.scrollable_links
{
position: absolute;
width: 100%;
background-color: transparent;
background-color: black;
}
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"menubar"
>
<
div
class
=
"pure-menu menu menubar_top"
>
<
a
href
=
"#"
class
=
"pure-menu-heading website_name"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
class="pure-menu pure-menu-horizontal pure-menu-scrollable
menu scrollable_links">
<
ul
class
=
"pure-menu-list"
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Home
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
HTML
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
CSS
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Javascript
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
React
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Angular
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Nodejs
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Express
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Mongodb
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
About
</
a
>
</
li
>
<
li
class
=
"pure-menu-item"
>
<
a
href
=
"#"
class
=
"pure-menu-link"
>
Contact
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>