I am trying to make an basic, preferrably no javascript, hover drop down menu for a navigational bar and it appears when it is hovered over, except it disappears when you scroll off of it. I have experimented with it and can't seem to figure out how to fix it.
Here is the code:
HTML:
<div tabindex="0" class="locations-menu" id="home-menu">
<div class="arrow">
</div>
<ul class="locations-menu-content" id="locations-header">
<br>
<a class="button" href="location1.html">Location #1</a><br>
<a class="button" href="location2.html">Location #2</a><br>
<a class="button" href="location3.html">Location #3</a><br>
</ul>
</div>
</div>
CSS:
.button {
font-family:"Trebuchet MS";
font-size:14px;
text-decoration:none;
color:#3D3D3D;
}
.arrow {
top:140%;
background-color:#648FBD;
position:absolute;
height:50%;
width:30%;
opacity:0;
visibility:hidden;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.locations-menu {
position: absolute;
display: inline-block;
height:50px;
top:3%;
left:30%;
}
.locations-menu:before {
content: "Locations";
font-family:"Trebuchet MS";
font-size:24px;
}
.locations-menu:focus {
pointer-events: none;
}
.locations-menu:hover .arrow {
opacity: 1;
transition: visibility 2s;
visibility: visible;
pointer-events: auto;
}
.locations-menu-content:hover .locations-menu-content {
opacity: 1;
visibility: visible;
pointer-events:auto;
}
.locations-menu:hover .locations-menu-content {
opacity: 1;
transition: visibility 2s;
visibility: visible;
pointer-events: auto;
}
.locations-menu-content {
background-color:#648FBD;
top:125%;
left:-15%;
position:absolute;
z-index: 1;
width:200%;
height:200%;
text-decoration:none;
opacity: 0;
visibility: hidden;
z-index:2;
}
If someone would be willing to fix the code or atleast tell me what is wrong that would be nice. There is probably a simple solution to this but I again, can't seem to find it.
For those who like to see the code in action, here is the fiddle.
Thank you.
One quick fix is to add some negative margin-top to the elements that create the bubble element(.locations-menu-content and .arrow):
.button {
font-family: "Trebuchet MS";
font-size: 14px;
text-decoration: none;
color: #3D3D3D;
}
.arrow {
top: 140%;
background-color: #648FBD;
position: absolute;
height: 50%;
width: 30%;
opacity: 0;
visibility: hidden;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -40px;
}
.locations-menu {
position: absolute;
display: inline-block;
height: 50px;
top: 3%;
left: 30%;
}
.locations-menu:before {
content: "Locations";
font-family: "Trebuchet MS";
font-size: 24px;
}
.locations-menu:focus {
pointer-events: none;
}
.locations-menu:hover .arrow {
opacity: 1;
transition: visibility 2s;
visibility: visible;
pointer-events: auto;
}
.locations-menu-content:hover .locations-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.locations-menu:hover .locations-menu-content {
opacity: 1;
transition: visibility 2s;
visibility: visible;
pointer-events: auto;
}
.locations-menu-content {
background-color: #648FBD;
top: 125%;
left: -15%;
position: absolute;
z-index: 1;
width: 200%;
height: 200%;
text-decoration: none;
opacity: 0;
visibility: hidden;
z-index: 2;
margin-top: -24px;
}
<div tabindex="0" class="locations-menu" id="home-menu">
<div class="arrow"></div>
<ul class="locations-menu-content" id="locations-header">
<br> <a class="button" href="location1.html">Location #1</a>
<br> <a class="button" href="location2.html">Location #2</a>
<br> <a class="button" href="location3.html">Location #3</a>
<br>
</ul>
</div>
</div>
You can just wrap your content in a container and set height: 100%. That way the hover action takes the entire height but the content is positioned where you want it.
HTML
<div tabindex="0" class="locations-menu" id="home-menu">
<div class="wrapper">
<div class="arrow"></div>
<ul class="locations-menu-content" id="locations-header">
<br/>
<a class="button" href="location1.html">Location #1</a><br/>
<a class="button" href="location2.html">Location #2</a><br/>
<a class="button" href="location3.html">Location #3</a><br/>
</ul>
</div>
</div>
CSS
.wrapper{
height: 100%;
}
FIDDLE
Related
This question already has answers here:
How to animate underline from left to right?
(3 answers)
Closed 2 years ago.
I'm trying to animate a line in a particular way (see the following gif for a visual representation) under a hyperlink using the following code structure:
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
}
.navlink a::after {
display: block;
content: '';
border-bottom: solid 0.2vmax red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.navlink a:hover::after {
animation: scaleup 3s forwards;
}
#keyframes scaleup {
50% {
transform: scaleX(1)
}
100% {
transform-origin: 50% 0, scaleX(0)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>
I can get the line to animate in one direction OK but having problem with the second half of the animation. Can anyone help me understand a better way to do this using only CSS?
You might do it using translateX, so you wouldn't need to switch transform-origin:
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
overflow: hidden;
text-decoration: none;
}
.navlink a:after {
display: block;
content: '';
border-bottom: solid 0.2vmax;
transform: translate(-110%);
transition: transform 250ms ease-in-out;
}
.navlink a:hover:after {
animation: scaleup 3s forwards;
}
#keyframes scaleup {
50% {
transform: translate(110%)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>
Used different approach, pseudo element of parents width floats from left to right and back
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
position: relative;
overflow: hidden;
padding-bottom: 5px;
}
.navlink span::after {
position: absolute;
left: -100%;
display: block;
content: ' ';
border-bottom: solid 0.2vmax red;
height: 2px;
width: 100%;
transition: left 500ms linear;
left: -100%;
}
.navlink a:hover span::after {
transition: left 500ms linear;
left: 100%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>
www.bluecanvasdigital.co.uk have a full screen nav menu with icons that fade in quite nicely. However I would to go in the opposite direction when the .open class is removed from the nav-container class when the user clicks the 'cross' button.
So in more detail the images fade out to the right one by one and the blue background fades up. I can only get one way to work. Is there a nice clever way to do this with vuejs2 and css?
I want to not use JS if i can and just keep this css to save code.
Here is the code:
App.vue:-
<script>
export default {
name: 'App',
data() {
return {
navIsActive: false
}
},
methods: {
toggleNav() {
this.navIsActive = !this.navIsActive
}
}
}
</script>
<template>
<div id="app">
<a href="" id="logo">
<img src="./static/img/logo.svg" alt="logo" v-bind:class="{ hide: navIsActive }">
</a>
<div class="hamburger-menu" v-on:click="toggleNav" v-bind:class="{ active: navIsActive }">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="nav-container" v-bind:class="{ open: navIsActive }">
<p v-if="!navIsActive">hello</p>
<nav>
<ul>
<li>
<img src="./static/img/github.svg" alt="Github">
Github
</li>
<li>
<img src="./static/img/behance.svg" alt="Behance">
Behance
</li>
<li>
<img src="./static/img/medium.svg" alt="Medium">
Medium
</li>
</ul>
</nav>
</div>
<div class="landing-container">
<div class="landing-title">
<h1>Stay tuned</h1>
<p class="landing-subtitle">website launching soon</p>
</div>
<vue-particles
color="#ffffff"
:particleOpacity="0.1"
linesColor="#FFF"
:particlesNumber="120"
shapeType="circle"
:particleSize="3"
:linesWidth="2"
:lineLinked="true"
:lineOpacity="0.8"
:linesDistance="150"
:moveSpeed="0.8"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</div>
</template>
<style lang="scss">
#import 'src/static/styles/_global.scss';
</style>
_nav.scss:-
[#import 'src/static/styles/_hamburger.scss';
#nav-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity .35s, visibility .35s, height .35s;
&.open {
opacity: $nav-fullscreen-opacity;
visibility: visible;
height: 100%;
background: $nav-fullscreen-bg;
transition: opacity .35s, visibility .35s, height .35s;
z-index: 101;
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
margin-bottom: 36%;
img {
height: 75%;
margin: 0;
}
&:nth-of-type(2) {
animation-delay: .4s;
}
&:nth-of-type(3) {
animation-delay: .45s;
}
&:nth-of-type(4) {
img {
margin: 0px 0px -10px 0px;
}
animation-delay: .50s;
margin-bottom: 0;
}
}
}
nav {
position: relative;
height: 100%;
top: 50%;
padding-top: 4%;
padding-bottom: 4%;
transform: translateY(-50%);
font-size: 50px;
font-weight: bold;
text-align: center;
#media (max-width: 767px) {
margin-top: 6%;
margin-bottom: 4%;
padding: none;
}
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
a {
display: block;
position: relative;
color: $nav-fullscreen-color;
font-family: 'HalisGR-Bold', Arial, sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
#media (max-width: 767px) {
font-size: 1.4rem;
}
&:hover:after,
&:focus:after,
&:active:after {
width: 100%;
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: $hamburger-link;
transition: .35s;
}
}
}
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
][1]
I've seen this thread but it doesn't work for me. (unless I was pasting suggested code in wrong place)
Basically, in Firefox, when hovering a link, the image under shifts 1px (only some of them, so please play around to catch it). Chrome, on top of that, blurs all images.
See my Codepen
When I delete
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
the problem disappears.
Is there a way to make it work without losing that line?
Full code:
HTML
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities<span>
<img src="http://witch-house.com/NEW/sensory.png"/></span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans<span>
<img src="http://witch-house.com/NEW/deshum.png"/></span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest<span>
<img src="http://witch-house.com/NEW/dagger.jpg"/></span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength<span>
<img src="http://witch-house.com/NEW/dagger.jpg" class="img4"></span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt<span>
<img src="http://witch-house.com/NEW/tftc.jpg"/></span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers<span>
<img src="http://witch-house.com/NEW/dnahx.jpg"/></span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?<span>
<img src="http://witch-house.com/NEW/robots.jpg"/></span></a>
</div>
</div>
</div>
and CSS:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
pointer-events: none;
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.hover_img a:hover span {
display: inline-block;
opacity: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a { text-decoration:none; }
img { width: 40vw; }
try with this CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
top: -50%;
left: 0;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}
and changing the way we insert the image in the html in this way
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities
<span style="background-image: url(http://witch-house.com/NEW/sensory.png)" />
</span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans
<span style="background-image: url(http://witch-house.com/NEW/deshum.png)" />
</span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt
<span style="background-image: url(http://witch-house.com/NEW/tftc.jpg)" />
</span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers
<span style="background-image: url(http://witch-house.com/NEW/dnahx.jpg)"/>
</span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?
<span style="background-image: url(http://witch-house.com/NEW/robots.jpg)"/>
</span></a>
</div>
</div>
</div>
and the CSS
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: -50%;
height: 200%;
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}
My hover effect works but the only problem is that if my mouse is over any part of the column in a row it will activate it. How do i get it to only have the effect when I hover the image instead.
Here is my JSX code:
<div className="container App">
<Header />
<div className="caption-style-1 row">
<div className="hover-img col-md-6 col-sm-6 nopadding">
<div id="photography">
<img
src={require("../img/chaps_1x.jpg")}
className="image"
/>
<div className="overlay">
<div className="text">Photography</div>
</div>
</div>
</div>
</div>
<h4>CONTACT</h4>
</div>
Here is my CSS code: Here I have everything in place but the only problem i can't figure out is how to not let the hover be affected by the remaining space in my column. If I inspect my #photography it is the whole column when i only want to highlight the image. It won't hover if i change the
.image {
width: 50%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-left:auto;
margin-right:auto;
height: auto;
width: 50%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.65);
}
.hover-img:hover .overlay {
opacity: 1;
}
.text{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.nopadding{
padding:0 !important;
}
MDN's Adjacent sibling combinator
/* Paragraphs that come immediately after any image */
img + p {
font-style: bold;
}
li:first-of-type + li {
color: red;
}
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
Replace this code
.hover-img:hover .overlay {
opacity: 1;
}
with
.hover-img img:hover+.overlay {
opacity: 1;
}
You can do this using below style css
#photography:hover overlay {
opacity: 1;
}
Demo.
#photography:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin-left:auto;
margin-right:auto;
height: auto;
width: 50%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.65);
}
.text{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.nopadding{
padding:0 !important;
}
<div class="container App">
<div class="caption-style-1 row">
<div class="hover-img col-md-6 col-sm-6 nopadding">
<div id="photography">
<img src="https://test-ipv6.com/images/hires_ok.png" class="image" title="image" >
<div class="overlay">
<div class="text">Photography Photography Photography</div>
</div>
</div>
</div>
</div>
<h4>CONTACT</h4>
</div>
Hello i try to make a hover effect on my menu list with data-letters, so it' s work really good but i want to make it in text-align: right, the problem is that when i add it to my menu-item, i can' t see the data-letters :/
anyone have a solution ?
there is my code:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
display:block;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
}
.link--over:hover::before {
width: 100%;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
text-align:right;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over" href="index.html" data-letters="works"><li>works</li></a>
<a class="link link--over" href="#" data-letters="about"><li>about</li></a>
<a class="link link--over" href="#" data-letters="contact"><li>contact</li></a>
</ul>
Would you be against throwing some tags between each item? I also added text-align:right to many CSS items:
.link {
outline: none;
text-decoration: none;
position: relative;
color: #9e9ba4;
display:inline-block;
}
.link--over {
text-transform: uppercase;
overflow: hidden;
color: #c5c2b8;
text-align: right;
}
.link--over:hover {
color: #c5c2b8;
}
.link--over::after {
content: '';
position: absolute;
height: 3px;
width: 100%;
top: 20%;
margin-top: -1.5px;
right: 0;
background: rgba(51,51,51,1);
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
text-align: right;
}
.link--over:hover::after {
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.link--over::before {
content: attr(data-letters);
position: absolute;
z-index: 150;
overflow: hidden;
color: #424242;
white-space: nowrap;
letter-spacing:10px;
width: 0%;
-webkit-transition: width 0.4s 0.3s;
transition: width 0.4s 0.3s;
text-align: right;
}
.link--over:hover::before {
width: 100%;
text-align: right;
}
.menu-item{
position:absolute;
left:50%;
margin-left:-50px;
margin-top:20%;
width:150px;
}
.menu-item li {
position:relative;
width:100%;
letter-spacing:10px;
margin-bottom:40px;
text-align: right;
}
#en-cours{
color:rgba(51,51,51,1);
}
<ul class="menu-item">
<a id="en-cours" class="link link--over menu-item" href="index.html" data-letters="works"><li>works</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="about"><li>about</li></a>
<br>
<a class="link link--over menu-item" href="#" data-letters="contact"><li>contact</li></a>
</ul>