Prevent Angular Material Menu from displaying URL link unless actively hovering over a menu item

Is there a way to utilize <a> tags as menu items in order to display the URL link at the bottom left corner of the browser only when hovering over the menu item? (This behavior may vary across browsers, but Chrome seems to exhibit it).

It appears that once the menu is displayed, the URL link of the first menu item is already visible at the bottom left corner, even without mouse hovering.

Check out this example here

How can you prevent the URL links from being displayed unless actually hovering over the menu items?

htmlcssangularangular-material

Answer №1

If you want to address this issue, one solution is to shift focus to the menu trigger whenever the menu pops up

snippet.html

<button mat-button [matMenuTriggerFor]="menu" 
(menuOpened)="menuTrigger.focus()" #menuTrigger="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
  <a mat-menu-item href="link 1">Item 1</a>
  <a mat-menu-item href="link 2">Item 2</a>
</mat-menu>

Live Demo

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

Struggling to position an image and text side by side within a div using CSS

Is there a way to display a message inside a div with an icon positioned to the left? The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div. https://i.sstatic.net/RnZMq.png https://i.sstatic.net/aSR ...

htmlcss

One issue with Angular's mat-select is that it fails to close when the user clicks outside of

I have encountered an issue with angular material's select component that I am using to display options for selection. The problem arises when I click on the field and the list of options appears, but it does not close when I click outside the options ...

angularangular-materialdropdownmat-select

What is the best way to create a number input field that also accepts text input?

The goal I have in mind is to create an input field that will contain text like "100%", "54vh", or "32px". I am attempting to utilize the number input's up and down arrows, while still allowing the user to edit the text. However, it should only allow ...

javascriptjqueryhtmlcss

What could be causing the 404 Ajax not found error in my script?

I'm facing an issue with my code. When I try to run it, I encounter the following error: 404 (Not Found) while using the get method. Here is my html code snippet. <html> <head> <title>Issue</title> <meta charset= ...

javascriptphphtmlajax

Texture overlay on a Bulma video background

Is there a way to create an overlay on a background video without covering other components? I want the components to remain visible and on top of everything else, with the background video in the far background, followed by the texture layer, and everyth ...

htmlcsswordpressbulma

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs. Below is the snippet of Jquery code that I am using: $(document).ready(function(){ var checkboxes = $('div.filter-groups').find(&ap ...

javascriptjqueryhtmlcssfilter

Tips for adjusting the alignment of a navbar-brand and navbar using Bootstrap 5

I am currently using bootstrap to develop a webpage. I have a navigation bar at the top of the page and I would like my navbar-brand to be positioned on the right side, while my navbar links should be on the left. However, when I try to implement this, it ...

htmlcsstwitter-bootstrapbootstrap-5

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml

What is the best way to fill out a secondary drop

Is it possible to dynamically populate a secondary selection based on the User's choice in the first selection? For example, if the user selects "Silver," how can I automatically remove "Silver" from the second selection options? var b = { img: ...

javascriptcss

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

csscss-transitions

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Can sweetalert2 be used as a tooltip?

I have a query, is it feasible to include a tooltip in the alert message? Alternatively, could there be another tooltip option available? Swal.fire({ title: '<strong>An example with HTML tags</strong>', icon: 'info', ...

javascripthtmltypescriptsweetalertsweetalert2

The margin of HTML is larger than that of the body

Currently, I am in the process of designing my own personal website using Bootstrap. While working with Bootstrap4 and making some modifications, I noticed that the HTML margin seems to be larger than the body. Despite trying to zero the margin of various ...

htmlbootstrap-4

Ways to shift pictures sequentially in a horizontal line?

I am currently working on a project in asp.net where I need to rearrange 'x' number of images in a row. To explain the scenario, let's say we have 5 images labeled as 1, 2, 3, 4, and 5. Initially, they are in the order of 1, 2, 3, 4, 5. Then ...

c#javascriptasp.netcss

Guide to adding checkbox IDs and inserting them into a textarea

Hello, my name is Prasath and I am currently learning about AJAX. I am working on a project involving seat layouts and finding it challenging to retrieve both the seat fare and seat number simultaneously. Is there anyone who can assist me in resolving this ...

phphtmlajax

Steps to trigger a modal using an effect and automatically close it upon receiving a specific dispatched action

Is there a better way to handle the closing of a dialog after a specific action is dispatched? Currently, I have a CalendarEventDeleteDialog with "yes" and "no" options. If the user selects "yes," a CalendarEventDeleteAction is dispatched followed by a Cal ...

angularngrx-effects

Incorporate HTML elements within an Angular component

Looking to dynamically add an Angular HTML element to a component at runtime. Imagine the HTML element is an H1 tag with an Angular expression: <h1>{{testHeading}}</h1> The goal is to insert this tag into a component while preserving its dy ...

htmlangularcomponents

How can I position my navbar above my background image using Bootstrap?

I am a newcomer to using bootstrap and I am attempting to create the following design: https://i.sstatic.net/EV9A1.png In the design, the navbar is situated on top of the background image. However, with my current setup, this is what I have: <!DOCTYPE ...

htmlcsstwitter-bootstrapbootstrap-4

Collapse a previously used item when a new item is opened within Angular

I've managed to create a tree structure for a sideBar Menu using this code, and it's working well. However, what I'm trying to achieve is that when a menu with submenus is expanded and the user clicks on another parent menu, the expanded sub ...

javascriptcssangularbootstrap-4

Guide on packaging an Angular 2 Typescript application with Gulp and SystemJS

In my Angular 2 project, I am using Typescript with SystemJS for module loading and Gulp as a task runner. Currently, the project is running on Angular RC2 but the same issue persists with RC1. I followed the steps provided in brando's answer here. U ...

typescriptangulargulpsystemjsjspm