Как добавить третий уровень в это выпадающее меню (блогер - javascript) - PullRequest
Новая
       35

Как добавить третий уровень в это выпадающее меню (блогер - javascript)

0 голосов
/ 25 ноября 2018

Мне нужно добавить третий уровень в это выпадающее меню.Это код из шаблона 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>

Большое спасибо.

...