반응형
Zurb Foundation 탑바가 전혀 작동하지 않음
모바일 화면에서 Zurb's Foundation Topbar를 작동시키는 데 문제가 있습니다.
화면 폭을 가장 작게 설정하고 크롬을 테스트하고 있습니다.모든 CSS와 JS가 로드되며 클릭할 때까지 메뉴는 정상으로 표시됩니다.
주의: Word Press를 사용하고 있습니다.
제 코드는 다음과 같습니다.
<!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>
포장해 보세요foundation()을 호출하다.jQuery(document).ready()다음과 같이 기능합니다.
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
아마 그게 문제가 아닐 거야단, 헤드에 JS를 로드하고 있기 때문에 JS가 완전히 로드되기 전 또는 후에 DOM이 로드되는지 궁금합니다.
다음으로 기본 Foundation JS 파일이 누락된 것 같습니다.다음과 같은 것이 있습니다.
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
그렇지만foundation.topbar.js 에 의존하다foundation.js(모든 Foundation 플러그인과 마찬가지로)
다음으로 WordPress가 생성하는 서브메뉴를 어떻게 분류할 계획입니까?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>
생성된 컨텐츠를 검사하면, 이 컨텐츠가 누락되어 있는 것이 확실합니다."has-dropdown"의 클래스<li>및 그"dropdown"의 클래스<ul>.
[편집]
나는 또한 당신이 당신의 질문에서 당신의 마크업을 수정하고 이제 두 가지를 가지고 있다는 것을 알아챘다.<nav>두 요소가 모두 정의되어 있습니다.data-topbar기여하다.(그것이 질문의 페이스트 에러인지, 마크업이 정말 그렇게 보이는지 잘 모르겠습니다).
대신 다음 마크업을 테스트로 사용하여 Foundation Topbar 기능이 작동하는지 확인합니다(다음은 문서의 샘플).
<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>
이것이 효과가 있는 경우는, 자신의 마크 업을 재검토해, 다른 클래스나 요소나 네스팅을 비교 대조해, 거기에 따라서 코드를 조정합니다.예시로 시작하고 거기서부터 수정하는 것이 더 쉬울 수도 있습니다.
언급URL : https://stackoverflow.com/questions/24288179/zurb-foundation-topbar-not-working-at-all
반응형
'itsource' 카테고리의 다른 글
| SSH에서 Git을 사용하여 특정 디렉터리 가져오기 (0) | 2023.03.23 |
|---|---|
| MongoDB - 관리자 사용자에게 권한이 없습니다. (0) | 2023.03.23 |
| jq 배열에서 값 선택 (0) | 2023.03.23 |
| 레디스엔 언제?언제 MongoDB에 접속합니까? (0) | 2023.03.23 |
| AuthError - 오류: 증폭이 올바르게 구성되지 않았습니다. (0) | 2023.03.23 |