Horizontal Scroll Navigation Using HTML CSS

Horizontal Scroll Navigation Using HTML
CSS | Scrolling Menu Bar
How we can create a scrolling navigation bar using HTML and CSS? Solution:
Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.
Previously I have shared some types of Navbar, But this is different from others.
This menu has more content than its width, and all extra overflow materials are
hidden. We can access all the items by scrolling left or right, but I have disabled
the scrollbar. Now you can scroll using left and right arrow keys and in the phone,
you can slide easily.
Today you will learn to create a Horizontal Scrolling Menu Bar with Pure CSS &
HTML. In this menu, you have scroll left or right to see all the menu items. There are
no navigation buttons for PC users, they have to scroll by pressing buttons on
the keyboard. We also can add buttons but for that JavaScript is required, but I
want to create with Pure CSS.
So, Today I am sharing Horizontal Scroll Navigation Using HTML CSS. This
menu bar has a minimal design, some nav items with a fixed logo. You can use this
on your website after some customization. If you want then you can show the scroll
bar, I have hidden that element using CSS command.
If you are thinking now how this Scrolling Menu Bar actually is, then see
the preview given below.
Preview Of Horizontal Scrolling Menu Bar

See this video preview to getting an idea of how this menu looks like.
Video Player
00:00
00:08
Live Demo
Now you can see this visually, there also a button above for seeing it live. If you like
this, then get the source code of its.
You May Also Like:
 CSS Outline Styles

 HTML CSS Pagination Design
 3D Cube Carousel
 Custom Stylish Select Option
Horizontal Scroll Navigation Using

HTML CSS Source Code
Before sharing source code, Let’s talk about it. First I have created a main div and
placed all the nav item inside it. For creating horizontal scrolling I have put max-
height to hide some elements. And put box-sizing: border-box; in all the elements
using CSS * selector (info). After that, for creating scrolling effect used overflow-
x: auto; X for horizontal scrolling only.
For hiding the scroll bar I have used .scroll::-webkit-scrollbar {display: none;} , you
can visible the scroll bar by removing this line. There are left many basic CSS
properties like display, align, text, etc. I can explain all in writing, you will understand
easily after getting the codes.
For creating this menu you have to create only 2 files, one for HTML and one
for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
1 <!DOCTYPE html>
2 
3 <html lang="en" >
4 <head>
5 <meta charset="UTF-8">
6 <title>Horizontal Scroll Nav | Webdevtrick.com</title>
7
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body>
12
13 <div class="container nav">
14 <div class="info">On desktop control with left and right keys</div>
15 <header class="nav-header">
16 <span class="logo"><img src="http://pngimg.com/uploads/google/google_PNG19644.png"></span>
17 <nav class="middle scroll">
18 <span class="item">Home</span>
19 <span class="item">About</span>
20 <span class="item">Portfolio</span>
21 <span class="item">Pricing</span>
22 <span class="item">Services</span>
23 <span class="item">Contact</span>
24 <span class="item">Blog</span>
25 <span class="item">Help</span>
26 </nav>
27 </header>
28 </div>
29
30 </body>
31 </html>
style.css
Now create a CSS file named ‘style.css‘ and put the codes given here.
1 /** Code By Webdevtrick ( https://webdevtrick.com ) **/

2 *{
3 box-sizing: border-box;
4 user-select: none;
5 }
6 body {
7 max-width: 760px;
8 margin: 10vmin auto 0;
9 color: #fff;
10 line-height: 1.5;
11 }
12 .info{
13 text-align: center;
14 font-size: 24px;
15 color: #212121;
16 text-transform: capitalize;
17 }
18 .nav-header .logo {
19 width: 25%;
20 }
21 .nav-header nav {
22 width: 75%;
23 }
24 header {
25 background: #212121;
26 }
27 .nav-header {
28 border-radius: 5px;
29 }
30 .logo {
31 text-align: center;
32 border-right: 1px solid #4d4d4d;
33 padding: 12px 24px 13px;
34 }
35 .logo img {
36 width: 100%;
37 display: inline-block;
38 vertical-align: middle;
39 }
40 .item {
41 padding: 12px 16px 13px;
42 }
43 .item:not(:last-child) {
44 border-right: 1px solid #7e7e7e;
45 }
46 header,
47 nav {
48 font-size: 0;
49 }
50 .item {
51 font-size: 24px;
52 }
53 .logo,
54 .item,
55 .middle {
56 display: inline-block;
57 vertical-align: middle;
58 }
59 .scroll {
60 white-space: nowrap;
61 overflow-x: auto;
62 -webkit-overflow-scrolling: touch;
63 -ms-overflow-style: -ms-autohiding-scrollbar;
64 }
65 .scroll::-webkit-scrollbar {
66 display: none;
67 }
68 @media (max-width: 765px) {
69 .item {
70 font-size: 14px;
71 }
72 }
That’s It. Now you have successfully created Horizontal Scrolling Navigation Using
HTML CSS, Scroll Menu Bar. If you have any doubt or question comment down
below.

Horizontal Scroll Navigation Using HTML CSS

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Horizontal Scroll Navigation Using HTML CSS

Caricato da

Copyright:

Formati disponibili

Horizontal Scroll Navigation Using HTML

CSS | Scrolling Menu Bar

Preview Of Horizontal Scrolling Menu Bar

You May Also Like:

 CSS Outline Styles

Horizontal Scroll Navigation Using

1 / Code By Webdevtrick ( https://webdevtrick.com ) /

Potrebbero piacerti anche