Zurb Foundation Topbar không hoạt động ở tất cả

Tôi đang gặp khó khăn khi cố gắng để Zurb's Foundation Topbar hoạt động khi đang ở trên màn hình thiết bị di động.Zurb Foundation Topbar không hoạt động ở tất cả

Tôi đang thử nghiệm trên chrome có chiều rộng màn hình được đặt thành nhỏ nhất. Tất cả CSS và JS đều được tải, menu có vẻ tốt cho đến khi bạn nhấp và không có gì.

Lưu ý: Tôi đang sử dụng WordPress.

Dưới đây là mã của tôi:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 

     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
     Remove this if you use the .htaccess --> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

     <title><?= (is_front_page() ? 'Revive Architects | London\'s most trusted architect for conversions/extensions ' : get_post_meta($post->ID, '_seo_title', true)); ?></title> 
     <meta name="description" content="<?= (is_front_page() ? 'London\'s most trusted architect. Over 25 years of architectural experience, we have helped hundreds over in clients in the London area.' : get_post_meta($post->ID, '_seo_description', true)) ?>"> 
     <meta name="author" content="www.werdigital.co.uk"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

     <!-- STYLESHEETS --> 
     <link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/normalize.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/foundation.min.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="<? bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
     <!-- /STYLESHEETS --> 

     <!-- JS --> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/jquery.js"></script> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/modernizr.js"></script> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/fastclick.js"></script> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.js"></script> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script> 
     <script type="text/javascript" src="<? bloginfo('template_url'); ?>/js/script.js"></script> 
     <script> 
      jQuery(document).ready({ 
       jQuery(document).foundation(); 
      }); 
     </script> 
     <!-- /JS --> 

     <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
     <link rel="shortcut icon" href="/favicon.ico"> 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

     <? wp_head(); ?> 
    </head> 

    <body> 
     <div class="page clearfix"> 
      <header> 
       <div class="row header-wrapper"> 
        <div class="large-12 medium-12 columns"> 
         <a href="<? bloginfo('url'); ?>"><img class="logo" alt="" src="<? bloginfo('template_url'); ?>/images/logo.png" /></a> 
        </div> 
       </div> 
       <div class="top-nav"> 
        <div class="row"> 
         <div class="large-12 medium-12 columns"> 
          <div class="contain-to-grid"> 
           <nav class="top-bar" data-topbar> 
            <ul class="title-area"> 
             <li class="name"> 
              <a href="<?= get_option('home'); ?>"><img class="logo-icon" width="100" alt="" src="<? bloginfo('template_url'); ?>/images/logo-icon.png" /></a> 
             </li> 
             <li class="toggle-topbar menu-icon"> 
              <a href="#"><span>Menu</span></a> 
             </li> 
            </ul> 

            <section class="top-bar-section"> 
             <ul id="menu-primary" class="right"><li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="http://dev.revivearchitects.co.uk/about-us/">About Us</a></li> 
              <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://dev.revivearchitects.co.uk/architect-projects/">Projects/Services</a></li> 
              <li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23"><a href="http://dev.revivearchitects.co.uk/blog/articles-and-guides/">Articles</a></li> 
              <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://dev.revivearchitects.co.uk/contact-us/">Contact Us</a></li> 
             </ul> 
            </section> 
           </nav> 
          </div> 
         </div> 
        </div> 
       </div> 
      </header>

Nguồn

2014-06-18 Richard Skinner

Hãy thử gói foundation() cuộc gọi của bạn trong một chức năng jQuery(document).ready() như vậy:

<script> 
    jQuery(document).ready({ 
     jQuery(document).foundation(); 
    }); 
</script>

Đó là lẽ không vấn đề ... Nhưng tôi tự hỏi nếu DOM của bạn đang tải trước hoặc sau khi JS của bạn có cơ hội tải đầy đủ kể từ khi bạn đang tải JS của bạn trong đầu.

Tiếp theo, có vẻ như bạn có thể thiếu tệp cơ sở Foundation JS. Bạn có thế này:

<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>

Nhưng foundation.topbar.jsphụ thuộc trên foundation.js (cũng như tất cả các plugin Foundation).

Tiếp theo, bạn định lên lớp các menu phụ mà WordPress đang tạo ra như thế nào? Chú ý đánh dấu trong tài liệu Zurb Foundation:

<li class="has-dropdown"> 
    <a href="#">Right Button Dropdown</a> 
    <ul class="dropdown"> 
     <li><a href="#">First link in dropdown</a></li> 
    </ul> 
    </li>

Nếu bạn kiểm tra nội dung tạo bạn tôi đặt cược bạn đang bỏ lỡ lớp "has-dropdown" trên <li> và "dropdown" lớp trên <ul>.

[sửa]

Tôi cũng nhận thấy rằng bạn thay đổi nội dung đánh dấu của bạn trong câu hỏi của bạn và bây giờ có hai yếu tố <nav> và cả hai đều xác định một thuộc tính data-topbar. (Tôi không chắc chắn đó chỉ là một lỗi dán trong câu hỏi của bạn hoặc nếu đánh dấu của bạn thực sự trông như thế).

Thử sử dụng các đánh dấu sau thay vào đó, cũng giống như một thử nghiệm, để xem nếu các chức năng Foundation Topbar là lao động (đây là mẫu từ các tài liệu):

<nav class="top-bar" data-topbar> 
    <ul class="title-area"> 
    <li class="name"> 
     <h1><a href="#">My Site</a></h1> 
    </li> 
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
    </ul> 

    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="active"><a href="#">Right Button Active</a></li> 
     <li class="has-dropdown"> 
     <a href="#">Right Button Dropdown</a> 
     <ul class="dropdown"> 
      <li><a href="#">First link in dropdown</a></li> 
     </ul> 
     </li> 
    </ul> 

    <!-- Left Nav Section --> 
    <ul class="left"> 
     <li><a href="#">Left Nav Button</a></li> 
    </ul> 
    </section> 
</nav>

Nếu đó không việc, thì reinspect đánh dấu của riêng bạn, so sánh & tương phản những gì các lớp học và các yếu tố và làm tổ có thể khác nhau và sau đó điều chỉnh mã của bạn cho phù hợp. Có thể dễ dàng hơn để bắt đầu với ví dụ của họ và sau đó chỉnh sửa từ đó.

Nguồn

2014-06-18 14:35:01

Cảm ơn nhận xét của bạn rất hữu ích. Tuy nhiên khi tôi thêm tất cả các yêu cầu vẫn không có gì, không có lỗi. Tôi cũng không yêu cầu bất kỳ menu thả xuống nào, chỉ là điều hướng cấp cao nhất. Đã làm việc trên này trong nhiều giờ và sáng bắt đầu suy nghĩ về việc trở về Bootstrap. –

@RichardSkinner Tôi đã chỉnh sửa câu trả lời của tôi dựa trên đánh dấu đã chỉnh sửa của bạn trong câu hỏi của bạn, hy vọng rằng sẽ giúp –

Bắt đầu từ đầu và sử dụng mã từ trang web đã xử lý.Tôi là một thằng ngốc hoàn toàn vì không tự mình cố gắng. Xin lỗi vì đã lãng phí thời gian của bạn tôi. –

Zurb Foundation Topbar không hoạt động ở tất cả

Trả lời

Các vấn đề liên quan