Navigation - Dropdown

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Code

HTML Twig CSS SCSS JS 
<nav id="main-menu" role="navigation">
  <ul class="menu menu-level--0">
    <li class="navigation__group">
      <span class="">People</span>
      <ul class="menu menu-level--1" style="display: none;">
        <li class="navigation__group-sub">
          <a href="./about-us/">About Us</a>
        </li>
        <li class="navigation__group-sub">
          <a href="./contact/">Contact</a>
        </li>
      </ul>
    </li>
    <li class="navigation__group active">
      <span class="active">Products</span>
      <ul class="menu menu-level--1 active" style="display: block;">
        <li class="navigation__group-sub">
          <span>ESG Analysis</span>
          <ul class="menu menu-level--2">
            <li class="navigation__group-sub-sub"></li>
            <li class="navigation__group-sub-sub">
              <a href="../products/esg-ratings/">ESG Ratings</a>
            </li>
            <li class="navigation__group-sub-sub">
              <a href="../products/esg-scores/">ESG Scores</a>
            </li>
            <li class="navigation__group-sub-sub">
              <a href="../products/esg-scores/">ESG Scores for Brazil (PT)</a>
            </li>
          </ul>
        </li>
        <li class="navigation__group-sub">
          <span>Climate Risk</span>
          <ul class="menu menu-level--2">
            <li class="navigation__group-sub-sub">
              <a href="./products/climate-vulnerability-scores/">Climate Vulnerability Scores</a>
            </li>
          </ul>
        </li>
        <li class="navigation__group-sub">
          <span>Credit Ratings and ESG</span>
          <ul class="menu menu-level--2">
            <li class="navigation__group-sub-sub"></li>
            <li class="navigation__group-sub-sub">
              <a href="./products/esg-research/">ESG Relevance Scores</a>
            </li>
          </ul>
        </li>
        <li class="navigation__group-sub">
          <a href="./products/esg-research/">ESG Research</a>
        </li>
      </ul>
    </li>
    <li class="navigation__group">
      <span>Learning</span>
      <ul class="menu menu-level--1" style="display: none;">
        <li class="navigation__group-sub">
          <a href="../../learning/esg-investing/">ESG Learning Solutions</a>
        </li>
        <li class="navigation__group-sub">
          <a href="../../learning/esg-fundamentals-certificate/">ESG Fundamentals Certificate</a>
        </li>
      </ul>
    </li>
    <li class="navigation__group">
      <a href="./insights/">Insights</a>
    </li>
  </ul>
</nav>

 

{#
/**
 * @file
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}
{% import _self as menus %}

{#
  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('menu', 'menu-level--' ~ menu_level) }}>
    {% else %}
      <ul class="menu {{ 'menu-level--' ~ menu_level }}">
    {% endif %}
    {% for item in items %}
      {% if menu_level == 0 %}
     	<li{{ item.attributes.addClass('navigation__group') }}>
      {% endif %}
      {% if menu_level == 1 %}
        <li{{ item.attributes.addClass('navigation__group-sub') }}>
      {% endif %}
      {% if menu_level > 1 %}
        <li{{ item.attributes }}>      
      {% endif %}
        {# {{ link(item.title, item.url, { 'data-overlay':[item.url.getOption('attributes').dataoverlay] }) }} #}
        {% if item.url.getOption('attributes').overlay == "_yes" %}
        <span
          {% if item.url.getOption('attributes').overlay == "_yes" %}
            class="overlay__navigation overlay"
          {% endif %}
          {% if item.url.getOption('attributes').dataoverlay is not empty %}
            data-overlay="{{ (item.url.getOption('attributes')).dataoverlay }}"
          {% endif %}
          >
          {{item.title}}
        </span>
        {% else %}
          <a href="{{item.url}}" target="{{ (item.url.getOption('attributes')).target }}">{{item.title}}</a>
          {% endif %}
        {#  #}

        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      	</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

 

.menu-level--1 {
  position: absolute;
  top: var(--navigation-dropdown-top);
  left: 0;
  margin: 0 0 0 var(--spacing-1);
  width: var(--navigation-dropdown-width);
  padding: var(--spacing-1) 0;
  border-radius: var(--border-radius);
  display: none;
}

.menu-level--1 li {
  border-left: 0 solid transparent;
  transition: all 360ms ease;
}

.menu-level--2,
.menu-level--3 {
  margin-bottom: 0.6rem;
  display: none;
}

.menu-level--2 li,
.menu-level--3 li {
  padding-left: 0;
}

.menu-level--2 li:before,
.menu-level--3 li:before {
  content: none;
}

.navigation__group-sub {
  padding-left: 0;
  font-size: var(--navigation-dropdown-font-size);
  line-height: var(--navigation-dropdown-line-height);
  text-align: var(--navigation-dropdown-text-align);
  text-transform: var(--navigation-dropdown-text-transform);
}

.navigation__group-sub:before {
  content: none;
}

.navigation__group-sub a,
.navigation__group-sub span {
  padding: var(--spacing-1) var(--spacing-2);
  font-weight: var(--navigation-dropdown-font-weight);
  line-height: var(--line-height-2);
  cursor: pointer;
  transition: all 360ms ease;
  display: block;
}

.navigation__group-sub span:after {
  content: "\f067";
  font-family: FontAwesomeS;
  float: right;
}

.navigation__group-sub span.active:after {
  content: "\f068";
}

.menu-level--1 {
  background: var(--navigation-dropdown-background);
}

.menu-level--1 li a,
.menu-level--1 li span {
  color: var(--navigation-dropdown-color);
}

.menu-level--1 li a:hover, .menu-level--1 li a:focus,
.menu-level--1 li span:hover,
.menu-level--1 li span:focus {
  color: var(--navigation-dropdown-hover-color);
}

.menu-level--1 li.active {
  background: var(--navigation-dropdown-active-background);
  border-left: var(--navigation-dropdown-border);
}

.menu-level--1 li:hover, .menu-level--1 li:focus {
  background: var(--navigation-dropdown-hover-background);
  border-left: var(--navigation-dropdown-border);
}

.menu-level--2 {
  background: var(--navigation-dropdown-background);
}

.menu-level--2 li a,
.menu-level--2 li span {
  color: var(--navigation-dropdown-color);
}

.menu-level--2 li a:hover, .menu-level--2 li a:focus,
.menu-level--2 li span:hover,
.menu-level--2 li span:focus {
  color: var(--navigation-dropdown-hover-color);
}

.menu-level--2 li.active {
  background: var(--navigation-dropdown-active-background);
  border-left: var(--navigation-dropdown-border);
}

.menu-level--2 li:hover, .menu-level--2 li:focus {
  background: var(--navigation-dropdown-hover-background);
  border-left: var(--navigation-dropdown-border);
}

.menu-level--3 {
  background: var(--navigation-dropdown-background);
}

.menu-level--3 li a,
.menu-level--3 li span {
  color: var(--navigation-dropdown-color);
}

.menu-level--3 li a:hover, .menu-level--3 li a:focus,
.menu-level--3 li span:hover,
.menu-level--3 li span:focus {
  color: var(--navigation-dropdown-hover-color);
}

.menu-level--3 li.active {
  background: var(--navigation-dropdown-active-background);
  border-left: var(--navigation-dropdown-border);
}

.menu-level--3 li:hover, .menu-level--3 li:focus {
  background: var(--navigation-dropdown-hover-background);
  border-left: var(--navigation-dropdown-border);
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  *[id*="main-menu"] {
    position: absolute;
    top: calc(var(--header-spacing) * -1);
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--navigation-dropdown-background);
    display: none;
    z-index: 10;
  }
  *[id*="main-menu"] .navigation__group {
    width: 100%;
    padding: var(--spacing-1) 0;
  }
  *[id*="main-menu"] .navigation__group > a,
  *[id*="main-menu"] .navigation__group > span {
    transition: none;
    color: var(--navigation-dropdown-color);
    display: block;
  }
  *[id*="main-menu"].active {
    display: block;
  }
  *[id*="main-menu"] .menu-level--0 {
    position: absolute;
    top: 50%;
    width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    overflow: auto;
  }
  *[id*="main-menu"] .navigation__group-sub {
    width: 100%;
    text-align: center;
  }
  *[id*="main-menu"] .menu-level--1 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    transform: none;
    border-radius: 0;
  }
}

 

@import '../abstracts/_mixins';

.menu-level--1 {
	position: absolute;
	top: var(--navigation-dropdown-top);
	left: 0;
	margin: 0 0 0 var(--spacing-1);
	width: var(--navigation-dropdown-width);
	padding: var(--spacing-1) 0;
	border-radius: var(--border-radius);
	display: none;

	li {
		border-left: 0 solid transparent;
		transition: all 360ms ease;
	}
}

.menu-level--2,
.menu-level--3 {
	margin-bottom: 0.6rem;
	display: none;
	
	li {
		padding-left: 0;		
		
		&:before {
			content: none;
		}
	}
}

.navigation__group-sub {
	padding-left: 0;
	font-size: var(--navigation-dropdown-font-size);
	line-height: var(--navigation-dropdown-line-height);
	text-align: var(--navigation-dropdown-text-align);
	text-transform: var(--navigation-dropdown-text-transform);

	&:before {
		content: none;
	}	

	a,
	span {
		padding: var(--spacing-1) var(--spacing-2);
		font-weight: var(--navigation-dropdown-font-weight);
		line-height: var(--line-height-2);
		cursor: pointer;
		transition: all 360ms ease;
		display: block;
	}

	span {
		&:after {
			content: "\f067";
			font-family: FontAwesomeS;
			float: right;
		}

		&.active:after {
			content: "\f068";
		}
	}
}

$menus: (1,2,3);
@each $menu in $menus {
	.menu-level--#{$menu} {
		background: var(--navigation-dropdown-background);
	
		li {	
			a,
			span {
				color: var(--navigation-dropdown-color);
	
				&:hover,
				&:focus {
					color: var(--navigation-dropdown-hover-color);
				}
			}
	
			&.active {
				background: var(--navigation-dropdown-active-background);
				border-left: var(--navigation-dropdown-border);
			}
	
			&:hover,
			&:focus {
				background: var(--navigation-dropdown-hover-background);
				border-left: var(--navigation-dropdown-border);
			}	
		}
	}
}

@include mq-2 {
	*[id*="main-menu"] {
		position: absolute;
		top: calc(var(--header-spacing) * -1);
		left: 0;
		width: 100vw;
		height: 100vh;
		background: var(--navigation-dropdown-background);
		display: none;
		z-index: 10;

		.navigation__group {
			width: 100%;
			padding: var(--spacing-1) 0;

			& > a,
			& > span {
				transition: none;
				color: var(--navigation-dropdown-color);
				display: block;
			}
		}

		&.active {
			display: block;
		}

		.menu-level--0 {
			position: absolute;
			top: 50%;
			width: 100%;
			max-height: 100%;
			transform: translate(-50%, -50%);
			overflow: auto;
		}
		
		.navigation__group-sub {
			width: 100%;
			text-align: center;
		}
		
		.menu-level--1 {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			margin: 0;
			transform: none;
			border-radius: 0;
		}
	}
}

 

jQuery(function ($) {

    // NAVIGATION
    $('.js-nav-toggle', $(this)).click(function(){
        $(this).toggleClass('nav--active');
        $('#block-fitch-bohua-main-menu').toggleClass('active');
    });	

    $('.navigation__group > span').click(function (){		
        $(this).parent().toggleClass('active');
        
        if ( $(this).parent().hasClass('active') ) {
            $('.navigation__group > span').not($(this)).parent().removeClass('active');
            $('.navigation__group > span').not($(this)).removeClass('active');
            $('.menu-level--1').hide().removeClass('active');
            
            $(this).addClass('active');
            $('.active + .menu-level--1').show().toggleClass('active');
        } else {
            $(this).removeClass('active');
            $('.navigation__group-sub').removeClass('active');
            $('.navigation__group-sub-sub').removeClass('active');
            $('.navigation__group-sub > span').removeClass('active');
            $('.navigation__group-sub-sub > span').removeClass('active');
            $('.menu-level--1').hide().removeClass('active');
            $('.menu-level--2').hide().removeClass('active');
            $('.menu-level--3').hide().removeClass('active');
        }
        
    });
    $('.navigation__group-sub > span').click(function (){
        $(this).parent().toggleClass('active');
        
        if ( $(this).parent().hasClass('active') ) {
            $('.navigation__group-sub > span').not($(this)).parent().removeClass('active');
            $('.navigation__group-sub > span').not($(this)).removeClass('active');
            $('.menu-level--2').hide().removeClass('active');
            
            $(this).addClass('active');
            $('.active + .menu-level--2').show().toggleClass('active');
        } else {
            $(this).parent().removeClass('active');
            $(this).removeClass('active');
            $('.menu-level--2').hide().removeClass('active');
            $('.navigation__group-sub-sub').removeClass('active');
            $('.navigation__group-sub-sub > span').removeClass('active');
            $('.menu-level--3').hide().removeClass('active');
        }
    });
    $('.navigation__group-sub-sub > span').click(function (){
        $(this).parent().toggleClass('active');
        
        if ( $(this).parent().hasClass('active') ) {
            $('.navigation__group-sub-sub > span').not($(this)).parent().removeClass('active');
            $('.navigation__group-sub-sub > span').not($(this)).removeClass('active');
            $('.menu-level--3').hide().removeClass('active');
            
            $(this).addClass('active');
            $('.active + .menu-level--3').show().toggleClass('active');
        } else {
            $(this).parent().removeClass('active');
            $(this).removeClass('active');
            $('.menu-level--3').hide().removeClass('active');
        }
    });

    // Closes navigation when clicked outside
    $('.main').click(function(){
        $('.navigation__group > span').parent().removeClass('active');
        $('.navigation__group > span').removeClass('active'); 
        $('.navigation__group-sub > span').parent().removeClass('active');
        $('.navigation__group-sub > span').removeClass('active');
        $('.navigation__group-sub-sub > span').parent().removeClass('active');
        $('.navigation__group-sub-sub > span').removeClass('active');
        $('.menu-level--1').hide().removeClass('active');
        $('.menu-level--2').hide().removeClass('active'); 
        $('.menu-level--3').hide().removeClass('active'); 
    });

});

 

Design Files

Figma

Component Options

Component Options

There are no options for this component.

Copyright © 2024 GAMEWORK | Nicholas Game
How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions