menue.jpg

In fact, just think about trying PS's plug-in for making long shadows==(Portal: http://lab.rayps.com/lsg/ ）

It is also recorded.

html structure 

 <tree id="mulu"></tree>

Explain:

Insert this code under the div of the post. php article!
Put the #haha Change to the ID of your article content div.
The php code that calls the article content is <? php parseContent($this); ?> That is, use the div layer to include the content.

The code comes from this article: Js automatically generates directories for blog posts

JS code

 function GenerateContentList() { var mainContent = $("#mulu"); var h1_list = $("#haha h1"); var h2_list = $("#haha h2"); if (mainContent.length < 1) { return } if (h1_list.length > 0) { var content = ""; content += ""; Content+='<a class="title_menue">[Article directory]</a>'; content += '<ol class="toc">'; for (var i = 0;  i < h1_list.length; i++) { var go_to_top = '<a name="_label' + i + '"></a>'; $(h1_list[i]).before(go_to_top); var h2_list = $(h1_list[i]).nextAll("h2"); var li2_content = ""; for (var j = 0;  j < h2_list.length; j++) { var tmp = $(h2_list[j]).prevAll("h1").first(); if (! tmp.is(h1_list[i])) { break } var li2_anchor = '<a pjax="no" name="_label' + i + "_" + j + '"></a>'; $(h2_list[j]).before(li2_anchor); li2_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h2_list[j]).text() + "</span></a></li>" } var li1_content = ""; if (li2_content.length > 0) { li1_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + '</span></a></li><ol class="toc-child">' + li2_content + "</ol>" } else { li1_content = '<li class="toc-item toc-level-' + i + '"><a  pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h1_list[i]).text() + "</span></a></li>" } content += li1_content } if ($("#mulu").length !=  0) { $($("#mulu")[0]).prepend(content) } } else { if (h1_list.length == 0 && h2_list.length > 0) { var content = ""; content += ""; Content+='<a class="title_menue">[Article directory]</a>'; content += '<ol class="toc">'; for (var i = 0;  i < h2_list.length; i++) { var go_to_top = '<a  pjax="no" name="_label' + i + '"></a>'; $(h2_list[i]).before(go_to_top); var h3_list = $(h2_list[i]).nextAll("h3"); var li3_content = ""; for (var j = 0;  j < h3_list.length; j++) { var tmp = $(h3_list[j]).prevAll("h2").first(); if (! tmp.is(h2_list[i])) { break } var li3_anchor = '<a  pjax="no" name="_label' + i + "_" + j + '"></a>'; $(h3_list[j]).before(li3_anchor); li3_content += '<li class="toc-item toc-level-' + i + "_" + j + '"><a pjax="no" class="toc-link" href="#_label' + i + "_" + j + '"><span class="toc-text">' + $(h3_list[j]).text() + "</span></a></li>" } var li2_content = ""; if (li3_content.length > 0) { li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + '</span></a></li><ol class="toc-child">' + li3_content + "</ol>" } else { li2_content = '<li class="toc-item toc-level-' + i + '"><a pjax="no" class="toc-link" href="#_label' + i + '"><span class="toc-text">' + $(h2_list[i]).text() + "</span></a></li>" } content += li2_content } if ($("#mulu").length !=  0) { $($("#mulu")[0]).prepend(content) } } } } GenerateContentList();

CSS code

I am based on Little buddy | true | singing. sir Based on the directory tree.

Suspended on the right side of the article, you can modify it according to your theme.

 #mulu { float: right; margin-left: 10px; background: #f8f8f8; position: relative; z-index: 100 } span.toc-text { color: #707070 } span.toc-text:hover { color: #adadad; } ol.toc { padding-left: 15px; margin-left: 6px; margin-top: 0 } a.title_menue { padding-left: 10px } .toc-item { margin-left: 10px; margin-right: 10px }

Scatter flowers!! Get up and enjoy your article directory tree!

Last modification: March 23, 2019
© Allow specification reprint
Do you like my article?
Don't forget to praise or appreciate, let me know that you accompany me on the way of creation.