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>
|
||||
<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/main.css" />
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<nav class="topnav">
|
||||
<ul>
|
||||
<p>bla</p>
|
||||
<p>First</p>
|
||||
<p>Second</p>
|
||||
<p>Third</p>
|
||||
<p>Fourth</p>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue