在覆写菜单的时候，由于twig文件中的变量太多过于复杂，所以留档。在以后重写菜单样式的时候，可以按照此结构去写menu--main.html.twig文件和html框架，只修改css文件
html框架：
<div class="header-nav wrapper"> <div class="collapse"> <ul class="nav"> <li class="nav-item"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Species</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Search</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">DNA Search</a></li> <li><a class="dropdown-item" href="#">mRNA Search</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Analysis</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">Tools</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Blast</a></li> <li><a class="dropdown-item" href="#">Jbrowse</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Download</a></li> </ul> </div> </div> |
css框架：
/* nav */ .header-nav { font-family: Arial, sans-serif; height: 40px; } .nav { list-style-type: none; /* Remove default list styling */ margin: 0; padding: 0; float: left; justify-content: space-around; /* Even spacing between the items */
} .nav-item { position: relative; float: left; } .nav-link { display: block; text-align: center; padding: 14px 16px; text-decoration: none;
} /* Hover effects */ .nav-link:hover, .dropdown:hover > .nav-link { background-color: #246873; color: white; } /* Dropdown styling */ .dropdown { position: relative; /* Ensures dropdown is positioned relative to its parent */ }
.dropdown-menu { display: none; /* Hide dropdown by default */ position: absolute; /* Absolute position to the parent item */ background-color: #246873; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; white-space: nowrap; /* Ensures the dropdown content stays on one line */ } .dropdown:hover .dropdown-menu { display: block; /* Show dropdown on hover */ }
.dropdown-item { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-item:hover { background-color: grey; } /* Dropdown Arrow with vertical adjustment */ .dropdown > .nav-link::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; margin-bottom: 3px; /* Adjust this value to move the triangle up */ vertical-align: middle; border-left: 5px solid transparent; /* Adjust size to make wider or narrower */ border-right: 5px solid transparent; /* Adjust size to make wider or narrower */ border-top: 5px solid #000; /* Adjust size and color as necessary */ } /* Hover effect to change arrow color along with text */ .dropdown:hover > .nav-link::after { border-top-color: white; /* Changes color on hover */ }
/* endnav */ |
menu--main.html.twig文件框架
{% import _self as menus %}
<div class="collapse"> {# We call a macro which calls itself to render the full tree. @see http://twig.sensiolabs.org/doc/tags/macro.html #}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %} {% import _self as menus %} {% if items %} {% if menu_level == 0 %} <ul{{ attributes.addClass('nav') }}> {% for item in items %} {% set item_classes = [ 'nav-item', item.is_expanded ? 'dropdown' : '' ] %} {% if item.is_expanded %} <li{{ item.attributes.addClass(item_classes) }}> <a href="{{ item.url }}" class="nav-link dropdown-toggle" data-toggle="dropdown">{{ item.title }}</a> <ul class="dropdown-menu"> {{ menus.menu_links(item.below, attributes, menu_level + 1) }} </ul> {% else %} <li{{ item.attributes.addClass(item_classes) }}> <a href="{{ item.url }}" class="nav-link">{{ item.title }}</a> {% endif %} </li> {% endfor %} </ul> {% else %} {% for item in items %} <li> <a href="{{ item.url }}" class="dropdown-item">{{ item.title }}</a> </li> {% endfor %} {% endif %} {% endif %} {% endmacro %} </div> |
macro用于输出ul，它被包裹在一个div中，div的上面是菜单按钮。
第37行：
判断是否为第一级菜单，如果是则添加类名navbar-nav。
第38行：
用一个for循环来输出列表项（li）
第39-45行：
用set给一个变量赋值，变量的名称是itemclasses，它是一个数组。
关于set之前已经讲过了，但是这里有一个新的用法，第42，43行是做了2个判断，在符合条件的情况下，为数组增加新的值。他们的含义在文件最上面的注释中有。其中第42行的代码没有问题，但是在实际中当链接指向首页的时候，代码不起作用。这是一个Drupal7时代就遗留的bug。解决方案是自己写js来添加active类名。
46行到52行：
一套if else判断，如果菜单项包含下拉菜单，则分别为li和a标签添加对应的类名和其他html属性，如果不包含则添加对应的类名。
第59到67行：
如果是二级菜单，则直接用div包裹a标签，并添加对应的类名。此处2次使用removeClass来移除之前添加到ul上的类名“navbar-nav”。