
In this tutorial, I explore two different methods for creating a Vertical menu & Horizontal Navigation Bar using HTML CSS. The snippet is responsive.
First, we will learn how to create a Horizontal Navigation Bar using HTML CSS.
Let’s start with the HTML. We have a simple unordered list <ul><li></li></ul> of hyperlinks. Each list item has a classname.
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 |
<div class="navigation"> <nav id="navmenu"> <ul> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a> <ul> <li><a href="#">SERVICES 1</a> <ul> <li><a href="#">ITEM 1</a></li> <li><a href="#">ITEM 2</a></li> </ul> </li> <li><a href="#">SERVICES 2</a> <ul> <li><a href="#">ITEM 1</a></li> <li><a href="#">ITEM 2</a></li> </ul> </li> </ul> </li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> |
We will be clearing out the margin and padding on the body.
1 2 3 4 5 6 |
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-decoration: none; } |
Subsequently, we’ll style the list to hide the bullets and provides it a background color. Clearing the margin will make it hug the top of the page which we need.
We will write the style CSS for ul inside the #navmenu.
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 |
body { font-family: Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; text-decoration: none } .navigation { background: #610702; } nav { position: relative; width: 100%; margin: 0 auto; } ul { margin-bottom: 0px; } #navmenu, #navmenu ul, #navmenu ul li, #navmenu ul li a, #navmenu #navmenu:after, #navmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } #navmenu #head-mobile { display: none } #navmenu > ul > li { float: left } #navmenu > ul > li > a { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #ddd; font-weight: 700; } #navmenu > ul > li:hover > a, #navmenu ul li.active a { color: #fff } #navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover { background: #c10d03!important; -webkit-transition: background .3s ease; -ms-transition: background .3s ease; transition: background .3s ease; } #navmenu > ul > li.has-sub > a { padding-right: 30px } #navmenu ul ul { position: absolute; left: -9999px; z-index: 999; } #navmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; background: #610702; border-bottom: 1px solid rgb(204 204 204 / 23%); transition: all .25s ease } #navmenu ul ul li:hover { } #navmenu li:hover > ul { left: auto } #navmenu li:hover > ul > li { height: 35px } #navmenu ul ul ul { margin-left: 100%; top: 0 } #navmenu ul ul li a { padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400; } #navmenu ul ul li:last-child > a, #navmenu ul ul li.last-item > a { border-bottom: 0 } #navmenu ul ul li:hover > a, #navmenu ul ul li a:hover { color: #fff } #navmenu ul ul li.has-sub:hover, #navmenu ul li.has-sub ul li.has-sub ul li:hover { background: #c10d03; } #navmenu ul ul ul li.active a { border-left: 1px solid #333 } #navmenu > ul > li.has-sub > ul > li.active > a, #navmenu > ul ul > li.has-sub > ul > li.active> a { border-top: 1px solid #333 } |
Final code: The following is the combination of all of the above HTML and CSS code snippets.
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Navigation Bar | HTML CSS3 Tutorials</title> <style> body { font-family: Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; text-decoration: none } .navigation { background: #610702; } nav { position: relative; width: 100%; margin: 0 auto; } ul { margin-bottom: 0px; } #navmenu, #navmenu ul, #navmenu ul li, #navmenu ul li a { border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } #navmenu:after, #navmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } #navmenu > ul > li { float: left } #navmenu > ul > li > a { padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #ddd; font-weight: 700; } #navmenu > ul > li:hover > a, #navmenu ul li.active a { color: #fff } #navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover { background: #c10d03!important; -webkit-transition: background .3s ease; -ms-transition: background .3s ease; transition: background .3s ease; } #navmenu > ul > li.has-sub > a { padding-right: 30px } #navmenu ul ul { position: absolute; left: -9999px; z-index: 999; } #navmenu ul ul li { height: 0; -webkit-transition: all .25s ease; -ms-transition: all .25s ease; background: #610702; border-bottom: 1px solid rgb(204 204 204 / 23%); transition: all .25s ease } #navmenu ul ul li:hover { } #navmenu li:hover > ul { left: auto } #navmenu li:hover > ul > li { height: 35px } #navmenu ul ul ul { margin-left: 100%; top: 0 } #navmenu ul ul li a { padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400; } #navmenu ul ul li:last-child > a, #navmenu ul ul li.last-item > a { border-bottom: 0 } #navmenu ul ul li:hover > a, #navmenu ul ul li a:hover { color: #fff } #navmenu ul ul li.has-sub:hover, #navmenu ul li.has-sub ul li.has-sub ul li:hover { background: #c10d03; } #navmenu ul ul ul li.active a { border-left: 1px solid #333 } #navmenu > ul > li.has-sub > ul > li.active > a, #navmenu > ul ul > li.has-sub > ul > li.active> a { border-top: 1px solid #333 } </style> </head> <body> <section class="py-2" style="border-bottom: 1px solid #e6e1e1;"> <div class="container"> <div class="row"> <div class="col-md-9 py-3 shadow-sm"> <img src="#" alt="HTML CSS3 Tutorials" /> </div> <div class="col-md-3 py-3 shadow-sm"> <a href="#" class="btn btn-primary">Back to Tutorial</a> </div> </div> </div> </section> <section class="navigation"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="navigation"> <nav id="navmenu"> <ul> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a> <ul> <li><a href="#">SERVICES 1</a> <ul> <li><a href="#">ITEM 1</a></li> <li><a href="#">ITEM 2</a></li> </ul> </li> <li><a href="#">SERVICES 2</a> <ul> <li><a href="#">ITEM 1</a></li> <li><a href="#">ITEM 2</a></li> </ul> </li> </ul> </li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </div> </div> </div> </section> </body> </html> |
Now we will write the HTML and CSS code for the vertical navigation bar. The HTML code looks like.
To create a vertical navigation bar, we can style the <a> elements inside the unordered list <ul>.
1 2 3 4 5 6 |
<ul class="vertical"> <li><a href="#">Home</a></li> <li><a class="active" href="#">About Us</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> |
display: block; – Displaying the hyperlinks as block parts make the entire hyperlink area clickable.
active class: Add an “active” class to the hyperlink to highligt the current page.
1 2 3 4 |
.vertical li a.active { background-color: #c10d03; color: #fff; } |
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 |
.vertical { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #efefef; position: fixed; height: 100%; overflow: auto; } .vertical li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } .vertical li a.active { background-color: #c10d03; color: #fff; } .vertical li a:hover { background-color:#020202; color: #fff; } |
Conclusion
We hope the vertical navigation bar using HTML and CSS is quite a simple tutorial.