Реализация адаптивной панели навигации

Vue.js

предисловие

Недавно я хотел реализовать настраиваемую адаптивную верхнюю панель навигации, которая поддерживает нормальный доступ к основным устройствам (телефон, планшет, ПК) и обеспечивает соответствующий эффект отображения в соответствии с соотношением сторон экрана.

Пробовал использовать следующее

  • Панель навигации, предоставляемая Element UI (стилизованная монотонность, без адаптивного эффекта)
  • Панель навигации, предоставляемая BootStrap (с адаптивными эффектами необходимо ввести дополнительные пакеты зависимостей, а модификация пользовательских эффектов громоздка)

Исходя из этого, у меня возникла идея самостоятельно реализовать отзывчивую верхнюю панель навигации, которая должна иметь следующие характеристики:

  • Метод реализации относительно прост, нет необходимости вводить дополнительные зависимые библиотеки (или меньше)
  • Меню функций может быть добавлено динамически, а индивидуальная настройка относительно проста.
  • Совместим с различными устройствами для обеспечения более красивого эффекта дисплея

Показать результаты

最终效果

  • Советы: еслиgifИзображение не загрузилось, попробуйте обновить.

Подготовьтесь заранее

  • Овладейте навыками верстки H5 и CSS
  • Понимание медиа-запросов CSS
  • Освойте прогрессивный фреймворк (здесь реализовано с помощью Vue)
  • Иметь определенный план дизайна для панели навигации, которую нужно реализовать.

выполнить

Идеи:

Разделите панель навигации на левую и правую части. При уменьшении ширины окна используйте медиа-запросы CSS для изменения стиля. Когда ширина уменьшена до минимума, скройте текущее отображение навигации и замените его раскрывающимся списком. отображение списка.

  • В основном внедряйте изменения стиля с помощью медиа-запросов CSS.
  • Для удобства расширения параметры навигации заданы для массива объектов.

Header.vue

  • раздел шаблона
<template>
  <!--xs: phone, sm: pad, md: pc, lg: 2k-pc, xl: 4k-pc-->
  <nav class="header">
    <!-- 顶部导航 -->
    <div class="container">
      <ul class="container-left-ul">
        <li>
          <img id="icon" src="@assets/image/icon.png"/>
        </li>
        <li :class="$store.state.activeName === item.activeName ? 'menu-item-active' : 'container-left-li'" @click="toActiveMenuItem(item)"
          v-for="(item, index) in leftMenuList" :key="index">
          {{ item.titleName }}
        </li>
      </ul>
      <ul class="container-right-ul">
        <li :class="$store.state.activeName === item.activeName ? 'menu-item-active' : 'container-right-li'" @click="toActiveMenuItem(item)"
          v-for="(item, index) in rightMenuList" :key="index">
          {{ item.titleName }}
        </li>
        <li id="bars" @click="dropDownShow = !dropDownShow">
          <i class="fa fa-bars fa-lg"/>
        </li>
      </ul>
    </div>

    <!-- 下拉菜单 -->
    <transition name="dropdown-fade-show">
      <div v-show="dropDownShow" class="dropdown">
        <ul class="dropdown-top-ul">
          <li class="dropdown-top-li" v-for="(item, index) in leftMenuList" :key="index" @click="toActiveMenuItem(item)">{{ item.titleName }}</li>
        </ul>
        <ul class="dropdown-bottom-ul">
          <li class="dropdown-bottom-li" v-for="(item, index) in rightMenuList" :key="index" @click="toActiveMenuItem(item)">{{ item.titleName }}</li>
        </ul>
      </div>
    </transition>

  </nav>
</template>
  • раздел сценария
export default {
  name: 'Header',
  data () {
    return {
      dropDownShow: false, // 控制下拉菜单显示
      leftMenuList: [ // 左侧菜单内容
        { activeName: 'Home', titleName: '主页', activeUrl: '/index' },
        { activeName: 'Infinity', titleName: 'Infinity', activeUrl: '/infinity' },
        { activeName: 'About', titleName: '关于', activeUrl: '/about' }
      ],
      rightMenuList: [ // 右侧菜单内容
        { activeName: 'Support', titleName: '赞助', activeUrl: '/support' }
      ],
      activeName: '' // 导航栏激活名称
    }
  },
  methods: {
    toActiveMenuItem (item) { // 激活导航菜单
      this.activeName = item.titleName
      this.$router.push(item.activeUrl)
      this.dropDownShow = false
    }
  }
}
  • css часть (здесь используется стилус)
<style lang="stylus" scoped>
@import "../../assets/stylus/init.stylus" // 初始化导航栏参数
@import "../../assets/stylus/fade.stylus" // 实现导航栏下拉展示动画效果
.header
  color $headerTextColor
  background $headerBg
  height $header-height
  width 100%
  position fixed
  top 0
  padding 0 10%
  .container
    width 100%
    height 100%
    .container-left-ul
      float left
      li
        height 100%
        line-height $header-height
        width $header-li-width
        display inline-block
      #icon
        height 30px
        vertical-align middle
        transition transform 0.5s
      #icon:hover
        transform scale(1.5, 1.5) rotate(180deg)
      .container-left-li:hover
        color $menu-active-color
        box-shadow 0px -4px 0px $menu-active-color inset
    .container-right-ul
      float right
      li
        height 100%
        line-height $header-height
        width $header-li-width
        display inline-block
      .container-right-li:hover
        color $menu-active-color
        box-shadow:0px -4px 0px $menu-active-color inset
      #bars > i
        padding 8px 14px
        border 1px $headerTextColor solid
        border-radius 5px
  .dropdown
    border 1px red solid
    width 100%
    background $headerBg
    li
      height 40px
      line-height 40px
    li:hover
      background black

.menu-item-active
  color $menu-active-color
  box-shadow 0px -4px 0px $menu-active-color inset

@media screen and (max-width: 992px) {
  .header {
    padding 0
  }
}
@media screen and (max-width: 768px) {
  .container-left-li {
    display none !important
  }
  .container-right-li {
    display none !important
  }
}
@media screen and (min-width: 768px) {
  #bars {
    display none
  }
  .dropdown {
    display none
  }
}
</style>
  • init.stylus
    • params.stylus (конфигурация параметров)
    • color.stylus (цветовая конфигурация)
/* params.stylus （参数配置）*/
// 配置页头的相关参数
$header-height = 60px
$header-li-width = 70px
// 导航栏菜单激活颜色
$menu-active-color = $googleYellow
$headerBg = #282C34
$headerTextColor = #ffffff

/* color.stylus （颜色配置） */
$googleRed = #f4433c
$googleBlue = #2d85f0
$googleGreen = #0aa858
$googleYellow = #ffbc32

Советы:

  • Введение переменных css может лучше решить проблемы конфигурации, такие как темы

После реализации навигационной панели, после уменьшения размера экрана, отображается выпадающее меню, в это время следует добавить анимационные эффекты на отображение и исчезновение меню для достижения аналогичного эффекта el-zoom-in -top (с помощью vue's<transition>эффект).

  • fade.stylus
// 下拉菜单出现效果
.dropdown-fade-show-enter-active
  animation fadeShow .25s
.dropdown-fade-show-leave-to
  animation fadeShow .25s reverse
@keyframes fadeShow {
  0% {
    transform-origin 0 top
    transform scaleY(0)
    opacity 0
  }
  100% {
    transform-origin 0 top
    transform scaleY(1)
    opacity 1
  }
}

Эпилог

Это только для того, чтобы предоставить дизайнерские идеи для адаптивного макета навигации, и детали все еще можно оптимизировать.

Точки, которые нужно оптимизировать:

  • Соответствующие стили можно оптимизировать с помощью дизайна и CSS.
  • Объединение Vuex и локального кеша браузера для решения проблемы восстановления состояния панели навигации после обновления страницы.

Мы оптимизируем код для последующих обновлений и приглашаем всех к активному обсуждению и совместному прогрессу!

Моя книга Джейн ----Соевый соус

Категории