orico-official-website/app/index/view/public/header.html

<header class="header-PC">
  <div id="header">
    <!-- LOG -->
    <div class="nav1">
      <a href="/">
        <img src="__IMAGES__/logo.png" />
      </a>
    </div>
    <!--顶部导航栏 -->
    <div class="nav2">
      <nav id="booNavigation" class="booNavigation">
        <ul>
          {if condition="!empty($header_categorys)"}
          <li class="navItem">
            <a href="javascript:void(0);">{:lang('header_navigation.product_categorys')}</a>
            <img src="__IMAGES__/black-down.png" class="downimg" />
            <ol class="navItemConten">
              <!-- 左边子菜单-->
              <ul class="navItem_cyleft">
                {volist name="header_categorys" id="vo"}
                <li class="{$key == 0 ? 'it_active' : ''}">
                  <a href="javascript:void(0);">{$vo.name}</a>
                </li>
                {/volist}
              </ul>
              <!-- 右边子菜单-->
              {volist name="header_categorys" id="vo" key="idx"}
              <div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"
                {else/}style="display: none;" {/eq}>
                {volist name="vo.children" id="vc"}
                <dl class="nav_cyrightit">
                  <dt>
                    <a href="{:url('product/category', ['id' => $vc.id])}">{$vc.name}</a>
                  </dt>
                  {volist name="vc.children" id="vcc"}
                  <dd>
                    <a href="{:url('product/category', ['id' => $vcc.id])}">{$vcc.name}</a>
                  </dd>
                  {/volist}
                </dl>
                {/volist}
              </div>
              {/volist}
            </ol>
          </li>
          {/if}
          {volist name="header_navigation" id="vo"}
          <li class="navItem">
            <a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
            {if condition="!empty($vo.children)"}
            <img src="__IMAGES__/black-down.png" class="downimg" />
            <!--下拉菜单 -->
            <ol class="navItemConten1">
              {volist name="vo.children" id="voc"}
              <li>
                <a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
              </li>
              {/volist}
            </ol>
            {/if}
          </li>
          {/volist}
        </ul>
      </nav>
    </div>
    <!-- 顶部搜索/国家选择/商店-->
    <div class="nav3">
      <img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
      <div class="choesCountry">
        <img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
        <!--国家选择 -->
        <div class="topCountry" id="top-country">
          <ul>
            <li class="closec">
              <span class="closecountrybt">×</span>
            </li>
            {volist name="header_languages" id="vo"}
            <a href="{$vo.lang_url}">
              <li>
                <div class="cico">
                  <img src="{$vo.lang_icon}" class="countryimg" />
                </div>
                <p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
              </li>
            </a>
            {/volist}
          </ul>
        </div>
      </div>
      <!-- 英文官网才有-->
      <a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
    </div>
  </div>

  <!-- 搜索弹框-->
  <div class="searchmodalMian" id="scmodal">
    <div class="searchmodalct">
      <span class="close-btn">×</span>
      <input type="text" name="keywords" id="serrchinput" autocomplete="off" />
      <!-- 历史记录 -->
      <div class="searchhistory">
        <p class="h_title">{:lang('header_search.history')}</p>
        <ul></ul>
      </div>
      <div class="popProduct">
        <p class="h_title">{:lang('header_search.hot_product')}</p>
        <div class="popmain">
          {volist name="header_hot_products" id="vo"}
          <div class="popitem">
            <a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}" class="popimg" /></a>
            <div class="productName">{$vo.name}</div>
            <div class="produc-dec">{$vo.name}</div>
          </div>
          {/volist}
        </div>
      </div>
    </div>
  </div>
</header>
<script>
  $(document).ready(function () {
    // 搜索历史记录处理
    function history (keywords) {
      var history = localStorage.getItem('header_search_keywords');
      if (!history) {
        history = [];
      } else {
        history = JSON.parse(history);
      }
      // 记录搜索关键词
      if (keywords) {
        if (history.includes(keywords)) {
          history.splice(history.indexOf(keywords), 1);
        }
        history.unshift(keywords);
        if (history.length > 3) {
          history.pop();
        }
        localStorage.setItem('header_search_keywords', JSON.stringify(history));
        return history;
      }

      // 回显搜索历史记录
      history.forEach(function (item) {
        $('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
      });

      return history;
    }
    // 封装一个函数用于处理鼠标悬停显示和隐藏内容
    function handleHover ($element, $content) {
      $element.mouseenter(function () {
        $content.stop(true, true).slideDown(600);
      }).mouseleave(function () {
        $content.stop(true, true).slideUp(600);
      });
    }
    // 处理第一个导航项
    handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
    // 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
    $('.navItem_cyleft li').mouseenter(function () {
      $(this).addClass('it_active').siblings().removeClass('it_active');
      $('.navItem_cyright').hide();
      $('.navItem_cyright').eq($(this).index()).show();
    });
    // 处理第5 - 8个导航项
    for (let i = 4; i < 8; i++) {
      handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
    }
    // 点击搜索
    $('#openModalBtn').click(function () {
      $('#scmodal').toggle();
    });
    $('.close-btn').click(function () {
      $('#scmodal').hide();
    });
    // 搜索历史记录回显
    history();
    // 执行搜索
    $('#serrchinput').keydown(function (event) {
      if (event.originalEvent.keyCode == 13) {
        var keywords = $(this).val();
        if (keywords == '') {
          return false;
        }
        // 记录搜索关键词
        history(keywords);

        // 跳转到搜索页面
        window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
      }
    });
    // 点击选择国家
    $('#countrycheck').click(function () {
      $('#top-country').toggle();
    });
    $('.closecountrybt').click(function () {
      $('#top-country').hide();
    });
  });
</script>