Skip to content

Instantly share code, notes, and snippets.

@macloo
Last active December 16, 2015 02:38
Show Gist options
  • Save macloo/5363602 to your computer and use it in GitHub Desktop.
Save macloo/5363602 to your computer and use it in GitHub Desktop.
A CodePen by Mindy McAdams. Simple Horizontal Nav - Buttons in a row, suitable for top navigation on a website
<!-- Simple navigation button set
Not responsive
Aligns to right -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li id="inactive-link">About</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Websites</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="clearfix"> </div>
body {
background: #accfcc;
color: #000;
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
padding: 40px;
}
/* --- Top Navigation Styles --- */
#nav {
float: right;
width: 100%;
background: #accfcc; /* transparent */
padding: 30px 0 8px 0;
}
#nav ul {
float: right;
list-style: none;
font-size: 140%;
}
#nav li {
float: left;
width: 130px;
margin-left: 8px;
text-align: center;
}
#nav a {
display: block;
width: 128px;
padding: 8px 0;
text-decoration: none;
border: 1px solid #819b99;
background: transparent;
color: #819b99;
}
#inactive-link {
display: block;
padding: 8px 0;
text-decoration: none;
border: 1px solid #819b99;
background: #dcd7ce;
color: #819b99;
}
#nav a:hover {
border: 1px solid #fff;
background: #819b99;
color: #fff;
}
.clearfix {
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment