My best attempt to remedy this toggles the visibility on and off when hovering. However, this isn't ideal because the menu is supposed to transition into view. If the visibility is toggled, the transition isn't seen by the user when approaching the "hover element" from below.
My testing makes me think the issue is purely CSS related but I've gone ahead and included the javascript if it helps. The visibility toggle I mentioned above is commented out.
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
}
#menuBtn {
border: 5px solid black;
}
<p>I am lost</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
Two
Three
Four
</div>
</div>
</div>
I guess that issue can solve without js. Just change hover event to a #menuBtn and .items and insert reset pointer-events: initial . And should changing link class from items to item, because you applying styles to the group of links and the links itself.
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04aa6d;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
#menuBtn:hover + .items, /* Add event to #menuBtn */
.items:hover { /* Keep hover effect on the .items */
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
pointer-events: initial; /* Reset pointer-events */
}
#menuBtn {
border: 5px solid black;
}
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items">
One
<!-- Changed items to item -->
Two
<!-- Changed items to item -->
Three
<!-- Changed items to item -->
Four
<!-- Changed items to item -->
</div>
</div>
</div>
Issue was ur items was position:relative so it actually is in same position as they are visible,So need to make them relatable only when hover otherwise make it position:absolute
.item-div{
position: absolute;
}
.trigger:hover .items {
position:relative;
}
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}
.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
position:relative;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.item-div{
position: absolute;
width: 100%
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
position:relative;
}
#menuBtn {
border: 5px solid black;
}
p:first-child {
text-decoration: line-through;
}
<p>I am lost</p>
<p>Your are Alive</p>
<div class="trigger">
<div class="menu" id="menuList">
Menu
<div class="items item-div">
One
Two
Three
Four
</div>
</div>
</div>
Related
I have a basic slider that moves below tabs when you click them, but i would like for it to change color depending on WHICH TAB it currently is. Here is a snippet :
var element = document.querySelectorAll("#home, #web, #design");
for (var i = 0; i < element.length; i++) {
element[i].addEventListener("click",function(x){
if(document.querySelector(".active")){
document.querySelector(".active").classList.remove("active");
}
x.currentTarget.classList.add("active");
});
}
#menu {
width: 50%;
margin: 0;
margin-left: 15em;
text-decoration: none;
list-style: none;
text-align: center;
}
#menu ul, #menu li {
display: inline;
}
#menu a {
display: inline-block;
width: 25%;
padding: .75rem 0;
text-decoration: none;
color: lightgray;
transition: color .15s;
}
#menu a:active {
color: white;
}
#menu a:hover {
color: white;
}
#home.active ~ hr {
margin-left: 14.5%
}
#web.active ~ hr {
margin-left: 40%
}
#design.active ~ hr {
margin-left: 65.5%
}
#slider {
height: .25rem;
width: 20%;
margin: 0;
background: tomato;
border: none;
transition: 0.3s ease-in-out;
}
<nav>
<ul id="menu">
<li id="home" class="active">Accueil</li>
<li id="web">Web</li>
<li id="design">Design</li>
<hr id="slider"/>
</ul>
</nav>
I hope this isn't too stupid or bad, i was trying to figure it out but no luck on my end so hopefully this isn't too much of an issue. Thank you for your time.
With your current code I'd do something like this
var element = document.querySelectorAll("#home, #web, #design");
for (var i = 0; i < element.length; i++) {
element[i].addEventListener("click",function(x){
if(document.querySelector(".active")){
document.querySelector(".active").classList.remove("active");
}
x.currentTarget.classList.add("active");
var id= x.target.parentElement.id
if (id == "web"){
document.getElementById('slider').style.background = "blue";
}
});
}
So you can extract the ID of clicked list element e.g. web and then change the CSS with a series of if statements. However I'd recommend making CSS classes and assigning them based on the ID of the clicked element.
For elements that have no relevance in the (DOM), like an aesthetic border, pseudo elements are usually used, you could manipulate them in a better way, I hope I can help you!
https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos
#menu {
width: 100%;
margin: 0;
//margin-left: 15em;
text-decoration: none;
list-style: none;
text-align: center;
}
#menu li::before {
content: "";
position: absolute;
bottom: -10px;
width: 70%;
height: 2px;
opacity: 0;
}
#home.active::before {
opacity: 1;
background-color: red;
}
#web.active::before {
opacity: 1;
background-color: blue;
}
#design.active::before {
opacity: 1;
background-color: green;
}
#menu ul, #menu li {
display: inline;
position: relative;
}
#menu a {
display: inline-block;
width: 25%;
padding: .75rem 0;
text-decoration: none;
color: lightgray;
transition: color .15s;
}
#menu a:active {
color: white;
}
#menu a:hover {
color: white;
}
I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here
Is it possible to have the blue bar under the list items shrink to the size of the list item clicked and position itself directly underneath it? Additionally, if the opposite list item is clicked, the bar would slide underneath it. Is this possible with just pure CSS or Vanilla JavaScript? Anything helps, cheers.
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
}
#panelCanada,#panelInternational {
display: none;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>
You can use absolute positioning and alter the position and width of the bar based on the offsetLeft and offsetWidth of the li you clicked on.
var flip = document.getElementsByClassName("flip"),
bb = document.getElementById("bottombar1");
function clickHandler(el) {
el.addEventListener("click", function() {
var left = this.offsetLeft, width = this.offsetWidth;
bb.style.left = left + "px";
bb.style.width = width + "px";
});
}
for (var i = 0; i < flip.length; i++) {
clickHandler(flip[i]);
}
body {
margin: 0;
padding: 2em;
}
.topnav {
position: relative;
}
.buttons {
list-style-type: none;
margin: 0px auto 0;
padding: 0;
cursor: pointer;
width: 100%;
text-align: center;
overflow: auto;
}
.buttons li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid white;
line-height: 45px;
font-size: 14px;
font-family: Verdana;
font-weight: bolder;
-moz-box-sizing: border-box;
color: #005bab;
background-color: #e2ecf6;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1 {
height: 0.5em;
width: 100%;
background-color: #00688B;
position: absolute;
top: calc(100% + 5px);
transition: left .5s, width .5s;
left: 0;
}
.topnav {
position: relative;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
<div class="bottombar1" id="bottombar1"></div>
</div>
The more flexible way would be using JS, but yeah,
CSS, why not...
Use hidden <input type="radio" id="" name=""> and than use CSS's nearest sibling ~ to target any desired next-near sibling element selector.
The elements to trigger the :checked state change are the <label for=""> elements that need to be placed inside the LI elements:
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
ul.buttons {
padding: 0;
display: flex;
list-style: none;
}
ul.buttons li {
flex: 1;
text-align: center;
color: #005bab;
background-color: #e2ecf6;
}
ul.buttons li label{
display: block;
padding: 16px;
cursor: pointer;
}
ul.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar{
position: relative;
height: 0.5em;
background: #00688B;
width:100%;
left: 0;
transition: 0.6s;
}
/* don't show radio buttons switchers
and content */
input[id^=switch],
[id^=switchContent]{
display:none;
}
/* when :checked, target the nearest sibling bottombar */
#switch1:checked ~ .bottombar{
width: 50%;
left:0;
/*transform: translateX( 0% );*/
}
#switch2:checked ~ .bottombar{
width: 50%;
left: 50%;
/*transform: translateX( 100% );*/
}
/* Show content */
#switch1:checked ~ #switchContent1{
display: block;
}
#switch2:checked ~ #switchContent2{
display: block;
}
<div class="topnav">
<ul class="buttons">
<li><label for="switch1">Canada</label></li>
<li><label for="switch2">International</label></li>
</ul>
</div>
<input id="switch1" type="radio" name="sw_1">
<input id="switch2" type="radio" name="sw_1">
<div class="bottombar"></div>
<div id="switchContent1"><h1>CANADAAA</h1></div>
<div id="switchContent2"><h1>INTERNATIONALLL</h1></div>
This is Luddens Desirs answer in Vanilla Javascript. It requires a bit more manual labor, so for the slight performance boost using CCS3 animations for such a simple effect, it would be better to go with the other javascript animation answers.
// store relevent elements
var can = document.getElementById('can');
var int = document.getElementById('int');
var botBar1 = document.getElementsByClassName('bottombar1')[0];
can.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toCanada';
});
int.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toInternational';
});
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s;
}
.toInternational{
transform: translate(25%, 0px) scaleX(.5);
}
.toCanada{
transform: translate(-25%, 0px) scaleX(.5);
}
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<div class="topnav">
<ul class="buttons">
<li id = "can" class="flip"> Canada</li>
<li id = "int" class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>
I wanna ask you something once again. So I wanna make my vertical menu a vertical sliding menu, which pushes site content when triggered. My function to toggle it does not work (I don't know if other effects like transition and translation works too, because menu active class isn't toggled).
When I click on my button nothing shows, even errors... I don't really know where is the problem.
Here is my code:
(function() {
var bodyEl = $('body'),
mobileicon = bodyEl.find('.mobile-icon');
mobileicon.on('click', function(e) {
bodyEl.toggleClass('active-mobile-menu');
e.preventDefault();
});
});
/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/
.mobile-icon {
position: absolute;
display: block;
width: 40px;
z-index: 5;
}
.mobile-icon:before {
width: 100%;
font-size: 2em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\64";
}
.mobile-icon:hover {
color: white;
background: black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/
.mobile-show {
dispay: block;
}
.mobile-menu {
overflow: scroll;
position: fixed;
height: 100%;
width: 70%;
background: white;
z-index: 1000;
transform: translate3d(-100%, 0, 0);
transition: transform 0.4s ease;
}
.active-mobile-menu div {
transform: translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu {
transform: translate3d(100%, 0, 0);
}
.mobile-menu ul {
top: 10.2%;
color: black;
position: relative;
text-align: left;
font-weight: bold;
}
.mobile-menu li a {
display: block;
padding: 4% 0;
border-bottom: 1px solid black;
}
.mobile-menu > ul> li:hover > a,
.mobile-menu > ul> li:hover > .sub-menu > li:hover > a,
.mobile-menu > ul .sub-menu .sub-menu > li:hover > a {
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
background: #fff;
border: none;
position: relative;
}
.mobile-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<span class="mobile-icon"></span>
<div class="mobile-menu">
<header class="mobile-header">
<div class="mobile-branding">
<!--here is my logo code,its long so i don't wanna to slow you down-->
</div>
</header>
<ul class="mobile-menu-ul">
<div class="caret"></div>
<?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
</ul>
</div>
When I run your code through jsbin, the toggle works. I had to include the jQuery library, as you can see by the line
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
It is my suspicion that you do not have the jQuery library loaded on your page properly.
Well i find the solution by myself,i was added $(document).ready(function(){}); into the start of the document.And i putted my variables in new function,in which i put new function,so there was 3 functions in one another,and that was the conflict.Now its working,Thanks for your time guys <3
I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})
You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.