Skip to content

Instantly share code, notes, and snippets.

@ff6347

ff6347/navbar.html

Forked from benweitzel/navbar.html
Created February 15, 2018 13:54
Show Gist options
  • Save ff6347/76cf697a4bd993d94be74da5cef391b3 to your computer and use it in GitHub Desktop.
Save ff6347/76cf697a4bd993d94be74da5cef391b3 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