[英]Auto-Generated Side Menu for Weebly, perhaps with JavaScript or jQuery
Has anyone developed a way to automatically generate a left menu for a Weebly site, maybe through JavaScript or jQuery? 有没有人开发出一种方法,可以通过JavaScript或jQuery自动为Weebly网站生成左侧菜单? I don't really care for the moving dropdown menus and would prefer to have side menus instead. 我不太在意下拉菜单的移动,而是希望使用侧面菜单。 On the Weebly forums site, there is a description about how to create each one manually, but then you would need to update it every time you added a page. 在Weebly论坛站点上,有关于如何手动创建每个页面的描述,但是每次添加页面时,您都需要对其进行更新。
I have come up with my own solution for this, using jQuery and CSS. 我已经使用jQuery和CSS提出了自己的解决方案。
Here's the general process: 这是一般过程:
Get the root link of the current page. 获取当前页面的根链接。 If you're on a main link, then that's it, otherwise, climb the tree to the parent. 如果您在主链接上,就是这样,否则,将树爬到父级。
Determine if there are any sublinks to the main parent link. 确定是否有任何子链接到主父链接。 If not, do nothing with a left menu. 如果不是,请使用左侧菜单不执行任何操作。
If there are sublinks, get those from the navigation that is already on the page. 如果有子链接,请从页面上已有的导航中获取那些子链接。
Create a structure to move the page contents to the right and give room for the left menu. 创建一个结构以将页面内容移至右侧,并为左侧菜单留出空间。
Copy the sublinks into the left menu area. 将子链接复制到左侧菜单区域。
The JavaScript JavaScript
<script type="text/javascript">
// You need this since Weebly uses another JavaScript library
jQuery.noConflict();
function AddMenu() {
// Find active link
var activeLink = jQuery("#active");
if (activeLink.length == 0) {
activeLink = jQuery(".wsite-nav-current");
}
var linkParent = activeLink;
//find root page
while (linkParent.parent().parent().hasClass("wsite-menu-wrap")) {
linkParent = linkParent.parent().parent().parent();
}
// add menus when there are sub items to the root page -- but don't when there are no children (main page)
if (linkParent .find("div").length > 0) {
var contentDiv = jQuery("#wsite-content");
//I add a table structure, which I know isn't the best, but it works well here.
contentDiv.html("<table class='leftmenupage'><tr><td class='leftmenu'>" + linkParent.html()
+ "</td><td class='rightcontent'>" + contentDiv.html()+ "</td></tr></table>");
jQuery(".leftmenu div").show();
}
// Mark main nav link with id="active"
var linkHref = linkParent.find("a").attr("href");
var navLinks = jQuery("#navigation a");
for (var i = 0; i < navLinks.length; i++) {
if (navLinks.eq(i).attr("href") == linkHref) {
navLinks.eq(i).parent().attr("id", "active");
}
}
}
AddMenu();
</script>
The CSS CSS
ul.wsite-menu li { padding-bottom: 5px; }
.leftmenupage { margin-left: -15px; width:850px; }
td.leftmenu {
width: 200px;
white-space: nowrap;
padding: 7px 7px;
vertical-align: top;
border-radius: 15px;
background: #ddd;
color: #333;
padding: 12px 12px;
min-width: 200px;
min-height: 250px;
}
td.leftmenu li { padding-bottom: 7px; }
td.leftmenu a {
color: #333;
font-size: 1.33em;
padding: 5px 0px;
display: block;
}
td.leftmenu a:hover {text-decoration: underline; }
td.leftmenu li a { font-size: 1em; }
td.leftmenu li{
color: #333;
font-size: 1em;
padding: 2px 0px;
}
td.leftmenu li li {
color: #333;
font-size: 1em;
padding: 2px 0 2px 15px;
}
td.rightcontent {
width: 75%;
padding-left:25px;
width: 650px;
}
For more detailed instructions on how to implement this, see my blog post : 有关如何实现此功能的更多详细说明, 请参阅我的博客文章 :
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.