css框架Foundation导航栏制作方法

<!-- 引入 Foundation CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<p><!-- 引入 jQuery -->
<script src="<a href="https://www.php.cn/link/c20cbf08834c32e106350909a16de19e">https://code.jquery.com/jquery-3.6.0.min.js"></script&gt</a>;</p><p><!-- 引入 Foundation JS -->
<script src="<a href="https://www.php.cn/link/196f47aa4d2237535c1c559def28e60f">https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script&gt</a>;

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">网站标题</li>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">登录</a></li>
      <li><a href="#">注册</a></li>
    </ul>
  </div>
</div>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">菜单</div>
</div>
<p><div id="example-menu">
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">我的网站</li>
<li><a href="#">首页</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</div>
</div>

<script>
  $(document).foundation();
</script>