Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

响应式 导航栏交叉设计

  导航栏是一个页面中最重要的部分之一,它强硬地占据了屏幕的一部分,这使得在响应式下的设计变困难了。当导航项多时要如何显示便成为了个设计上头疼的问题,所以有些设计为了正常展示就把导航栏搞得面目全非了。下面这个交叉设计只是个温柔的做法。

<!DOCTYPE html>
<style>
nav {
  box-sizing:border-box;
  width:990px;
  margin:0px auto;
  border:1px solid #CCC;
  background:#F8F8F8;
  font-size:0px;
}
nav a {
  position:relative;
  margin:5px;
  padding:6px;
  border:1px solid #CCC;
  display:inline-block;
  background:#F4F4F4;
  color:#333;
  font:14px/1 Simsun;
  text-decoration:none;
}
nav a:hover {
  background:#FAFAFA;
}
/*比正常尺寸小时使用自适应宽度*/
@media (max-width:990px) {
  nav {width:auto;}
}
/*中等分辨率使用两端对其设计*/
@media (max-width:700px) {
  nav {
    border:0px;
    background:none;
    text-align:justify;
  }
  nav::after {
    content:' ';
    width:100%;
    display:inline-block;
  }
  nav a {
    margin:5px 0px;
  }
}
/*小分辨率使用交叉设计*/
@media (max-width:440px) {
  nav a {margin-right:-32px;}
  nav a:last-child {margin-right:5px;}
  nav a:nth-child(2n) {top:24px;}
}
</style>
<nav>
  <a href="#">首页</a>
  <a href="#">导航项1</a>
  <a href="#">导航项2</a>
  <a href="#">导航项3</a>
  <a href="#">导航项4</a>
  <a href="#">导航项5</a>
  <a href="#">导航项6</a>
</nav>
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^