基础zurb导航栏

Foundation zurb nav bar

本文关键字：导航 zurb 基础      更新时间：2023-09-26

我在使粘性导航功能正常工作时遇到问题：（

我希望我的导航栏在左边有"菜单"功能和标签，在右边有一个"电话图标"图标，可以让别人直接打电话给我。

导航正在做的另一件我能理解的事情是隐藏在页面上的第一张图片后面。

如果有人能帮忙，我们将不胜感激。

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ABC</title>

    <link rel="stylesheet" href="css/foundation.css">
    <script src="js/vendor/custom.modernizr.js"></script>
    <!-- Included JS Files -->
    <script src="js/foundation/foundation.topbar.js"></script>
    </head>
    <body>
    <!-- START Navigation -->
    <div class="contain-to-grid sticky"> 
    <nav class="top-bar">
    <ul class="title-area">
    <!-- Title Area -->
    <li class="name"></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
    <li></li>
    <li class="toggle-topbar call-icon"><a href="tel:1234567"><img src="img/75-phone.png" width="20" height="20"></a></li>


    <!-- Right Nav Section -->
    <ul class="right">
    <li class="divider"></li>
    <li><a href="#">About</a></li>
    <li class="divider"></li>
    <li class="has-dropdown"> <a href="#">Services</a>
    <ul class="dropdown">
      <li class="divider"><a href="#">1</a></li>
      <li class="divider"><a href="#">2</a></li>
      <li class="divider"><a href="#">3</a></li>
      <li class="divider"><a href="#">4</a></li>
      <li class="divider"><a href="#">5</a></li>
      <li class="divider"><a href="#">6</a></li>
      <li class="divider"><a href="#">7</a></li>
    </ul>
    </li>
    <li class="divider"></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </section>
    </nav>
    </div>
    <!-- END Navigation -->
    <!-- START Mobile logo -->
    <div class="row">
    <div class=" small-12 large-12 columns"><img src="img/landing-page-tiles-logo.jpg"><center><h2></h2></center>
    <hr />
    </div>
    </div>
    <!-- END Mobile Logo -->
    <!-- END main content -->
    <script>  document.write('<script src=' +  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +  '.js><'/script>')  </script>
    <script src="js/foundation.min.js"></script>

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

如果这两段代码连续显示，则右导航部分位于<ul class="title-area">标记内。关闭此列表以使<ul class="right">列表显示在其常规位置。

相关文章：