堆栈内存溢出
  简体   繁体   English

TailwindCss 固定导航栏

[英]TailwindCss Fixed NavBar

 原文  2020-02-11 13:02:34  9   4    javascript/ html/ css/ vue.js/ tailwind-css

问题描述

I'm trying to create a Fixed Navigation Bar in Tailwind CSS and sticky scroll main page, but no matter what I try, I can't make it work...我正在尝试在Tailwind CSS和粘性滚动主页中创建一个Fixed Navigation Bar ，但无论我尝试什么，我都无法让它工作......

Here is what I achieved:这是我取得的成绩：

在此处输入图片说明

Here is my Code:这是我的代码：

<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center">
    <router-link to="/" class="text-2xl text-white">My App</router-link>
    <div>
        <router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
        <router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
    </div>
</header>
<div class="flex">
    <!-- Sidebar -->
    <aside class="fixed bg-white h-screen py-5 shadow">
        <div class="flex flex-col text-left">
            <router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
                <i class="fa fa-dashboard"></i>
                <span class="">Dashboard</span>    
            </router-link>
        </div>
    </aside>
    <!-- Main Page -->
    <main class="bg-gray-200  flex-1">
        <transition name="slide-fade">
            <router-view></router-view>
        </transition>
    </main>
</div>

4 个解决方案

解决方案1
 37  2021-03-25 16:32:20

If someone is still looking for this, here the solution using the rights tailwind classes.如果有人仍在寻找这个，这里是使用权限顺风类的解决方案。

my layout look like this:我的布局是这样的：

<div>
   <header class="sticky top-0 z-50"></header>
   <main class=relative></main>
   <footer></footer>
</div>

解决方案2
 6  2020-07-23 12:19:58

Using 'Fixed NavBar' in Tailwind.在 Tailwind 中使用“固定导航栏”。 Here is the template code for you to get started:这是您开始使用的模板代码： 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tailwind Starter Template - Fixed Header : Tailwind Toolbox</title> <meta name="author" content="name"> <meta name="description" content="description here"> <meta name="keywords" content="keywords,here"> <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created--> <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> <!--Totally optional :) --> </head> <body class="bg-gray-400 font-sans leading-normal tracking-normal"> <!--Nav--> <nav class="bg-gray-800 p-2 mt-0 fixed w-full z-10 top-0"> <div class="container mx-auto flex flex-wrap items-center"> <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"> <a class="text-white no-underline hover:text-white hover:no-underline" href="#"> <span class="text-2xl pl-2"><i class="em em-grinning"></i> Brand McBrandface</span> </a> </div> <div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end"> <ul class="list-reset flex justify-between flex-1 md:flex-none items-center"> <li class="mr-3"> <a class="inline-block py-2 px-4 text-white no-underline" href="#">Active</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> <li class="mr-3"> <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4" href="#">link</a> </li> </ul> </div> </div> </nav> <!--Container--> <div class="container shadow-lg mx-auto bg-white mt-24 md:mt-16 h-screen"> <p>Here you Go!</p> </div> </body> </html>

解决方案3
 4  2021-01-05 10:41:32

Here is the solution by using only Flex box.这是仅使用 Flex 框的解决方案。

CodeSandbox link代码沙盒链接

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Sticky-header-and-footer-with-tailwind</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> </head> <body> <div class="flex flex-col h-screen"> <header class="py-5 bg-gray-700 text-white text-center"> Sticky Header and Footer with Tailwind </header> <main class="flex-1 overflow-y-auto p-5"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, the 1914 translation by H. Rackham. </main> <footer class="py-5 bg-gray-700 text-center text-white"> Tailwind is Awesome 😎 </footer> </div> </body> </html>

解决方案4
 0  2021-03-16 08:57:06

Try Flex in Tailwind Navbar在 Tailwind 导航栏中试用 Flex 

 <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"/> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <nav class="bg-gray-100 fixed inset-x-0"> <div class="max-w-6xl mx-auto px-4"> <div class="flex justify-between"> <div class="flex space-x-4"> <!-- logo --> <div> <a href="#" class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900"> <i class='bx bxl-medium-old mr-1 text-xl mb-1 text-blue-400'></i> <span class="font-bold">Moto Dev</span> </a> </div> <!-- primary nav --> <div class="hidden md:flex items-center space-x-1"> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Home</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Contact</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Pricing</a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900">Features</a> </div> </div> <!-- secondary nav --> <div class="hidden md:flex items-center space-x-1"> <a href="" class="py-5 px-3">Login</a> <a href="" class="py-2 px-3 bg-yellow-400 text-white hover:bg-yellow-300 text-sm hover:text-yellow-800 rounded transition duration-300">Signup</a> </div> <!-- mobile button goes here --> <div class="md:hidden flex items-center"> <button class="mobile-menu-button focus:outline-none"> <i class='bx bx-menu text-3xl mt-1'></i> </button> </div> </div> </div> <!-- mobile menu --> <div class="mobile-menu hidden md:hidden"> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Home</a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Contact</a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Pricing</a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200">Features</a> </div> </nav> <!-- content goes here --> <div class="py-32 bg-red-500 h-screen p-3"> </div>

Or Visit Tailwind CSS Navbar或访问Tailwind CSS 导航栏

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 动态固定导航栏位置 - Dynamic fixed navbar position 缩小和固定的导航栏间隙 - Shrinking & fixed navbar gap 将弹出框固定到固定的导航栏 - Fixing a popover to a fixed navbar 固定到顶部导航栏 - Fixed to Top Navbar 修复了iFrame内部的NavBar - Fixed NavBar inside of iFrame 固定的导航栏消失，然后重新出现 - Fixed navbar disappears and then reappears 导航栏没有固定 - Navbar not staying fixed 粘性导航栏未修复 - Sticky Navbar not fixed 使用固定导航栏定位 - Postitioning with fixed navbar 固定顶部导航栏的变体 - A variation of the fixed top navbar
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM