0

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

我希望我的导航栏拥有/做的是左侧有“菜单”功能和标签，右侧有一个“电话图标”图标，允许有人直接给我打电话。

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

如果有人可以提供帮助，将不胜感激。

    <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>
4

1 回答 1

0

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

于 2014-02-04T16:05:14.053 回答