Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore.

However, when a user clicks on one of these menu links, Angular Routing is used to open up the corresponding page:

<div class="nav-left">
  <div class="dropdown">
    <a class="menu" routerLink="/home">
      {{'HOME.TITLE' | translate}}
      <span class="icon"><i class="fa fa-fw fa-angle-down"></i></span>
    </a>
    <div class="dropdown-content">
      <a routerLink="/home/welcome">
        <span class="icon"><i class="fa fa-fw fa-home"></i></span>
        {{'HOME.TITLE' | translate}}
      </a>
      <a routerLink="/home/news-blog">
        <span class="icon"><i class="fa fa-fw fa-newspaper-o"></i></span>
        {{'HOME.NEWS_BLOG' | translate}}
      </a>
      <a routerLink="/home/features">
        <span class="icon"><i class="fa fa-fw fa-cubes"></i></span>
        {{'HOME.FEATURES' | translate}}
      </a>
    </div>
  </div>
</div>

In my SCSS file, there's a .dropdown:hover selector that displays the menu only upon hover:

.dropdown {
  .dropdown-content {
    display: none;
  }

  &:hover {
    .dropdown-content {
      display: block;
    }
  }
}

The objective is for the navigation menu to close automatically once a menu link has been clicked. Currently, the menu stays open as Angular Router doesn't reload the page but only updates the contents with the selected subpage.

I believe there should be a CSS / SCSS solution to this issue or potentially some TypeScript code could help. My initial thoughts include:

  • Implementing a "click" or "selected" CSS selector to set display: none after a link has been clicked
  • Activating an Angular function (if available) to reset the "CSS state" post-click event
  • Developing a method to close all navigation menus when a routerLink has been clicked (although it may be complex)

Are there any recommendations on which approach would be most suitable and how best to achieve it?

cssangularsassnavigation

Answer №1

To create an interactive dropdown menu in your template, consider adding a listener like this:

<div class="dropdown" [ngClass]="{'visible': menuVisible}" (mouseover)="toggleMenu()" (mouseout)="toggleMenu()">

In your TypeScript file:

menuVisible = false;
toggleMenu() {
  this.menuVisible = !this.menuVisible;
}

This is a straightforward approach. Alternatively, you could use Observables by having a Subject emit for each mouse event.

UPDATE: I forgot to mention the click listener part! But you probably understood the concept!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Angular 2 to Make Restful API Requests with Windows Authentication

I am currently facing an issue with my .net web api hosted on IIS 7, which uses windows authentication. My goal is to access this web api using Angular 2, TypeScript, and Node.js. Initially, I encountered an error stating 'Response to preflight reques ...

node.jsangularasp.net-web-api2angular2-services

Tips for utilizing innerHeight for a div during both window loading and resizing tasks?

I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it. I ...

javascripthtmlcss

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

Tips for including extra items in a JSON String using Angular 2

function execute(req:any): any { var stReq = JSON.stringify(req); // Adding additional item "Cityname": "angular2City" inside req req.Cityname = 'angular2City'; } Now, how can I include the additional item "Cityname": "angular2C ...

javascriptjsonangular

How to temporarily change CSS color for 5 seconds using JavaScript and incorporate an easing effect?

Regarding this query: JavaScript - Modifying CSS color for 5 seconds Here is a live example of the solution: http://jsfiddle.net/maniator/dG2ks/ I am interested in adding an easing effect to the transition, gradually making the color fully opaque and t ...

javascriptcssjquery-easing

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

htmlcss

Filter multiple columns in an Angular custom table with a unique filterPredicate

Looking to develop a versatile table that accepts tableColumns and dataSource as @Input(). I want the ability to add custom filtering for each table column. Currently, I've set up the initialization of the table FormGroup and retrieving its value for ...

angulartypescriptangular-filterstablefilter

Customize the background color of FullCalendar in a React application

I'm currently using FullCalendar in my react app to showcase a calendar with events displayed. Right now, I have a day grid set up and I'm interested in changing the background color of the grid. The background color for today's date is alw ...

htmlcssreactjsfullcalendarfullcalendar-5

A More Straightforward Approach to Unsubscribing from Observables in Angular 7

Is there a way to simplify the process of automatically unsubscribing from Observables when a component is destroyed using takeUntil? It becomes tedious having to repeat the same code in multiple components. I am looking for a solution that allows me to a ...

angulartypescriptobservablengrxangular7

The Bootstrap-Select dropdown refuses to open

I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem ...

htmljquerycssbootstrap-selectbootstrap-selectpicker

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

The minimum and maximum validation functions are triggered when I am not utilizing array controls, but they do not seem to work when I use array controls

Take a look at the stack blitz example where min and max validation is triggered: https://stackblitz.com/edit/angular-mat-form-field-icrmfw However, in the following stack blitz with an array of the same controls, the validation does not seem to be worki ...

javascripthtmlangulartypescriptangular8

Ways to incorporate color gradients into the corners of CSS cards

Below is an example of a basic bootstrap card: Example 1: https://i.stack.imgur.com/DK2Sz.png I attempted to draw blue and green colors side by side, but was only successful in drawing blue as shown below: Example 2: https://i.stack.imgur.com/CcSzP.png ...

htmlcsstwitter-bootstrapbootstrap-4

Effective ways to request verification prior to eliminating an item with ng-select (multi-select)

https://i.stack.imgur.com/HDtXq.jpg Is it possible to add a confirmation prompt when deleting an item from a select component? I couldn't find any specific prop for the component. Is there any way to customize or override the delete function? ...

angularangular-ngselect

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

As I delve into learning React, I find myself unsure about the most effective approach to make websites responsive. Currently, I am utilizing Semantic UI React as my CSS Library. While everything displays perfectly on desktop, I encounter some issues when ...

cssreactjssemantic-ui

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Extract and preserve elements from an ordered array by segregating them into separate arrays of objects using Angular 8

I have an array called arrayReceived containing 15 objects. My goal is to sort and store the first 6 objects with the lowest amount value in a new array called arraySorted. These objects are sorted based on their amount parameter. There may be multiple obj ...

arraysangulartypescriptangular8

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss

Attempting to align a banner image in the middle using CSS styling

I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...

css

Having trouble with an external JavaScript file in Angular 5?

Recently, I decided to delve into the world of Angular and started my journey with angular5 by following this tutorial. Currently, I am in the process of converting a traditional HTML template into an Angular5 version but have encountered some challenges ...

angular