Home
TakaMorY
Navbar

Navbar

This tailwind example is contributed by TakaMorY, on 19-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Header Heading Navbar

Author TakaMorY

408

Fork Fullscreen

<div class="hidden md:flex md:gap-4 lg:gap-8 xl:gap-10">
            <NuxtLink to="#teachers"
              class="hover-text underline-hover-container transition-colors text-sm lg:text-base">
              Наши преподаватели
            </NuxtLink>
            <NuxtLink to="#about" class="hover-text underline-hover-container transition-colors text-sm lg:text-base">
              О нас
            </NuxtLink>
            <NuxtLink to="#services"
              class="hover-text underline-hover-container transition-colors text-sm lg:text-base">
              Курсы
            </NuxtLink>
          </div>

<div class="hidden md:flex">
            <NuxtLink to="https://wa.me/c/79143348185" target="_blank"
              class="transition duration-300 px-6 py-2 lg:px-8 lg:py-3 bg-white text-black select-none text-sm lg:text-xl border-2 border-black font-semibold hover:bg-black hover:text-white">
              Связаться с нами
            </NuxtLink>
          </div>

<button @click="toggleMenu" class="md:hidden w-8 h-8 focus:outline-none z-50">
                            <transition name="fade" mode="out-in">
                                <span v-if="!isMenuOpen" key="menu" class="block text-3xl">☰</span>
                                <span v-else key="close" class="block text-3xl">✕</span>
                            </transition>
              </button>
        </div>

<transition name="slide-down">
          <div v-if="isMenuOpen" class="md:hidden fixed inset-0 z-40">
            
            <div class="absolute inset-0 bg-black bg-opacity-50 mt-16" @click="closeMenu"></div>

<div class="absolute top-16 left-0 right-0 bg-white shadow-xl rounded-b-2xl overflow-hidden z-40">
              <div class="p-6">
                
                <nav class="space-y-4">
                  <NuxtLink to="/"
                    class="block text-xl font-medium py-3 px-4 hover:bg-gray-100 rounded-lg transition-colors"
                    @click.native="closeMenu">
                    Главная
                  </NuxtLink>
                  <hr class="border-b border-gray-800">
                  <NuxtLink to="#teachers"
                    class="block text-xl font-medium py-3 px-4 hover:bg-gray-100 rounded-lg transition-colors"
                    @click.native="closeMenu">
                    Наши преподаватели
                  </NuxtLink>
                  <hr class="border-b border-gray-800">
                  <NuxtLink to="#about"
                    class="block text-xl font-medium py-3 px-4 hover:bg-gray-100 rounded-lg transition-colors"
                    @click.native="closeMenu">
                    О нас
                  </NuxtLink>
                  <hr class="border-b border-gray-800">

<NuxtLink to="#services"
                    class="block text-xl font-medium py-3 px-4 hover:bg-gray-100 rounded-lg transition-colors"
                    @click.native="closeMenu">
                    Курсы
                  </NuxtLink>
                  <hr class="border-b border-gray-800">
                </nav>

<NuxtLink to="https://wa.me/c/79143348185" target="_blank"
                  class="mt-6 w-full px-6 py-4 bg-black text-white text-xl font-semibold text-center hover:bg-gray-800 transition-colors rounded-lg block"
                  @click.native="closeMenu">
                  Связаться с нами
                </NuxtLink>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </nav>
  </header>
</div>

/* for working mobile mune */
<script>
  export default {
    data() {
        return {
            isMenuOpen: false
        }
    },
    methods: {
        toggleMenu() {
            this.isMenuOpen = !this.isMenuOpen
            if (this.isMenuOpen) {
                document.body.style.overflow = 'hidden'
            } else {
                document.body.style.overflow = ''
            }
        },
        closeMenu() {
            this.isMenuOpen = false
            document.body.style.overflow = ''
        }
    }
}
</script>

.slide-down-enter .absolute,
  .slide-down-leave-to .absolute {
    opacity: 0;
    transform: translateY(-50px);
  }

.slide-down-enter-to .absolute,
  .slide-down-leave .absolute {
    opacity: 1;
    transform: translateY(0);
  }

/* Анимация затемнения фона */
  .slide-down-enter-active .bg-opacity-50,
  .slide-down-leave-active .bg-opacity-50 {
    transition: opacity 0.3s ease;
  }

.slide-down-enter .bg-opacity-50,
  .slide-down-leave-to .bg-opacity-50 {
    opacity: 0;
  }

/* Анимация перехода бургер-крестик */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.2s ease;
  }

.fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

/* Эффекты для ссылок */
  .hover-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: black;
    transition: width 0.3s ease;
  }

.hover-text:hover::after {
    width: 100%;
  }

/* Плавные переходы */
  .transition-colors {
    transition: color 0.2s ease, background-color 0.2s ease;
  }

/* Фикс для z-index */
  .z-50 {
    z-index: 50;
  }

.z-40 {
    z-index: 40;
  }

/* поддчеркивание в шапке */
  .underline-hover-container {
    display: inline-block;
    position: relative;
  }

.hover-text {
    color: black;
    cursor: pointer;
  }

/* Псевдоэлемент для подчёркивания */
  .hover-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: black;
    transition: width 0.3s ease-in-out;
  }

/* Анимация при наведении */
  .hover-text:hover::after {
    width: 100%;
  }
</style>

Related Examples