如何在此下拉菜单中添加第三级(blogger-JavaScript)

时间:2018-11-25 16:56:26

标签: javascript html css blogs blogger

我需要在此下拉菜单中添加第三级。这是来自Blogger模板的代码,在这里我可以在主菜单中仅具有第一级和第二级。

还有一个Javascript,它允许Blogger识别出这是第二级菜单(实际上,当我想在第二级菜单中放置文字时,我需要在文字前添加“ _”,然后它将自动进入第二级)。

我曾经有另一个模板,可以在第三级中添加文本,只需在文本之前添加“ __”即可。但是代码是加密的,所以我无法复制它。

我希望可以在文本(例如__books)前使用命令“ __”添加第三级,而不必每次都在HTML工作表中进行操作(实际上,使用此javascript,Blogger会自动创建下拉菜单HTML中的向下菜单顺序。

可以帮我吗?

这是CSS:

/* Main Menu
=========================== */
#LinkList60 {
display:none;
}
.menu-display {
display:block !important;
}
.menu-opacity {
z-index: 9999;
position: relative;
}
.main-menu {
border-bottom: 1px solid $(mainnav.border);
border-top: 1px solid $(mainnav.border);
}
.menu-opacity .main-menu {
border-top: 0;
}
.main-menu {
  text-align:center;
  float:none;
    background-color:$(mainnav.bg.color);
    letter-spacing: 1px;
}
.main-menu ul li ul {
  z-index:998;
}
.main-menu > ul > li {
  float:none;
  display:inline-block;
  line-height:50px;
  position:relative;
  list-style:none;
}
.main-menu > ul > li:last-child {
  margin-right:0;
}
.main-menu > ul > li > a {
  padding:10px 20px;
  display:inline-block;
  line-height:50px;
    font:$(mainnav.font);
    color:$(mainnav.text.color);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.main-menu > ul > li > a:hover {
color:$(mainnav.hover.color);
}
.main-menu > ul > li:hover > ul {
display:block;
  top:50px;
  background-color:$(dropdown.bg.color);
}
.main-menu ul > li ul {
display:none;
position:absolute;
  left:0;
  top:100%;
  z-index:993;
  width:200px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}
.main-menu li ul li a {
  height:inherit;
  float:inherit;
  text-align:left;
  display:block;
  margin:0!important;
  padding:0 15px;
  z-index:993;
  border-bottom:1px solid rgba(0, 0, 0, 0.1);
    font:$(dropdown.font);
  color:$(dropdown.font.color);
    line-height:38px;
}
.main-menu li ul li:last-child a {
  border-bottom:none
}
.main-menu li a i {
  margin-left:5px
}
.main-menu li ul li a:hover {
  background-color:$(dropdown.bg.colorhover);
}
.main-menu > ul > li:hover li:hover > a {
  color:$(dropdown.font.colorhover);
}

这是Javascript:

<script type='text/javascript'>
//<![CDATA[
$("#LinkList60").each(function(){$(this).addClass('main-menu');var e="<ul id='nav'><li><ul class='sub-menu'>";
$("#LinkList60 li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul class='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);
$("#LinkList60 ul").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()});
$("#LinkList60 li").each(function(){var e=$(this);if(e.html().replace(/\s|&nbsp;/g,"").length==0)e.remove()});
$('#LinkList60 a').each(function(){var page_url=$(location).attr('href'),link=$(this).attr('href');if(link===page_url){var id=$(this).parents(':eq(1)').attr('id');if(id==='nav'){$(this).parent('li').addClass('current')}else{$(this).parents(':eq(2)').addClass('current')}}});
$('.sub-menu').prev('a').append("<i class='fa fa-angle-down'/>");});
//]]>
</script>

这是Blogger使用javascript自动构建的菜单:

<b:section class='mmenu' id='mmenu' maxwidgets='1' showaddelement='no'>
  <b:widget id='LinkList60' locked='true' title='Main Menu' type='LinkList' version='1'>
    <b:widget-settings>
      <b:widget-setting name='text-10'><![CDATA[_History & Archaeology]]></b:widget-setting>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='link-1'>https://loveculturelanguage.blogspot.com/search/label/Love</b:widget-setting>
      <b:widget-setting name='link-13'>https://loveculturelanguage.blogspot.com/search/label/English</b:widget-setting>
      <b:widget-setting name='link-2'>https://loveculturelanguage.blogspot.com/search/label/Pensieri</b:widget-setting>
      <b:widget-setting name='link-12'>https://loveculturelanguage.blogspot.com/search/label/Language</b:widget-setting>
      <b:widget-setting name='link-0'>https://loveculturelanguage.blogspot.com</b:widget-setting>
      <b:widget-setting name='link-14'>https://loveculturelanguage.blogspot.com/search/label/%E6%97%A5%E6%9C%AC%E8%AA%9E</b:widget-setting>
      <b:widget-setting name='link-11'>https://loveculturelanguage.blogspot.com/search/label/Cinema</b:widget-setting>
      <b:widget-setting name='link-10'>https://loveculturelanguage.blogspot.com/search/label/History%20%26%20Archaeology</b:widget-setting>
      <b:widget-setting name='text-9'>_Folklore</b:widget-setting>
      <b:widget-setting name='link-9'>https://loveculturelanguage.blogspot.com/search/label/Folklore</b:widget-setting>
      <b:widget-setting name='text-8'>_Art</b:widget-setting>
      <b:widget-setting name='link-7'>https://loveculturelanguage.blogspot.com/search/label/Books%20%26%20Literature</b:widget-setting>
      <b:widget-setting name='link-8'>https://loveculturelanguage.blogspot.com/search/label/Art</b:widget-setting>
      <b:widget-setting name='link-5'>https://loveculturelanguage.blogspot.com/search/label/Woman</b:widget-setting>
      <b:widget-setting name='link-6'>https://loveculturelanguage.blogspot.com/search/label/Culture</b:widget-setting>
      <b:widget-setting name='link-3'>https://loveculturelanguage.blogspot.com/search/label/Travels</b:widget-setting>
      <b:widget-setting name='link-4'>https://loveculturelanguage.blogspot.com/search/label/Photography</b:widget-setting>
      <b:widget-setting name='text-1'>Love</b:widget-setting>
      <b:widget-setting name='text-0'>Home</b:widget-setting>
      <b:widget-setting name='text-3'>_Travels</b:widget-setting>
      <b:widget-setting name='text-2'>_Pensieri</b:widget-setting>
      <b:widget-setting name='text-5'>_Woman</b:widget-setting>
      <b:widget-setting name='text-4'>_Photography</b:widget-setting>
      <b:widget-setting name='text-7'><![CDATA[_Books & Literature]]></b:widget-setting>
      <b:widget-setting name='text-6'>Culture</b:widget-setting>
      <b:widget-setting name='text-11'>_Cinema</b:widget-setting>
      <b:widget-setting name='text-12'>Language</b:widget-setting>
      <b:widget-setting name='text-13'>_English</b:widget-setting>
      <b:widget-setting name='text-14'>_日本語</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
  </b:widget>
</b:section>

非常感谢您。

0 个答案:

没有答案