i need to make a slide-out menu , something like the one in these pictures:
EDIT: i tried using css but my side-bar wont show up, this is my css code:
.SideBar{
position: absolute;
left: -80px;
transition: 0.4s;
width: 80px;
font-size: 15px;
color: white;
transition: 0.3s
}
.SideBar:hover{
left: 0;
}
use OnHover, and then when will be on hover, change state. after change state you can use condititon.
something like this:
render() {
return (
<div>(this.state.isHovered) ? (<a>openedmenu</a>) :(<a onHover={this.hover.bind(this)}>closed menu</a>)</div>
)
}
hover() {
this.setState({isHovered:true})
}
and then you can experiment by your self
Related
I'm building a small website without JS for school and I'm stuck on an animation problem.
I want to get rid of the closing animation on my mobile menu when resizing the window. Because currently, if I reduce the size of the window the menu will appear for a brief moment before going to the side (outside of the viewport).
My menu general style in the media query is the following :
.menu {
position: fixed;
z-index: 80;
width: 19rem;
transform: translateX(100%);
height: 100%;
top: 0;
right: 0;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
When the menu is opened :
#mobile:checked ~ .menu {
transform: translateX(0%);
transition-property: transform;
transition-duration: 800ms;
}
Codepen to better see the situation : https://codepen.io/aayko/pen/OJEErBM
My only solution so far is to remove the closing animation ...
I'm looking for anything, even if it means changing the way I style my mobile menu.
Just remove the whole transform in your code above, instead give the right: -100% when normal and right: 0 when checked, the animation is the same without the flash disappear.
.menu {
position: fixed;
z-index: 80;
width: 19rem;
height: 100%;
top: 0;
right: -100%;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
#mobile:checked ~ .menu {
right: 0;
}
I recently came across this exact same issue and ended up figuring out a pretty good solution to it. I documented it all at https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/ if you're still in need of a fix!
The gist is that the transition needs to be added separately in a different class so you can remove it when you're not actively opening or closing the menu.
I am using CSS modules for my project, but Material Icon is not making the changes specified via className prop
import SettingsIcon from "#mui/icons-material/Settings";
import css from "./LandingPage.module.css";
<SettingsIcon className = {css.settingsButton}/>
LandingPage.module.css file
.settingsButton{
position: absolute;
right: 20;
top: 20;
display: block;
height: 70px;
width: 70px;
transition: transform .7s ease-in-out;
color: white;
}
.settingsButton:hover{
transform: rotate(360deg);
}
The problem is the default transition property of .MuiSvgIcon-root is more specified than yours.
You need to increase the priority of your css in your module.css file using :global notation like this:
:global(.App) .settingsButton {
position: absolute;
right: 20;
top: 20;
display: block;
height: 70px;
width: 70px;
transition: transform 0.7s ease-in-out;
color: white;
}
:global(.App) .settingsButton:hover {
transform: rotate(360deg);
}
Note that, in this case .App exists my app, if it does not exist in your app, you can wrap your icon with another custom div with a specific className and use it instead of .App.
You can take a look at this sandbox for a live working example of this solution.
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
I'm currently trying to do a sort of drop-down menu for the navbar of an app, in CSS, only.
My navbar, thanks to a checkbox, when checked, expands and when unchecked, hides itself with an animation, what is translated to the user as when he clicks anywhere on the navbar, it hides or expands itself. All the anchors in my navbar are linking to ids.
My problem is that, when I click on any link, the checkbox doesn't uncheck, so the navbar doesn't execute the "draw back" animation.
Here's the navbar what it looks like in html (jade-lang) :
header
input(type='checkbox')#btn
label(for='btn')#menu
nav
ul
li: a(href='#presentation') Accueil
And, to give just an idea of what looks like the css :
header input {
display: none;
}
#menu {
position: fixed;
left: 100%;
height: 100%;
width: 100%;
background-color: #333333;
font-weight: 500;
}
header input:checked + #menu {
-webkit-animation: showMenu 0.5s forwards;
animation: showMenu 0.5s forwards;
}
#-webkit-keyframes showMenu { from { left: 100%; } to { left: 0%; } }
#keyframes showMenu { from { left: 100%; } to { left: 0%; } }
header input + #menu {
-webkit-animation: hideMenu 0.5s forwards;
animation: hideMenu 0.5s forwards;
}
#-webkit-keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
#keyframes hideMenu { from { left: 0%; } to { left: 100%; } }
Simple as that. But I don't get how to have the checkbox unchecking when clicking on any of the links of the navbar.
Thanks :).
EDIT I reworded my question.
You can not check/uncheck a checkbox using CSS, you'd need to use some JavaScript. As I understand the point of this excercise is to create a menu toggle type of button in pure CSS.
You can use :focus + * instead of :checked + *, so you'd need a focusable element, like <a>, to toggle the menu:
HTML:
Toggle menu
<nav id="menu">
Link<br>
Link 2
</nav>
** CSS **
#menu {
position: fixed;
left: 100%;
top:0;
width: 100%;
transition: left 300ms 300ms; /* note the additional transition delay */
}
a:focus + #menu {
left:0;
transition-delay:0;
}
Demo: http://jsfiddle.net/nt87koye/2/
This way the menu slides in when the link has focus, and slides out once the focus is lost (user clicks anywhere outside the link).
You could also use the :target pseudoclass and place <a href="#menu"> anywhere on the page, so the feature doesn't rely on specific markup, which is required with the adjacent sibling solution: http://jsfiddle.net/nt87koye/4/
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.