1<!-- How to create a navigation bar:
2 This is the html file:
3
4 Put the class="active" in the html file/page you are coding in
5 (e.g. put the class="active" in the Home.html file)
6 To position a page link to the right do class="right"
7-->
8<body>
9<ul class="topnav">
10 <li><a class="active" href="Home.html">Home</a></li>
11 <li><a href="Page1.html">Page1</a></li>
12 <li><a href="Page2.html">Page2</a></li>
13 <li class="right" ><a href="About.html">About</a></li>
14</ul>
15</body>
16
17<!-- This is the css file:
18 (have a play with the colours and features!)-->
19ul.topnav {
20 list-style-type: none;
21 margin: 0;
22 padding: 0;
23 overflow: hidden;
24 background-color: #333;
25 font-family: arial;
26 text-align: left;
27 width: 100%;
28 position: sticky;
29 top: 0;
30}
31ul.topnav li {float: left;}
32ul.topnav li a {
33 display: block;
34 color: white;
35 text-align: center;
36 padding: 14px 16px;
37 text-decoration: none;
38 float: left;
39 font-size: 17px;
40 border-right: 1px solid #bbb;
41}
42ul.topnav li a:hover:not(.active) {
43 background-color: #ddd;
44 color: black;
45}
46ul.topnav li a.active {
47 background-color: #4CAF50;
48}
49ul.topnav li.right {
50 float: right;
51}
52@media screen and (max-width: 720px) {
53 ul.topnav li{
54 width: 100%;
55 }
56 ul.topnav a{
57 width: 100%;
58 }
59}
60<!-- END -->
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Navbar</title>
6
7<style>
8body {
9margin: 0;
10}
11.navbar{
12padding: 15px;
13background-color: grey;
14display: flex;
15justify-content: space-between;
16font-size: 30px;
17text-decoration: none;
18color: #fff;
19}
20 .nav-item {
21 margin: 0;
22 padding: 0;
23 flex: 1;
24 max-width: 50%;
25 display: flex;
26 justify-content: space-evenly;
27 font-size: 25px;
28 }
29 .nav-link {
30 display: inline-block;
31 }
32 a{
33 text-decoration: none;
34 color: #fff;
35 }
36
37 @media (max-width: 715px) {
38 .nav-item {
39 flex-direction: column;
40 align-items: center;
41 }
42 .nav-link {
43 margin: 5px 0;
44 }
45 }
46</style>
47
48
49</head>
50<body>
51<nav class="navbar">
52 <a class="brand" href="">Navebar</a>
53 <ul class="nav-item">
54 <li class="nav-link"><a href="">Learn more</a></li>
55 <li class="nav-link"><a href="">About</a></li>
56 <li class="nav-link"><a href="">Contact</a></li>
57 </ul>
58 <a class="home" href="">Home</a>
59</nav>
60</body>
61</html>
1<!--Method 1: Using HTML5 Nav Tag-->
2<nav>
3 Thing1 |
4 Thing2 |
5 Thing3
6</nav>
7
8<!--Method 2: HTML5 + CSS3 with DIV element-->
9
10<ul class="topnav">
11 <li><a class="active" href="#">Thing 1</a></li>
12 <li><a href="#">Page 1</a></li>
13 <li><a href="#">Page 2</a></li>
14 <li class="right" ><a href="#">Thing 2</a></li>
15</ul>
16<style>
17
18 ul.topnav {
19 list-style-type: none;
20 margin: 0;
21 padding: 0;
22 overflow: hidden;
23 background-color: #333;
24 font-family: arial;
25 text-align: left;
26 width: 100%;
27 position: sticky;
28 top: 0;
29 }
30 ul.topnav li {float: left;}
31 ul.topnav li a {
32 display: block;
33 color: white;
34 text-align: center;
35 padding: 14px 16px;
36 text-decoration: none;
37 float: left;
38 font-size: 17px;
39 border-right: 1px solid #bbb;
40 }
41 ul.topnav li a:hover:not(.active) {
42 background-color: #ddd;
43 color: black;
44 }
45 ul.topnav li a.active {
46 background-color: #4CAF50;
47 }
48 ul.topnav li.right {
49 float: right;
50 }
51 @media screen and (max-width: 720px) {
52 ul.topnav li{
53 width: 100%;
54 }
55 ul.topnav a{
56 width: 100%;
57 }
58 }
59</style>
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Navigation</title>
9 <style>
10 .navbar{
11 background-color: black;
12 border-radius: 30px;
13
14 }
15 .navbar ul{
16 overflow: auto;
17 }
18 .navbar li{
19 float:left;
20 list-style: none;
21 margin: 13px 20px;
22
23 }
24 .navbar li a{
25 padding: 3px 3px;
26 text-decoration: none;
27 color: white;
28 }
29 .navbar li a:hover{
30 color: red
31 }
32 .search{
33 float: right;
34 color: white;
35 padding: 12px 75px;
36 }
37 .navbar input{
38 border: 2px solid black;
39 border-radius: 14px;
40 padding: 3px 17px;
41 width: 129px;
42 }
43 </style>
44</head>
45
46<body>
47 <header>
48 <nav class="navbar">
49 <ul>
50 <li><a href="#">Home</a></li>
51 <li><a href="#">About</a></li>
52 <li><a href="#">Services</a></li>
53 <li><a href="#">Contact us</a></li>
54 <div class="search">
55 <input type="text" name="search" id="search" placeholder="Search this website">
56 </div>
57 </ul>
58 </nav>
59 </header>
60</body>
61
62</html>
63
1<!-- HTML PART -->
2<a class="active" href="#home">Home</a>
3<a href="news.html">News</a>
4<a href="contact.html">Contact</a><a href="about.html">About</a>
5
6
7<!-- CSS PART -->
8
9.topnav a {
10 float: left;
11 color: goldenrod;
12 text-align: center;
13 padding: 14px 16px;
14 text-decoration: none;
15 font-size: 20px;
16 }
17
18 /* Change the color of links on hover */
19 .topnav a:hover {
20 background-color: rgb(221, 221, 221);
21 color: black;
22 }
23
24 /* Add a color to the active/current link */
25 .topnav a.active {
26 background-color: red;
27 color: goldenrod;
28 }