Tailwind教程之9 - 导航栏的自适应设计

下面说说如何在Tailwind中实现自适应的导航栏。如果整个屏幕采用1：6布局，左边一列为导航区，右边5列为内容区的话。那么响应式菜单都会在左边第一列中。

先来说说响应式菜单的几个元素：

• 包含网站标题的div：这个标题会一直显示在导航区左边
• 菜单图标：当屏幕尺寸小时，这个图标会一直显示在导航区右边。但当屏幕尺寸为中时，会隐藏这个图标。单击这个图标会显示/隐藏菜单
• 菜单列表：默认情况下，这个菜单列表会被隐藏。单击菜单图标后会显示菜单

实现标题区和菜单区

markup

<!-- 导航区占据1列，并靠右对齐 -->
<div class="md:col-span-1 md:flex md:justify-end">
  <nav class="text-right"> 
    <!-- 网站标题和菜单均匀分布 -->
    <div class="flex justify-between items-center">
      <h1 class="p-4 border-b border-gray-100">
        <a href="/" class="hover:text-gray-800 hover:text-xl">Secret Garden</a>
      </h1>
      <!-- 屏幕尺寸为中时，隐藏这个图标 -->
      <div class="px-4 cursor-pointer md:hidden" id="menu-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </div>  
    </div> 
  </nav>
  ...
</div>

菜单列表的定义

markup

<ul class="text-sm mt-4 hidden md:block" id="menu">
  <li class="py-1">
    ...
  </li>  
</ul>

使用JavaScript实现菜单切换

JavaScript

const menuIcon = document.querySelector('#menu-icon');
const menu = document.querySelector('#menu');

menuIcon.addEventListener('click', () => {
  if(menu.classList.contains('hidden')) {
    menu.classList.remove('hidden');
  }else{
    menu.classList.add('hidden');
  }
})