我正在尝试制作一个简单的导航,它将在移动设备上提供,它是一个类似网格的布局。一排有两个街区,将有3排。有 5 个链接,所以总数是奇数。由于数字是奇数,我试图让当前页面类占据整个宽度,而不是连续有两个链接。
像这张非常粗糙的图:
或者如果链接 3 是当前页面:
目前我有一个基本的 5 链接列表。这是HTML:
<nav id="primary_nav">
<ul>
<li><a '. $this->getCurrentPage("contact") .' href="Contact">Contact</a></li>
<li><a '. $this->getCurrentPage("portfolio") .' href="Portfolio">Portfolio</a></li>
<li><a '. $this->getCurrentPage("resume") .' href="Resume">Resume</a></li>
<li><a '. $this->getCurrentPage("bio") .' href="Bio">Bio</a></li>
<li><a '. $this->getCurrentPage("index") .' href="Home">Home</a></li>
</ul>
</nav>
CSS:
#primary_nav ul {
list-style: none;
background: #1c1c1c;
padding: 5px 0;
}
#primary_nav li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
line-height: 2em;
height: 3em;
border-bottom: 1px solid #383838;
}
#primary_nav li:last-child a {
border-bottom: none;
}
#primary_nav li a:hover,
#primary_nav li a:focus {
color: #1c1c1c;
background: #ccc;
}