Avada主题 - 子菜单自定义 [英] Avada Theme - Submenu customization

问题描述

我刚开始在我的wordpress网站上使用 Avada主题。我需要自定义左侧的菜单。子菜单中的项目应显示在父项的下方，而不是旁边的项目中。

I just started using the Avada Theme in my wordpress site. I need to customize the menu on the left hand side. The items in the submenu should be shown below the parent item, not on next to it. I started by using the side-navigation css styles, but I can't get the child items to work.

.side-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ededed;
  margin-bottom: 20px;
}
.side-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav li {
  margin: 0;
  padding: 0;
}
.side-nav li a {
  border-bottom: 1px solid #ededed;
  display: block;
  height: auto;
  font-weight: normal;
  font: 14px/39px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
  color: #333333;
}
.side-nav li a {
  line-height: 1.69em;
  padding: 8px 0;
}
.side-nav li a:hover {
  background: none;
}
.side-nav li.current_page_item > a {
  background: none;
  color: #a0ce4e;
}
.side-nav li.current_page_item li a {
  color: #333333;
  border-bottom: 1px solid #ededed;
}
.side-nav .children {
  display: none;
  margin-left: 15px;
}
.side-nav .arrow {
  display: inline;
  margin-left: 0;
}
.side-nav .arrow:after {
  position: absolute;
  font-size: 14px;
  font-family: IcoMoon;
}
.side-nav-left .side-nav {
  border-right: 1px solid #ededed;
}
.side-nav-left .side-nav li.current_page_item > a {
  border-right: 3px solid #a0ce4e;
}
.side-nav-left .side-nav .arrow {
  margin-left: 10px;
}
.side-nav-left .side-nav .arrow:after {
  content: '\f105';
}
.side-nav-right .side-nav {
  border-left: 1px solid #ededed;
}
.side-nav-right .side-nav li.current_page_item > a {
  padding-left: 23px;
  border-left: 3px solid #a0ce4e;
}
.side-nav-right .side-nav li a {
  padding-left: 25px;
}
.side-nav-right .side-nav .arrow {
  margin-right: 10px;
}
.side-nav-right .side-nav .arrow:after {
  content: '\f104';
}
.side-nav-right .side-nav .children {
  margin-left: 40px;
}
.side-nav-right .side-nav .children a {
  padding-left: 0;
}

为了更好地理解，我试图构建一个截图。

左边的图片显示菜单的当前样式/子菜单。右侧的图片显示了Avada附带的侧面导航模板。开箱即可使用主菜单中的侧导航风格。我已经在Theme-Fursion论坛上发布了一个问题，但他们无法帮助我。也许你可以给我一个提示。
谢谢

For better understanding here is a screenshot of what I try to build. The Image on the left shows the current style of the menu / submenu. The image on the right is showing the side-navigation template which comes with Avada. Out of the Box it's not possible to use the side-navigation style in the main menu. I already posted a question in the Theme-Fursion forum, but they were not able to help me. Maybe you can give me a hint. Thank you

推荐答案

为了达到这个效果，您必须将子菜单列表的位置从绝对至相对，然后调整一下以这种方式：

To achieve this effect you would have to change the positioning of the submenu list from absolute to relative, and adjust it a bit e.g. in this way:

body.side-header-left #side-header #nav > ul > li > ul.sub-menu {                
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 0;
    overflow:hidden;
}
body.side-header-left #side-header #nav > ul > li:hover > ul.sub-menu,
body.side-header-left #side-header #nav > ul > li.current_page_item > ul.sub-menu {
    height: auto;
}

这篇关于Avada主题 - 子菜单自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！