大屏幕上有两个典型的区域适合放置导航：顶部和左侧，但在缺少屏幕空间的手机屏幕上却是一个有趣的挑战。随着响应式设计越来越流行，在小尺寸屏幕上处理导航的各种方法越来越值得我们关注。而手机网站导航必须在快速获取一个网站的信息和不可见性之间取得平衡。

下面是一些处理响应式导航比较流行的技巧，由于下述几种导航方式还没有约定俗成的叫法，所以大家可以结合案例网站来理解他的实际用法：

        顶部导航页脚锚选择菜单切换左侧导航弹出只有页脚隐藏导航

      当然每一种方法都有优点和缺点，在为你的项目选择适合的方法时需要注意。

      1.顶部导航或者说“什么也不做”的方法

      导航最容易实施的解决方案之一是保持它在顶部。由于这种方法容易实现，所以你可以在许多（甚至大部分）响应式网站中找到它。

      【优点】
          容易实现——你几乎可以保持你大屏幕网站的原样。无需依赖Javascript——确保最大的兼容性。无需辛苦的重写CSS样式。没有绊倒你的代码顺序——无需赴汤蹈火的把导航列表在代码里来回转移。他按原始顺序排列。

          【缺点】
              高度问题——移动端的高度问题。正如《卢克的书》所说，内容第一，导航第二是首选的移动网页体验。你想要使用户尽可能快地获得重要的内容。这意味着要让导航移出用户的视线，使他们能够专注于页面上的核心信息。当所有的核心内容被切断，它会被混淆：

              注释：该网站首屏由LOGO和导航构成，点击导航页面切换，而导航一直保持在顶部，页面之间的跳转看起来并不差异，也没有快速地揭开核心内容。

                   不易扩充——当你想要添加一个新的部分到你的网站，会发生什么？此刻导航整齐的排列在一行，当你的客户说你需要把“产品和服务”添加到导航，会发生什么？或者当你需要把菜单翻译成德文时呢？不易点击——填鸭式的链接太紧密地结合在一起，很容易导致不必要的的间接点击。跨设备的问题——在iPhone上文字可能看起来很棒，由于不同的设备呈现文字的方式不同，在其他平台上看起来可能是分散的：

                  注释：在小屏幕上响应导航被截断成多行

                  【外部参考案例】