Create top navigation bar
This commit is contained in:
parent
f40261c10a
commit
11c35a787b
2 changed files with 33 additions and 2 deletions
27
css/main.css
Normal file
27
css/main.css
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
/* Add a black background color to the top navigation */
|
||||||
|
.topnav {
|
||||||
|
background-color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the links inside the navigation bar */
|
||||||
|
.topnav p {
|
||||||
|
float: left;
|
||||||
|
color: #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change the color of links on hover */
|
||||||
|
.topnav p:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add a color to the active/current link */
|
||||||
|
.topnav p.active {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
|
@ -7,13 +7,17 @@
|
||||||
<title>Page Title</title>
|
<title>Page Title</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||||
<script src="main.js"></script>
|
<script src="main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<nav class="topnav">
|
||||||
<ul>
|
<ul>
|
||||||
<p>bla</p>
|
<p>First</p>
|
||||||
|
<p>Second</p>
|
||||||
|
<p>Third</p>
|
||||||
|
<p>Fourth</p>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue