search

ebiwd / EBI-Pattern-library

Please head to the new pattern library:
http://www.ebi.ac.uk/style-lab/websites/patterns/
2 stars 2 forks source link

Document horizontal secondary navigation pattern #24

Closed sebpca closed 7 years ago

sebpca commented 7 years ago

Refrence: /meta-patterns/page-structure/

It would be nice to have an example code for the secondary menu as we don't really know which css classes to keep/remove from the main EBI template example link (e.g. is leaf class needed for li elements?):

<div class="menu-block-wrapper menu-block-4 menu-name-main-menu parent-mlid-0 menu-level-3">
  <ul class="menu menu-tree-menu"><li class="first leaf has-children menu-mlid-3057"><a href="/about/leadership" title="Leadership and guidance structure">Leadership</a></li>
    <li class="leaf menu-mlid-3075"><a href="/about/funding" title="Funding of EMBL-EBI">Funding</a></li>
    <li class="leaf menu-mlid-3079"><a href="/about/background" title="History of EMBL-EBI">Background</a></li>
    <li class="leaf menu-mlid-3076"><a href="/about/collaborations" title="EMBL-EBI partnerships">Collaborations</a></li>
    <li class="leaf menu-mlid-14438"><a href="/about/our-impact" title="Impact: reports, facts and figures">Our impact</a></li>
    <li class="last leaf has-children menu-mlid-14440"><a href="/about/women-in-science">Women in Science</a></li>
  </ul>
</div>
khawkins98 commented 7 years ago

Good point. These secondary menus aren't — as of this moment — an officially blessed pattern.

screen shot 2017-03-08 at 12 39 36

They evolved as right-sidebar navigation wasn't very effective, nor did it help indicate the breadcrumb structure.

So, a couple things: 1) Need to revisit this and distill a pattern 2) Make usage rules (when to have horiz at top of page vs right sidebar vertical)

We discuss the menu patterns a little at https://ebiwd.github.io/EBI-Pattern-library/meta-patterns/page-structure/, but it really is quite lacking.

But, to your comment, the .leaf class isn't necessary, that's a class that Drupal is injecting by default. Key bit of code/structure is in ebi-global.css@481: 

  ul.menu.secondary-menu li,
  .secondary-menu ul.menu li {
    display: inline-block; }

In the Drupal scenario, we have .secondary-menu on a parent div, as it's the best way for drupal. But the most semantically correct way would be to add it on the ul.menu.

khawkins98 commented 7 years ago

This is now documented: http://www.ebi.ac.uk/style-lab/websites/patterns/menu.html