Skip to content

Instantly share code, notes, and snippets.

@nphillips78

nphillips78/navbar.html

Forked from benweitzel/navbar.html
Created November 29, 2017 23:44
Show Gist options
  • Save nphillips78/e3936a126e890cb8ce05bea27eef4efe to your computer and use it in GitHub Desktop.
Save nphillips78/e3936a126e890cb8ce05bea27eef4efe to your computer and use it in GitHub Desktop.
Download ZIP
A simple HTML and CSS navigation bar that is extremely easy to customize.
Raw
navbar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="http://github.com">Link 1</a></li>
<li><a href="http://github.com">Link 2</a></li>
<li><a href="http://github.com">Link 3</a></li>
<li><a href="http://github.com">Link 4</a></li>
<li><a href="http://github.com">Link 5</a></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment