visual-framework / vf-core

A (primarily CSS) framework that targets needs of life science websites and services
https://stable.visual-framework.dev/
Apache License 2.0
21 stars 10 forks source link

EBI corporate website - new header megamenu #1794

Open sandykadam opened 2 years ago

sandykadam commented 2 years ago

This implies a major overhaul of our current navigation and transitioning from EMBL-EBI's black bar to a pan-EMBL approach, bridging the gap between embl.org and ebi.ac.uk, as well as serve users better in making sense of EMBL-EBI website's information architecture.

As a visitor on the EMBL-EBI website, I would like to:

Get a clear idea of the areas EMBL-EBI is involved in Navigate to different parts of the website from Homepage Find my way back to the Homepage or to a page I started my navigation at Be able to identify without difficulty all menus and navigation cues  See consistency between main navigation and footer Use the megamenu as an expanded view of what the website has to offer Understand the full extent of global search on the EMBL-EBI website

Background

Ken's approach to go with EMBL white bar - https://docs.google.com/presentation/d/1QLmaPqZXxSTeXOHxI-Uv06h3ze8SG3CFlE_KKh3iTR4/edit Try to build navigation inline with group microsite - https://www.ebi.ac.uk/about/teams/web-development/   Mockup for 1st, 2nd, 3rd level navigation with different ideas & suggestions

Originally requested from - ECWR-9 also consider this one ECWR-5

nikiforosk commented 2 years ago

Some additional documentation in relation to this:

Issue #1718 is a preliminary exploration of this topic in November 2021, including mockups by Carla.

Slides from the November 2021 sprint which include some notes on the implementation.

The July 2021 sprint was an earlier exploration of navigation.

Ken's presentation (June 2021 - also mentioned in Sandeep's comment above).

WCC presentation (13 May 2022) about the issues with the black bar.

NNg design guidelines on drop-downs and mega-menus.

Launching GOV.UK’s new menu bar and Rolling out a new design for browsing GOV.UK by topic by the GDS.

nikiforosk commented 2 years ago

Also a note on implementation:

The component is vf-mega-menu and is currently in Alpha stage.

We use it on the VF site:

vf-mega-menu-Screenshot 2022-08-25 at 10 19 10

<a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section" data-vf-js-mega-menu-section-id="components-content-section" href="/components">Components</a>

Ken mentions in his slides that it was meant to be applied to embl.org and the covid19 portal but I'm not sure if this had happened yet.

nikiforosk commented 2 years ago

Another note that when we design this menu we should try to address various issues with the way analytics are currently used to track the black bar (Viewing this spreadsheet requires access) as well as the accessibility errors and alerts on the black bar.

nikiforosk commented 1 year ago

I just noticed that EMBL has a rule that the logo should be left-aligned in digital products:

The EMBL logo should be aligned to the top and left of EMBL digital products Where the EMBL logo is a link it should always point to www.embl.org

We can refer to it to justify future changes of the logo placements at the EBI top navigation bar.