菜单

如何在标题导航中嵌入代码?

点击设置->个性化->标题导航,选择“ Codeblocks配置”,支持HTMLCSS的代码嵌入,兼容PCMobile

* “表单配置”与“Codeblocks配置”不能同时使用。

*使用代码块自定义后,左侧的文字颜色和文本选择颜色设置将无效。

*该功能仅在付费版本中可用。

个人电脑


移动的


模板参考:

*您可以自定义和替换代码中的“一级”、“二级菜单”、“多级”、“其他多级”


一级导航栏

HTML:
 <ul class="custom-nav">
      <li>
        <a href="https://www.helplook.net/" target="_blank">一级</a>
      </li>
      <li>
        <a href="https://www.helplook.net/" target="_blank">一级</a>
      </li>
      <li>
        <a href="https://www.helplook.net/" target="_blank">一级</a>
      </li>
      <li>
        <a href="https://www.helplook.net/" target="_blank">一级</a>
      </li>
    </ul>


CSS:
 .hl-custom-nav {
        height: 100%;
        color: #000000;
      }
      .custom-nav {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        margin: 0 auto;
      }
      .custom-nav ul,
      .custom-nav li {
        padding: 0;
        margin: 0;
      }
     .hl-custom-nav  li {
        list-style-type: none;
        width: 90px;
      }
      .custom-nav li a {
        display: block;
        text-align: center;
        text-decoration: none;
      }
      .custom-nav > li a {
        height: 65px;
        line-height: 65px;
      }
      .custom-nav ul li a {
        font-size: 14px;
        font-weight: normal;
      }
      .custom-nav li:hover > a {
        color: #0761e7;
      }


效果图:

article picture


二级导航栏

html:
 !# 3@!


CSS:
 .hl-custom-nav {
        height: 100%;
        color: #000000;
      }
      .custom-nav {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        margin: 0 auto;
      }
      .custom-nav ul,
      .custom-nav li {
        padding: 0;
        margin: 0;
      }
     .hl-custom-nav li {
        list-style-type: none;
        width: 110px;
      }
      .custom-nav li a {
        display: block;
        text-align: center;
        text-decoration: none;
      }
      .custom-nav > li a {
        height: 65px;
        line-height: 65px;
      }
      .custom-nav > li ul a {
        height: 50px;
        line-height: 50px;
      }
      .custom-nav > li ul {
        background-color: #fff;
      }
      .custom-nav li ul {
        visibility: hidden;
        position: absolute;
        top: 60px;
      }
      .custom-nav ul li a {
        font-size: 14px;
        font-weight: normal;
      }
      .custom-nav li:hover > a {
        color: #0761e7;
      }
      .custom-nav > li:hover ul {
        visibility: visible;
        box-shadow: 0 0 0 0px #dcdfe6 inset;
      }
      .hl-custom-nav .diff-child {
        display: flex;
        flex-wrap: wrap;
        width: 250px;
      }
      .hl-custom-nav .diff-child li {
        margin-right: 12px;
      }


效果图:

article image


一级和二级导航栏

html:
 !# 5@!


CSS:
 .hl-custom-nav {
        height: 100%;
        color: #000000;
      }
      .custom-nav {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
        margin: 0 auto;
      }
      .custom-nav ul,
      .custom-nav li {
        padding: 0;
        margin: 0;
      }
      .hl-custom-nav li {
        list-style-type: none;
        width: 110px;
      }
      .custom-nav li a {
        display: block;
        text-align: center;
        text-decoration: none;
      }
      .custom-nav > li a {
        height: 65px;
        line-height: 65px;
      }
      .custom-nav > li ul a {
        height: 50px;
        line-height: 50px;
      }
      .custom-nav > li ul {
        background-color: #fff;
      }
      .custom-nav li ul {
        visibility: hidden;
        position: absolute;
        top: 60px;
      }
      .custom-nav ul li a {
        font-size: 14px;
        font-weight: normal;
      }
      .custom-nav li:hover > a {
        color: #0761e7;
      }
      .custom-nav > li:hover ul {
        visibility: visible;
        box-shadow: 0 0 0 0px #dcdfe6 inset;
      }
      .hl-custom-nav .diff-child {
        display: flex;
        flex-wrap: wrap;
        width: 250px;
      }
      .hl-custom-nav .diff-child li {
        margin-right: 12px;
      }


效果图:

article image

上一个
如何编辑标题导航?
下一个
如何自定义标题导航徽标、颜色、文字颜色、文本选择颜色、URL?
最近修改: 2024-09-23Powered by