admin管理员组

文章数量:1291027

I'm having troubles trying to get Zurb's Foundation Topbar to work while on a mobile screen.

I'm testing on chrome with the screen width set to the smallest. All CSS and JS are loaded, the menu looks fine until you click and nothing.

Note: I'm using WordPress.

Here's my code: 

<!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="/">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="/">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="/">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="/">Contact Us</a></li>
                                        </ul>   
                                    </section>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

I'm having troubles trying to get Zurb's Foundation Topbar to work while on a mobile screen.

I'm testing on chrome with the screen width set to the smallest. All CSS and JS are loaded, the menu looks fine until you click and nothing.

Note: I'm using WordPress.

Here's my code: 

<!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>
  • javascript
  • jquery
  • wordpress
  • zurb-foundation
Share Improve this question edited Jun 18, 2014 at 15:22 Richard Skinner asked Jun 18, 2014 at 14:25 Richard SkinnerRichard Skinner 7383 gold badges10 silver badges26 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

Try wrapping your foundation() call in a jQuery(document).ready() function like so:

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

That's probably not the issue... But I'm wondering if your DOM is loading before or after your JS has a chance to fully load since you're loading your JS in the head.

Next, it looks like you might be missing the base Foundation JS file. You have this:

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

But foundation.topbar.js depends on foundation.js (as do all of the Foundation plugins).

Next, how are you planning to class your submenus that WordPress is generating? Notice the markup in the Zurb Foundation docs:

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

If you inspect your generated content I'm betting you're missing the "has-dropdown" class on the <li> and the "dropdown" class on the <ul>.

[edit]

I also noticed that you edited your markup in your question and now have two <nav> elements and both are defining a data-topbar attribute. (I'm not sure if that's just a paste error in your question or if your markup really looks like that).

Try using the following markup instead, just as a test, to see if the Foundation Topbar functionality is working (this is the sample from the docs):

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

If that does work, then reinspect your own markup, pare & contrast what classes and elements and nesting might be different and then adjust your code accordingly. It might just be easier to start with their example, and then tweak from there.

本文标签： javascriptZurb Foundation Topbar Not Working At AllStack Overflow

版权声明：本文标题：javascript - Zurb Foundation Topbar Not Working At All - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741511063a2382609.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。