文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >向Tailwind CSS导航栏添加导航选项卡

问向Tailwind CSS导航栏添加导航选项卡
EN

Stack Overflow用户
提问于 2019-03-24 15:18:37
回答 2查看 4.7K关注 0票数 4

所以我设计了这个顺风CSS导航栏，但是我在添加标签时遇到了麻烦。这是我的导航栏的链接。希望有人可以帮助添加一些下拉菜单，这样我就可以在我的项目中使用它。我试过所有可能的方法，但似乎很难。我甚至尝试过使用其他组件。无论如何，我都不能让这个导航栏正常工作。我需要将导航栏从静态模式更改为响应模式，但它目前不起作用。任何建议都将不胜感激！

​

代码语言：javascript
复制
new Vue({
  el: "#app",
  data() {
            return {
                open: false,
            }
      },
      methods: {
        toggle() {
            this.open = !this.open
        }
    }
})
代码语言：javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<header class="font-sans antialiased" id="app">
    <div class="flex items-center justify-between flex-wrap bg-grey-dark p-6">
      <div class="flex">
        <img src="src/assets/boy.svg" alt="" class="h-8 w-8">
        <a href="#" class="no-underline text-white text-bold mt-2"><span class="font-semibold text-xl tracking-tight">ExampleCss</span></a>
      </div>
      <div class="block sm:hidden">
        <button @click="toggle" class="flex items-center px-3 py-2 border rounded text-grey-dark-lighter border-grey-dark-light hover:text-white hover:border-white">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="text-sm sm:hidden">
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Home
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            About
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Expertise
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Academia
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Portfolio
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Blog
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Contact
          </a>
          <div class="flex">
            <div>
              <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0 mr-2">Register</a>
            </div>
            <div>
              <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0">Login</a>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden w-full block md:flex md:w-auto">
        <div>
          <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0 mr-2">Register</a>
        </div>
        <div>
          <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0">Login</a>
        </div>
      </div>
    </div>
    <nav class="bg-grey-dark sm:block p-6" :class="open ? 'hidden': 'hidden'">
      <div class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="flex justify-center items-center text-sm sm:flex-grow uppercase">
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Home
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            About
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Expertise
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Academia
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Portfolio
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Blog
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Contact
          </a>
        </div>
      </div>
    </nav>
  </header>

​

css
tailwind-css
EN

回答 2

Stack Overflow用户

发布于 2019-04-02 14:52:16

我已经审查了您的代码，并找到一个下拉菜单的建议，请替换我的建议代码在您的页面，希望下拉下拉工作也为您的菜单。

HTML

代码语言：javascript
复制
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<header class="font-sans antialiased" id="app">
    <div class="flex items-center justify-between flex-wrap bg-grey-dark p-6">
      <div class="flex">
        <img src="src/assets/boy.svg" alt="" class="h-8 w-8">
        <a href="#" class="no-underline text-white text-bold mt-2"><span class="font-semibold text-xl tracking-tight">ExampleCss</span></a>
      </div>
      <div class="block sm:hidden">
        <button @click="toggle" class="flex items-center px-3 py-2 border rounded text-grey-dark-lighter border-grey-dark-light hover:text-white hover:border-white">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="text-sm sm:hidden">
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Home
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            About
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Expertise
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Academia
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Portfolio
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Blog
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Contact
          </a>
          <div class="flex">
            <div>
              <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0 mr-2">Register</a>
            </div>
            <div>
              <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0">Login</a>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden w-full block md:flex md:w-auto">
        <div>
          <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0 mr-2">Register</a>
        </div>
        <div>
          <a href="#" class="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray hover:bg-white mt-4 sm:mt-0">Login</a>
        </div>
      </div>
    </div>
    <nav class="bg-grey-dark sm:block p-6" :class="open ? 'hidden': 'hidden'">
      <div class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="flex justify-center items-center text-sm sm:flex-grow uppercase">
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Home
          </a>
          <div id="app" class="p-6 font-sans leading-normal">
  <dropdown-link>
    <span slot="link" class="appearance-none flex items-center inline-block text-white font-medium px-4 py-2 rounded">
      <span class="mr-1">Dropdown</span>
      <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
      </svg>
    </span>
    <div slot="dropdown" class="bg-white shadow rounded border overflow-hidden">
      <a href="#" class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-blue whitespace-no-wrap">Action</a>
      <a href="#" class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-blue whitespace-no-wrap">Another action</a>
      <a href="#" class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-blue whitespace-no-wrap">Something else here</a>
    </div>
  </dropdown-link>
</div>

<script type="text/x-template" id="dropdown-link-template">
  <div class="relative">
    <div role="button" class="inline-block select-none" @click="open = !open">
      <slot name="link"></slot>
    </div>
    <div class="absolute pin-l mt-px" v-show="open">
      <slot name="dropdown"></slot>
    </div>
  </div>
</script>
<a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            About
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Expertise
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Academia
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Portfolio
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Blog
          </a>
          <a href="#" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-white hover:text-white mr-8">
            Contact
          </a>

        </div>
      </div>
    </nav>
  </header>

vue.js

代码语言：javascript
复制
 Vue.component('dropdown-link', {
  template: '#dropdown-link-template',
  data() {
    return {
      open: false
    }
  }
})

var app = new Vue({
  el: '#app'
})

​

​

enter link description here

票数 1
EN

Stack Overflow用户

发布于 2019-04-01 16:57:40

我对此做了一些研究，我假设你想在不添加额外脚本或插件的情况下添加dropdown，对吧。尝试以下链接中的解决方案

https://tailwindcomponents.com/component/dropdown-menu-without-js

如果这对你有效，请让我知道。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55321548

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档