Tailwind CSS 实现网站导航菜单

更新日期: 2022-08-04 阅读次数: 6034 字数: 151 分类: CSS

目标

  • PC/手机自适应

官方现成组件 Headers

https://tailwindui.com/components/marketing/elements/headers

https://tailwindui.com/components/application-ui/navigation/navbars

  • 需要 JS
  • 代码量不小。也许可以精简一下

还是不引入三方 js 的好,也不复杂。目前采用这个方案。

实际效果演示:

https://www.sunzhongwei.com/tools2/combine-images

daisyui 的 navbar 组件

daisyui 是基于 Tailwind 的一套界面库,类似于 Bootstrap。

https://daisyui.com/components/navbar/

  • 代码虽然清晰了,但是我不太想引入一个额外的库

Flowbite 的 navbar 组件

Flowbite 也是基于 Tailwind 的一套界面库。看起来比 daisyui 更实用一些。

https://flowbite.com/docs/components/navbar/

  • 自带了 js 文件

tags: Tailwind CSS

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式