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.