The hyperlink is unclickable because of the menu

The code below contains a menu on the right side with a hover effect and some content with a link. However, the link is not clickable due to the menu.

.menubar{position: fixed;right:0;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);-moz-transform: translateY(-50%);overflow: hidden;z-index: 1;}
    .menu{width: auto;height: 40px;line-height: 40px;padding: 0 15px;transform: translateX(85%);-webkit-transform: translateX(85%);-o-transform: translateX(85%);-moz-transform: translateX(85%);transition: all 0.5s ease;margin: 10px auto;border-radius: 5px;cursor: pointer;}
    .menu a{color: #fff;}
    .menu a:hover{color: #fff;opacity:1;}
    .menu a i{margin-right: 10px;}
    .menu:hover{transform: translateX(0%);-webkit-transform: translateX(0%);-o-transform: translateX(0%);-moz-transform: translateX(0%);}
    .blue-bkg{background: #38488e;}
    .homemenu-blue-bkg{background: #38488e;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
    <div class="menubar hidden-xs">
    <div class="menu homemenu-blue-bkg" data-dept="blue"><a href="#"><i class="icon-home"></i>Home</a></div>
    <div class="menu blue-bkg" data-dept="srt"><a href="#"><i class="icon-srt"></i>Share Registry & Transfer</a></div>
    <div class="menu blue-bkg" data-dept="payroll"><a href="#"><i class="icon-pp"></i>Payroll Processing</a></div>
    <div class="menu blue-bkg" data-dept="trust"><a href="#"><i class="icon-ta"></i>Trust Administration</a></div>
    <div class="menu blue-bkg" data-dept="rms"><a href="#"><i class="icon-rms"></i>Record Management Services</a></div>
    <div class="menu blue-bkg" data-dept="dsc"><a href="#"><i class="icon-dsc"></i>Digital Signature Certification</a></div>
    <div class="menu blue-bkg" data-dept="cfdm"><a href="#"><i class="icon-cfdm"></i>Corporate FD Management</a></div>
    </div>
    <div class="container-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du...
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...
    <a href="click here">More</a></p>
    </div>
    </div>

I would like to have the hover effect on the menu while also making the link clickable. How can I achieve this?

javascriptjqueryhtmlcss

Answer №1

Made a few adjustments. Feel free to take a look. You might want to include vendor prefixes for the transform properties if desired.

  • Inserted # for click here in the href attribute of the link at the bottom.
  • Shifted the entire .menubar 85% to the right (off the canvas).
  • Instructed the .menu to move 85% to the left on hover.

    .menubar{position: fixed;right:0;top: 50%;transform: translate(85%,-50%);z-index: 1;}
    .menu{width: auto;height: 40px;line-height: 40px;padding: 0 15px;transition: all 0.5s ease;margin: 10px auto;border-radius: 5px;cursor: pointer;}
    .menu a{color: #fff;}
    .menu a:hover{color: #fff;opacity:1;}
    .menu a i{margin-right: 10px;}
    .menu:hover{transform: translateX(-85%);}
    .blue-bkg{background: #38488e;}
    .homemenu-blue-bkg{background: #38488e;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
    <div class="menubar hidden-xs">
    <div class="menu homemenu-blue-bkg" data-dept="blue"><a href="#"><i class="icon-home"></i>Home</a></div>
    <div class="menu blue-bkg" data-dept="srt"><a href="#"><i class="icon-srt"></i>Share Registry & Transfer</a></div>
    <div class="menu blue-bkg" data-dept="payroll"><a href="#"><i class="icon-pp"></i>Payroll Processing</a></div>
    <div class="menu blue-bkg" data-dept="trust"><a href="#"><i class="icon-ta"></i>Trust Administration</a></div>
    <div class="menu blue-bkg" data-dept="rms"><a href="#"><i class="icon-rms"></i>Record Management Services</a></div>
    <div class="menu blue-bkg" data-dept="dsc"><a href="#"><i class="icon-dsc"></i>Digital Signature Certification</a></div>
    <div class="menu blue-bkg" data-dept="cfdm"><a href="#"><i class="icon-cfdm"></i>Corporate FD Management</a></div>
    </div>
    <div class="container-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. ... more lorem ipsum text... 
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    ...more lorem ipsum text...
    <a href="#">More</a></p>
    </div>
    </div>

Cheers!

Answer №2

Your tags need to be properly closed.

<p><a href="click here">More</p></a>

<!-- It should be -->

<p><a href="click here">More</a></p>

Answer №3

Check out this code snippet. Hopefully, it will be helpful.

<a href="http://www.breedeal.com" target="_blank">More</a>
<a href="javascript:void(0)">More</a>

Also, don't forget to include CSS like the following:

a:hover{ color: black; }

Answer №4

Set the z-index like this:

Include a class in the anchor element

<a href="click here" class="link-text">Read More</a></p>

Then apply this code to it

.link-text {
    position: relative;
    z-index: 1;
}

Answer №5

If you want to click on a menu item instead of using an a href link, make sure to place your anchor tag outside the menu item div.

<a href="http://www.google.com" target="_blank" ><div class="menu homemenu-blue-bkg" data-dept="blue"><i class="icon-home"></i>Home</div></a>

However, if you simply click on the content (Share Registry & Transfer), the link will work just fine.

<div class="menu blue-bkg" data-dept="srt"><a href="http://www.google.com" target="_blank"><i class="icon-srt"></i>Share Registry & Transfer</a></div>

Check out the Working Plnkr here

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 React with Material UI, implement a Select component while disabling the scroll lock and ensuring the menu is positioned relative to

import React from "react"; import "./styles.css"; import Input from "@material-ui/core/Input"; import MenuItem from "@material-ui/core/MenuItem"; import FormControl from "@material-ui/core/FormControl"; import Select from "@material-ui/core/Select"; cons ...

javascriptreactjsmaterial-ui

The SelectedIndexChanged event fails to trigger following an onchange event

I am currently working on validating a dropdown list on the client side based on its selected index/value. My goal is to create a function that triggers an alert when the selected index is 0, or alternatively execute the SelectedIndexChandged method in the ...

javascriptasp.net

Using HTML, jQuery, and JSON with an AJAX call to populate two web tables stacked on top of each other

I am encountering an issue with populating two tables using two searches based on user input in mySQL-JSON-AJAX. When the user enters a search term and clicks the corresponding button, data should populate the respective table. The problem arises when clic ...

javascriptjqueryhtmlcsshtml-table

Learn how to implement the PATCH method specifically for the scenario when the user clicks on the "forgot password"

After clicking on the forgot password link, I want to display the password change form. However, I'm facing issues with calling the API to update the user's password. Below are the files I'm utilizing to develop the API, trigger events, mana ...

javascriptjqueryajaxajaxformforgot-password

NestJs Custom Validation Pipe: Exploring the Possibilities with Additional Options

I have created a unique custom validation pipe and I am looking to enhance it with additional custom logic. How can I extend the pipe to allow for the options listed below? After reviewing the Github link provided, I have implemented my own version of the ...

javascriptnode.jsnestjs

React JS: Incorporating Multiple Placeholder Objects within Components

Apologies if this question is a duplicate, but I haven't found any helpful answers yet. I'm new to React and JavaScript. I am looking to include multiple objects inside a component: For example: src={url} name={text} subTitle={subtext} My in ...

javascriptreactjsreact-nativeobject

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

The dynamic alteration of BackgroundImage does not appear to be functioning correctly with tailwind and nextjs

Introduction While working on my weather application using nextJS and TailwindCSS, I encountered a UI issue towards the end of development. Unfortunately, I couldn't resolve this problem alone. My main concern is changing the background image dynami ...

javascriptreactjsnext.jsbackgroundtailwind-css

Angular multiple checkbox array iteration in ng-repeat

I am currently working on a form using Angular and facing a challenge with a specific section. Within the form, there is a 'Divisions' segment that includes a list of checkboxes generated dynamically from an API call. Users are required to selec ...

javascriptformsangularjscheckbox

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

javascriptjqueryhtml

Is it possible to deactivate a button using jQuery without changing its visibility to transparent?

In my current project, I am utilizing jQuery and exploring its unique methods. I have a scenario where I need to disable two buttons based on a specific condition: if (...condition...) { $('button#submit, #hint').prop("disabled", true); } Ho ...

javascriptjquery

Upload files using Ajax

Looking to implement Ajax and PHP for file upload functionality. The form includes an <input type="file"> tag, and I aim to enable users to upload a file without having to refresh the page. Any guidance on how to achieve this? While a refresh is no ...

javascriptphpajaxfile-uploadupload

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code. Let's simplify things ...

javascriptvue.jsvuejs2vue-component

What are some effective strategies for bypassing CORS requirements in Vue client-side and server-side applications?

I found this amazing MEVN stack tutorial that I've been following: MEVN Stack Tutorial The tutorial is about creating a blog post app, where the client side is built using Vue (referred to as app A) and the backend is built on Express.js providing d ...

javascriptexpressvue.jscorsaxios

How can I center-align images in WordPress?

I've been encountering an issue with my blog on Wordpress. Lately, whenever I try to add images to my articles and align them in the center while writing the post, they appear centered in the draft but end up left-aligned once the article is published ...

htmlcsswordpress

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...

javascriptcssasp.netiisurl-rewriting

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

cssreactjsmaterial-ui

Is it possible to run an existing NextJS app with API routes on a mobile platform using either Capacitor or Expo?

I have an established NextJS application that heavily relies on Next's API routes. My goal is to transition the current codebase to function in a mobile environment. I've experimented with Capacitor and attempted to export it as a static site, bu ...

javascriptnext.jsmobileexpocapacitor

Implementing sliders for interactive functionality with an HTML table

I need to implement sorting and sliding features on an HTML table using jQuery. Sorting has already been achieved by utilizing the DataTable.js jQuery library. The challenge now is to incorporate a slider into the table, with all subject columns being scro ...

javascriptjqueryhtmlhtml-tableslider

Is there a way to implement DnD functionality on a dynamically generated div element within an HTML page using Dojo

Is it possible to implement drag and drop functionality on dynamically generated div elements using Dojo? I have experimented with various methods to incorporate this feature. Below is a snippet of my code: var inputdiv = document.createElement('div& ...

javascriptdojo