I have an HTML menu element that I am currently animating using javascript and CSS. The menu's max-height is set to 0, with overflow: hidden.
<div class="menu">
The current CSS animation:
.menu {
-webkit-transition: max-height 0.4s ease;
-moz-transition: max-height 0.4s ease;
transition: max-height 0.4s ease;
}
In javascript, I am changing the menu max-height when a button is clicked.
This all works fine, except I would like to reveal the menu from the bottom to the top, instead of the top-down. Can this be done in simple CSS or JS?
You can transition scaleY() instead, and use transform-origin
div {
transform-origin: 0 100%;
width: 100px;
height: 100px;
background: black;
transition: transform .5s;
transform: scaleY(0);
}
body:hover div {
transform: scaleY(1);
}
<div></div>
Michael already provided a very elegant solution but it has the problem of scaling all content.
I just want to provide another approach: When using position:absolute, you can set bottom:0 to make it reveal from the bottom. I used height in the demo, because it's a bit easier to get the dimension how you want them, but max-height generally works just as fine as well.
Advantage: content does not scale
Disadvantage: needs positioning and some fixed height declarations
Whatever works best for you.
.menu {
background:#bada55;
transition: all 0.4s ease;
height:0;
overflow:hidden;
position:absolute;
bottom:0;
width:100%;
}
.container:hover .menu {
height:30px;
}
.container{
position:relative;
border:1px solid red;
height:30px;
}
<div class="container">
<div class="menu">
Menu content
</div>
</div>
Another possibility is to simply animate the positioning. Here you just manipulate the top to achieve the sliding effect.
.menu {
background: #bada55;
transition: all 0.4s ease;
overflow: hidden;
position: relative;
width: 100%;
padding:10px;
height:40px;
box-sizing:border-box;
top:100%;
}
.container:hover .menu {
top:0;
}
.container {
border: 1px solid red;
overflow:hidden;
height:40px;
}
<div class="container">
<div class="menu">
Menu content
</div>
</div>
You could use flexbox. You would need to align it to the bottom using align-items: flex-end;.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.querySelector('.menu').classList.toggle('active');
});
.menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
transition: max-height 1s ease;
background: #eee;
display: flex;
align-items: flex-end;
}
.menu.active {
max-height: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
}
<button>Toggle Menu</button>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4 (last item)</li>
</ul>
</div>
For reference, here is how the menu works without the flexbox aligning:
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.querySelector('.menu').classList.toggle('active');
});
.menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease;
-moz-transition: max-height 1s ease;
transition: max-height 1s ease;
background: #eee;
}
.menu.active {
max-height: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
}
<button>Toggle Menu</button>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4 (last item)</li>
</ul>
</div>
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
I'm looking for parallax effect. Like this scroll effect.
All I got is this
HTML
<nav class="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
jQuery
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 80) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I want a more smooth effect, when I'm > 80px, like the scroll effect mentioned.
I have done a similar prototype using CSS Transitions and jQuery for a better smooth effect. Kindly check this out. CSS transitions are carried out by GPU, while jQuery transitions are made using CPU and mathematical calculations. So definitely it would look sluggish.
Also, I have used the same jQuery version (more or less) so that you don't need to mess up with the versions. :)
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 20)
$(".scrolled").addClass("show");
else
$(".scrolled").removeClass("show");
});
});
* {margin: 0; padding: 0; list-style: none; line-height: 1;}
body {font-family: 'Segoe UI';}
header {line-height: 5; text-align: center; -webkit-transition: all 0.5s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear;}
header.scrolled {line-height: 3; border-bottom: 2px solid #ccc; background-color: #fff; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 999;}
header.scrolled.show {height: 3em;}
.first {background-color: #ccf; position: relative; top: 0; left: 0; right: 0; height: 100%; margin-bottom: 1300px; z-index: 1;}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<header class="scrolled">
Scrolled Header
</header>
<div class="first">
<header class="normal">
Normal Header
</header>
</div>
I'm a beginner in web development.
I'm trying to create a website with Google Maps, and I also want a menu sliding in and out on the left side.
The problem is: when the menu is going in, it pushes the map lower, instead of covering it, like it should. Also the CSS that makes that menu slide, doesn't seem to work properly, meaning it does not "slide".
Menu Hidden: http://imgur.com/UIiYsXf
Menu Showing: http://imgur.com/3IFyJNF
I searched a lot, tried an awful lot of stuff, but I just can't seem to make it work.
The nav menu is called 'menu' and the div that contains the map is called 'map'.
Any help appreciated, and please keep it simple. Thank you.
Here's my HTML code:
<% #page_title = "Main Page" %>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<title>Google Map Demo</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label>
<div id = "qne_header"> TITLE</div>
<nav class="menu" >
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>INSPIRATION</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="map"></div>
<script>
var resize_flag=true;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.53, lng: 22.88},
zoom: 8,
disableDefaultUI: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyRSefwx9vuhCMEOLrxXsinO2efTsf4K4&callback=initMap"
async defer></script>
</body>
</html>
Here's my CSS code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#qne_header{
height : 5%;
background-color: #b3e6ff;
text-align: center;
font-size: 200%;
}
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
a {
text-decoration: none; color:#00a5cc;
}
nav {
width:10%;
text-align:center;
}
nav a {
display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC;
}
nav a:hover {
background:#E5DAC0; color :#FFF;
}
nav li:last-child a {
border-bottom:none;
}
.menu-icon {
padding:10px 20px;
background:#FFFFFF; color:#987D3E;
cursor:pointer;
float:left;
margin-top:4px;
border-radius:5px;
margin-top: 5px;
}
#test{
position:relative;
}
#menuToggle { display:none; }
#menuToggle:checked ~ .menu {
position:absolute;
left:0px;
}
.menu {
width: 240px;
left: -240px;
position:absolute;
background:#FFFFFF;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
li {
list-style-type:none;
}
Remove position:absolute; off of .menu and it works.
EDIT:
#map{ z-index: -1; }
This allows the Map to be below the header/menu sections.
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
z-index: -1;
}
This may cause issues with adjusting the map -- posting a JSFiddle will help everyone troubleshoot.
This solution is very simple, the menu is actually showing up at the right place when you press the button. The problem is that it appears to be below the map.
Give the .menu class a z-index of 1 and the menu will position itself in front of the map.
.menu {
z-index: 1;
}
I have horizontal menu on my website. I want the menu links to smoothly underline.
HTML
<nav id="nav_container">
<ul id="nav">
<li class="nav_item">Sportovci</li>
<li class="nav_item">Specialisté</li>
<li class="nav_item">Kluby</li>
<li class="nav_item">Obchody</li>
<li class="nav_item">Ligy</li>
<li class="nav_item">Články</li>
<li class="nav_item">Kontakt</li>
</ul>
</nav>
CSS
.nav_item {
display: inline-block;
margin: 0 10px;
}
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.nav_item:hover:after {
width: 100%;
background: #236fe8;
}
With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. I think it will be some JavaScript (jQuery), but don't know how.
I also want the clicked (active) link to stay underlined. How to do this?
I will be thankful for every kind of answer.
How about targeting the anchors instead of the .nav_items like so:
a:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: #236fe8;
}
Here your updated jsFiddle.
replace your code with this one
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;`enter code here`
background: transparent;
transition: width .5s ease, background-color .9s ease;
}
go to the following link for more help, i hope it will resolve your problem
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
I have a navigation bar that I'm trying to get two links to animate in from off-page and end next to my other links when I hover over one of the links in my list.
Current navigation links:
<div class="links">
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</ul>
</div>
and the css for .links:
.links ul {
white-space: nowrap;
list-style-type: none;
position: fixed;
top: 8px;
left: 60%;
z-index: 4;
width: auto;
height: 67px;
}
.links li {
white-space: nowrap;
display: inline-block;
margin-right: 30px;
z-index: 4;
height: 40px;
}
And here's the relevant css, along with the animation that I have currently that works properly:
.extralinks {
position: fixed;
top: 8px;
left: 90%;
animation-name: slidey;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome */
-webkit-animation-name: slidey;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
z-index: 4;
}
#keyframes slidey {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
#-webkit-keyframes slidey /* Safari and Chrome */ {
0% {left: 90%; top: 8px;}
100% {left: 40%; top: 8px;}
}
.links li:nth-child(3) {
background-color: Red;
}
markup for .extralinks
<div class="extralinks">
<ul>
<li>
link 4
</li>
<li>
link 5
</li>
</ul>
</div>
I need to make it so that when someone hovers over "link 3" the animated links slide in from the right and end next to my links. I'm not quite sure how exactly to link the animation to "link 3" in my list. Any help? I would not be opposed to using javascript/jquery, I'm just not well-versed in either.
Thank you!
I'm not exactly clear of your goals, but I made some assumptions and slapped a jsFiddle together. I used css transitions instead because I assumed it was a :hover animation and this allowed the sub menu to return to it's position.
* {
padding:0;
margin:0;
}
.links {
width:100%;
}
.links > menu {
width:100%;
text-align:center;
}
.links menu li {
display: inline-block;
position:relative;
padding:0.75em 1em;
}
.l3 .extralinks {
position:absolute;
top:2em;
left:100%;
z-index: 4;
-webkit-transition:all 1s ease-in-out 0s;
-moz-transition:all 1s ease-in-out 0s;
-o-transition:all 1s ease-in-out 0s;
-ms-transition:all 1s ease-in-out 0s;
transition:all 1s ease-in-out 0s;
}
.l3:hover .extralinks {
left:0;
}
.l3:hover .extralinks li {
display:block;
}
.links li:nth-child(3) {
background-color: Red;
}
<div class="links">
<menu>
<li>
link 1
</li>
<li>
link 2
</li>
<li class="l3">
link 3
<menu class="extralinks">
<li>
link 4
</li>
<li>
link 5
</li>
</menu>
</li>
</menu>
</div>