Display subnavigation HTML when hovering over the navigation bar

I am in the process of creating a website that features a top navbar. When I hover over one of the nav-items, a sub-nav drops down. Currently, I have implemented a JavaScript/ajax function where clicking on a nav-item displays another HTML page in my subnav like this:

<a href="javascript:ajaxpage('home_nav.html',%20'subnav');">Home</a>

Is it feasible to make the function embedded in the 'href' attribute work when hovering over the link alone? In other words, can I achieve the effect of the sub-nav with the included html dropping down simply by hovering over a nav-item?

javascripthtmlcssajax

Answer №1

With html5, it is possible to add additional javascript to the mouseover event:

 <a href="javascript:ajaxpage('home_nav.html',%20'subnav');" onmouseover="ajaxpage('home_nav.html',%20'subnav');">Home</a>

Please note: It is now recommended to exclude the term 'javascript' as this argument itself functions as javascript. You should only include javascript in events, typically. The href attribute serves a different purpose, acting as an address in most cases.

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

sending information back to a middleware using a resolved promise

As a newcomer to nodejs, I am facing an issue with retrieving data from a function that returns a promise. The response from the middleware needs to be sent back to the front end. Below is the relevant code snippet: // Middleware app.get('/player&apo ...

javascriptnode.jsexpresspromise

Troubleshooting positioning issues with jQuery tooltip within an update panel on a Content

I am having difficulty with the Jquery tooltip feature. In my ASP.Net project, I have a Gridview inside a content page and I want to display a tooltip when the user hovers over a label using jQuery. I am using the jquery tool plugin to show this informat ...

c#asp.netjqueryajax

Experiencing difficulties coding SVGs

Struggling with manipulating SVGs in JavaScript and looking to extend a line by clicking a button? Check out this code snippet I've included in the head tag: <script type="text/javascript"> x=135; y=135; var container = document.getElementById( ...

javascriptsvg

Encountering a 404 (Not Found) error in Laravel while attempting to load UI content using AJAX

Currently, I am attempting to implement a UI loading functionality within a dashboard using AJAX. The main objective is to refresh the UI without having to reload the entire page by clicking on a ul. This feature works perfectly with regular PHP, but when ...

phpjquerysqlajaxlaravel

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

Scrape tags from the web using Python's Selenium for a unique collection

Hello there! I appreciate you taking the time to read through this. I'm currently navigating my way through Python and Selenium, specifically attempting to crawl web pages like this one and others of a similar nature. One challenge I've come acro ...

pythonhtmlseleniumxpath

Unpack an array with entries and an iterator

I am working with an array of objects, each containing the same properties. My goal is to create a function that will return an array of arrays, where each inner array holds values based on the property names of the objects. Here is an example input: inp ...

javascriptarrays

Page freezing due to JQuery scroll event

I successfully implemented a trigger that checks if an element is within the visible viewport and added it to the scroll event. While this works smoothly on some pages, I noticed that on larger pages it causes the page to freeze. In Firefox, I experienced ...

javascriptjqueryscrollviewport

"Although AJAX isn't functioning properly, the traditional form submission method is still operational

Does anyone know why this AJAX request is not sending the required data? The request is successful and triggers an alert, but no data is being sent. A standard ('#formid').submit function works, but it causes a page refresh. I need to achieve ...

phpmysqlajax

Using Bootstrap 4: How to maximize the width of a span element placed near a label

I need to adjust the width of a span next to its label in my project. My goal is to show multiple groups {label / data} on the same line. To achieve this, I divided the row into 4 columns and tried to set a specific width for a span. However, no matter wh ...

htmlcssbootstrap-4

Three.js is experiencing difficulties in loading textures for custom Geometry with ShaderMaterial

A Geometry (pyramid) is defined here with four vertices and 4 faces - var geom = new THREE.Geometry(); geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100)); geom ...

javascriptthree.jstextures

Why isn't my JavaScript variable visible in the HTML code?

I am currently facing an issue with my Angular app where I am trying to display a JavaScript variable in HTML. The variable successfully shows up in an older part of my application, but it fails to do so in the new section. Below is the functional code sn ...

javascriptangular

Issue with modifying DataTable's body content via Ajax request

I am working with a DataTable and trying to load data through an ajax call. However, the first line always displays: "No data available in table" https://i.sstatic.net/7gFKx.png Despite this message, the ajax-loaded data is displayed below it. How can I ...

javascriptjqueryajaxdatatables

Encountering a build error with Ubuntu, Node-Gyp, and Canvas – help needed!

Hey there, I'm having some trouble with installing the Canvas package. I've tried Package Versions 6.1.13 and 6.1.3 Here are my system details: Ubuntu 18.04.5, Node 12.18.4 LTS, Python 2.7, g++ installed, pkg-config installed, libjpeg installed ...

javascriptnpmcanvasnode-gyp

Troubleshooting: React is not defined in Rollup + React 17 with updated JSX Transform

I'm currently working on prototyping a microfrontend architecture using Rollup and multiple create-react-app applications. However, when I try to locally yarn link my external app with the container app, I am encountering the following error: The err ...

javascriptreactjsreact-routerrollupjs

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I'm currently working on implementing a Web-Worker to handle its state while also managing multiple asynchronous requests. worker.ts file let a =0; //state of the worker let worker=self as unknown as Worker; worker.onmessage =(e)=>{ console ...

javascriptnode.jstypescriptweb-workerdeno

Discovering the wonders of React and Javascript through the powerful Map function

I've exhausted all my knowledge of map functions and syntax, but I keep encountering the error TypeError: Cannot read property 'action' of undefined. This issue seems to stem from this line: constructor(data=[]). Typically, I am only familia ...

javascriptreactjsgraphql-jsmap-function

Is it possible to generate a "pop-up" window upon clicking on the register button?

As a backend programmer, I'm looking to create a popup window that appears in front of the current window when users click "register", eliminating the need for redirection to another page. I believe you understand the concept. How can I achieve this? ...

javascriptjqueryajaxfrontend

Exploring the process of implementing functions on buttons in Three.js

I have a written program in Three JS that I want to enhance by adding an animated function triggered by a button click event. Additionally, I need help with setting buttons in an inner window and calling all animations on button click events. Any assistanc ...

javascriptthree.jstween.js

Inconsistency in the output of {%=file.name%}

I recently came across a drag and drop file upload system that I would like to incorporate into my website. In order to do so, I need to connect it with my database. However, I encountered an issue during the integration process. The problem I am facing is ...

phphtml