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: noneafter 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
routerLinkhas been clicked (although it may be complex)
Are there any recommendations on which approach would be most suitable and how best to achieve it?