What is the best way to create a menu that can be hovered over but not clicked on

This HTML code includes a dropdown menu created using Bootstrap. It contains navigation links for Home, Add User, Export, and Logout.

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>

The challenge is to make the "Export" item in the dropdown unclickable while still displaying the dropdown menu when hovered over. How can this be achieved?

javascripthtmlcss

Answer №1

One way to implement a "Export" link is by using javascript:void(0) in your code like so:

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>

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

The footer is not displaying the background image properly

Currently in the process of creating my website. I've successfully added my banner and footer, but unfortunately, I'm facing an issue with the background. It seems to not be stretching out properly, leaving some empty white space. Click here to ...

htmlcss

Hough transformation in JavaScript with Node.js

Attempting to implement a 1-dimensional version of the Hough transform, focusing on optimizing for reduced dimensions based on minor properties. Included is the code and sample image with input and output visuals. Questioning what could be going wrong in ...

javascriptnode.jsalgorithmimage-processingcomputer-vision

What is the method for retrieving the data from an XMLHttpRequest response?

Is there a way to use jQuery to query the result of an XMLHttpRequest? For example, let's say I have this code snippet: $.get('somepage.htm', function(data) { console.log($("div.abc").text()); }); The issue is that $("div.abc").text() i ...

javascriptjquery

Error encountered while implementing onMutate function in React Query for Optimistic Updates

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: ...

javascriptreactjstypescriptreact-queryoptimistic

I would like to modify the text color of a disabled input field

I need to adjust the font color of V1, which is a disabled input field. I want to make it darker specifically for Chrome. Any suggestions on how I can achieve this? https://i.sstatic.net/kioAZ.png Here's my HTML code: <mat-form-field appearance= ...

javascripthtmlcssangulartypescript

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

javascripthtmlangularjs

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap

employing the CSS `:empty` pseudo-class to conceal an element

Upon using chrome for inspection, I stumbled upon the following code snippet: <div class="entry-content"> <p>We .... </p> </div> <footer class="entry-footer"> </footer> Occasionally, this f ...

css

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

The error message TS2322 in MUI v5 states that the property 'fullWidth' is not found in the type 'IntrinsicAttributes & { theme: Theme; } & { children?: ReactNode; }'

As a user of MUI v5, I have implemented a straightforward FormControl as seen below. It is important to note that the property fullWidth is supported according to the official documentation. import React, { PropsWithChildren } from 'react' import ...

javascriptreactjstypescriptmaterial-ui

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

Ways to incorporate conditional checks prior to running class methods

Seeking input on handling async data retrieval elegantly. When initializing a class with asynchronous data, I have been following this approach: class SomeClass { // Disabling strictPropertyInitialization private someProperty: SomeType public asy ...

javascripttypescriptoopasynchronous

Ways to retrieve every span within a string variable that possesses a specific class designation

I'm having trouble listing out all spans with the class "ansspans." There may be one or more span elements with the "ansspans" class, and I need to retrieve them along with their content in order to iterate through them. Can someone explain how to do ...

javascriptjqueryregex

Adding JavaScript files to a project in Ionic2 with Angular2 integration

I'm looking to incorporate jQuery into my Ionic2 app, which requires loading several JavaScript files: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/j ...

javascriptjqueryangularionic2calendar

The user's display name in Firebase is currently empty

Running the following code in my react app: componentDidMount() { modelInstance.addObserver(this); modelInstance.getSignInStatus().then((user)=>{ this.setState({ userName: user !== false ? user.displayName : "Sign in", l ...

javascriptreactjsfirebasefirebase-authentication

React Material-UI Table Cell departure event

I have a material UI table with editable fields within the rows. There are various events such as onInputCapture, onFocusCapture, and others. However, I am having trouble finding an event that should be triggered when I leave the cell or finish editing. ...

javascriptreactjsmaterial-ui

Close all other sections when one is expanded

I have been exploring the Bootstrap 4 Collapse feature and I'm trying to figure out how to automatically collapse other sections when one is expanded. Here's what I have tried so far: <p> <a class="btn btn-primary" data-togg ...

htmljquerytwitter-bootstrapbootstrap-4

Use the Express application as an argument for the http.createServer function

Encountering an error when trying to use express.Application as an argument for http.createServer: error TS2345: Argument of type 'Application' is not assignable to parameter of type '(request: IncomingMessage, response: ServerResponse) =&g ...

javascriptnode.jsexpresstypescripttypescript-typings

Executing a JavaScript function within a React web application

Having trouble calling JS functions from ReactJS? I recently encountered an issue when trying to import and call a JS function in a button onClick event in my React project. Specifically, when trying to use this.abtest.events.on in the handleButtonColor fu ...

javascriptreactjs

Avoiding unnecessary DOM updates in VueJS

Implementing an animated carousel has been my latest project, and I've been using code similar to the following: <template> <div v-for="(slides, id)" v-if="id > middle_id - 2 || id < middle_id + 2"> <div :class ...

javascriptvue.jsdom