<h1>Fluid-width Navigation Using display: table</h1>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="contact.html">Contact</a></li>
<li id="x" class="x"><a href="privacy.html">Privacy</a></li>
</ul>
</nav>
<button id="btn_add">Add Item</button> <button id="btn_remove" class="d" disabled>Remove Item</button>
<p class="p">Demo by Dan Rose. <a href="http://www.sitepoint.com/">See article</a>.</p>
body {
font-family: Arial, sans-serif;
padding: 4px;
text-align: center;
}
h1 {
text-align: center;
font-weight: normal;
}
nav {
background: #f0f0f0;
border: 1px solid #ccc;
border-right: none;
width: 100%;
margin-bottom: 20px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #616161;
padding: 10px 0;
}
nav {
display: table;
table-layout: fixed;
}
ul {
display: table-row;
}
ul li {
display: table-cell;
}
.x {
display: none;
}
.p {
text-align: center;
font-size: 14px;
margin-top: 80px;
}
.d {
color: #ccc;
}
@media (max-width: 430px) {
nav {
font-size: .8em;
}
nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
}
var ba = document.getElementById('btn_add'),
br = document.getElementById('btn_remove'),
x = document.getElementById('x');
ba.addEventListener('click', function () {
x.className = '';
ba.disabled = 'disabled';
ba.className = 'd';
br.className = '';
br.disabled = '';
}, false);
br.addEventListener('click', function () {
x.className = 'x';
ba.disabled = '';
ba.className = '';
br.className = 'd';
br.disabled = 'disabled';
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.