Skel：画布外导航不会在标记中显示，子导航看起来太高
[英]Skel: Off-canvas navigation doesn't show up in mark-up and sub-naviagation appears too high
问题描述
我需要将此HTML5UP模板转换为Wordpress主题。 到目前为止，我对结果总体上满意，但是出于某种原因，“画布外导航”（ <div id="titleBar"> ， <div id="navPanel">以及所有后续代码都可以看到我检查了原始页面的元素）没有显示在我的代码中，当然也没有显示在移动视图中。 同时，在下拉菜单（使用jquery.dropotron.min.js）起作用的同时，子导航与原始菜单相比显得“太高”。
显然，我搞砸了，但是我很难找出我做错了什么。 我远不是代码专家，这就是为什么我想寻求您的宝贵帮助。 作为记录，所有脚本和样式均加载在functions.php页面中。
这是我的标记：
<!doctype html>
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="wp-content/themes/jc/style.css" />
<title>My Blog</title>
<script>
$(function() {
// Note: make sure you call dropotron on the top level <ul>
$('#nav > ul').dropotron({
offsetY: -10 // Nudge up submenus by 10px to account for padding
});
});
</script>
</head>
<body class="homepage">
<div id="page-wrapper">
<!--HEADER-->
<div id="header-wrapper" class="wrapper">
<div id="header">
<!--LOGO-->
<div id="logo">
<h1><a href="index.html">Name Site</a></h1>
<p>Name Site Subtitle</p>
</div>
<!--MENU-->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
<li><a href="#">Sub-Link1</a></li>
</ul></li>
<li><a href="#">Link2</a>
<ul>
<li><a href="#">Sub-Link2</a></li>
<li><a href="#">Sub-Link2</a></li>
</ul></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
</div>
</div>
<!--INTRO-->
<div id="intro-wrapper" class="wrapper style1">
<div class="title">WELCOME</div>
<section id="intro" class="container">
<div class="row">
<div id="welcome-message" class="4u 12u(mobile)">
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="8u">728x90ads</div>
</div>
</section>
</div>
<!--MAIN CONTENT-->
<div class="wrapper style2">
<div class="title">MAIN CONTENT</div>
<div id="main" class="container">
<div class="row 150%">
<div class="4u 12u(mobile)">
<!--LEFT SIDEBAR-->
<div id="sidebar">
<section class="box">
<header>
<h2>Ipsum nullam luctus</h2>
</header>
<p>Malesuada quis eget eros. Nullam sodales cursus sapien, id consequat leo suscipit ut. Praesent id turpis vitae turpis pretium ultricies. Vestibulum sit amet risus elit.</p>
<a href="#" class="button style1">Learn More</a>
</section>
<section class="box">
<header>
<h2>Vitae turpis consequat</h2>
</header>
<ul class="style2">
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic08.jpg" alt="" /></a>
<h3><a href="#">Diam odio lorem</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic09.jpg" alt="" /></a>
<h3><a href="#">Sed duis consequat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
<li>
<article class="box post-excerpt">
<a href="#" class="image left"><img src="wp-content/themes/jc/images/pic10.jpg" alt="" /></a>
<h3><a href="#">Tellus nulla volutpat</a></h3>
<p>Duis odio diam, luctus et vulputate vitae, vehicula ac dolor. Pellentesque at urna eget tellus sed etiam.</p>
</article>
</li>
</ul>
<a href="#" class="button style1">Archives</a>
</section>
</div>
</div>
<div class="8u 12u(mobile) important(mobile)">
<!--CONTENT-->
<div id="content">
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=1" rel="bookmark" title="Permanent Link: Hello world!">Hello world!</a></h2>
<div class="date">Mar 29, 2015</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=1#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</p>
</article>
<div id="content">
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=57" rel="bookmark" title="Permanent Link: Another Post with Everything In It">Another Post with Everything In It</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=5" rel="category">Child Category I</a>,<a href="http://illusion8.com/test/?cat=2" rel="category">Parent Category I</a>,<a href="http://illusion8.com/test/?cat=3" rel="category">Parent Category II</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=57#comments">1 Comment</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p><img class="alignright" src="http://i35.tinypic.com/990wtx.png" alt="WordPress Logo" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. <a href="http://illusion8.com/test/?p=57#more-57" class="more-link">Continue reading »</a></p>
</p>
</article>
<div id="content">
<article class="box post">
<header class="style1">
<h2 align="left"><a href="http://illusion8.com/test/?p=50" rel="bookmark" title="Permanent Link: An Ordered List Post">An Ordered List Post</a></h2>
<div class="date">Sep 17, 2008</div>
<div class="info"><strong>Published by: </strong> <i class="fa fa-user"></i><em> Gioia</em> in <i class="fa fa-tags"></i> <a href="http://illusion8.com/test/?cat=1" rel="category">Uncategorized</a> | <i class="fa fa-comments"></i> <a href="http://illusion8.com/test/?p=50#comments">0 Comments</a></div>
</header>
<a href="#" class="image featured"><img src="wp-content/themes/jc/images/pic01.jpg" alt="" /></a>
<p><p>Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo. Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque semper nibh eget nibh. Sed tempor. Fusce erat.</p>
<h3>An Ordered List</h3>
<ol>
<li>Vestibulum in mauris semper tortor interdum ultrices.</li>
<li>Sed vel lorem et justo laoreet bibendum. Donec dictum.</li>
<li>Etiam massa libero, lacinia at, commodo in, tincidunt a, purus.</li>
<li>Praesent volutpat eros quis enim blandit tincidunt.</li>
<li>Aenean eu libero nec lectus ultricies laoreet. Donec rutrum, nisi vel egestas ultrices, ipsum urna sagittis libero, vitae vestibulum dui dolor vel velit.</li>
</ol>
</p>
</article>
<!-- Pagination (Page-Navi WP Plugin) -->
</div></div></div></div></div></div></div>
<!--FOOTER-->
<div id="footer-wrapper" class="wrapper">
<div id="footer" class="container">
<header class="style1">
<h2>Ipsum sapien elementum portitor?</h2>
<p>Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
Nam pharetra laoreet imperdiet volutpat etiam consequat feugiat.</p>
</header>
<hr />
<div class="row 150%">
<div class="6u 12u(mobile)">
<!-- Contact Form -->
<section>
<form method="post" action="#">
<div class="row 50%">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="contact-name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="text" name="email" id="contact-email" placeholder="Email" />
</div>
</div>
<div class="row 50%">
<div class="12u">
<textarea name="message" id="contact-message" placeholder="Message" rows="4"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="style1" value="Send" /></li>
<li><input type="reset" class="style2" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
</div>
<div class="6u 12u(mobile)">
<!-- Contact -->
<section class="feature-list small">
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-home">Mailing Address</h3>
<p>Untitled Corporation<br />
1234 Somewhere Rd #987<br />
Nashville, TN 00000-0000</p>
</section>
</div>
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-comment">Social Network</h3>
<p>
<a href="#">@untitled-corp</a><br />
<a href="#">facebook.com/untitled</a>
</p>
</section>
</div>
</div>
<div class="row">
<div class="6u 12u(mobile)">
<section>
<h3 class="icon fa-envelope">Email</h3>
<p><a href="#">webmaster@namesite.com</a></p>
</section>
</div>
</div>
</section>
</div>
</div>
<hr />
</div>
<div id="copyright">
<ul>
<li>© NameSite.com</li>
<li>Design by: <a href="#">NameSite2</a> | Based on: <a href="http://html5up.net">HTML5 UP</a> | Powered by: <a href="http://wordpress.com">Wordpress</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
`
提前非常感谢你
1 个解决方案
解决方案1
0 2015-11-17 08:17:22
如果有人感兴趣，我能找到的唯一使该模板作为Wordpress主题工作并且将大部分脚本同时保留在functions.php文件中的解决方案是留在footer.php jquery.dropotron中。 min.js和util.js，而所有其他脚本（jquery.min.js，skel.min，js，skel-viewport.min.js，main.js）都可以放置在functions.php中。 只要确保在jquery.dropotron.min.js之前加载了jquery.js
标记验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.