Anyone know why this wont work correctly? The dropdown should only appear when you hovet on the menu name but it appears if you hover below the item name and the longer the menu list the further beneath it you can hover to make it drop down. For example if you hover below the menu name "skills" the dropdown appears instead of only appearing when you click ON the name or hover over it.
<!DOCTYPE html>
<html>
<head>
<style>
$min-width: 120px;
$secondarycolor: #CCFF00;
$thirdcolor: #000000;
#mixin transform($value) {
-webkit-transform: ($value);
-moz-transform: ($value);
-ms-transform: ($value);
transform: ($value);
}
#mixin transition($value) {
-webkit-transition: ($value);
-moz-transition: ($value);
-ms-transition: ($value);
transition: ($value);
}
*{
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #CCFF00;
background: #374954;
text-align: center;
}
#main {
position: relative;
list-style: none;
background-image: url('https://tc-boxing.com/pic/gradient.png');
background-repeat: repeat-x no-repeat-y;
font-weight: 600;
font-size: 0;
text-transform: uppercase;
display: inline-block;
padding: 0;
margin: 50px auto;
li {
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 15px 20px;
cursor: pointer;
z-index: 5;
min-width: $min-width;
}
}
li {
margin: 0;
}
.drop {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 48px;
div {
#include transform(translate(0,-100%));
#include transition(all 0.5s 0.1s);
position: relative;
}
li {
display:block;
padding: 0;
width: 100%;
background-image: url('https://tc-boxing.net/pic/gradientdd2.png') !important;
background-repeat: repeat-x no-repeat-y;
}
}
#marker {
height: 6px;
background: $secondarycolor !important;
position: absolute;
bottom: 0;
width: $min-width;
z-index: 2; #include transition(all 0.35s);
}
#for $i from 1 through 4 {
#main li:nth-child(#{$i}) {
&:hover ul div {
#include transform(translate(0,0));
}
&:hover ~ #marker {
#include transform(translate(#{(-1+$i)*$min-width},0));
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: #374954;
color: #CCFF00;
text-align: center;
}
#main {
position: relative;
list-style: none;
background-image: url('https://tc-boxing.com/pic/gradient.png');
background-repeat: repeat-x no-repeat-y;
font-weight: 600;
font-size: 0;
text-transform: uppercase;
display: inline-block;
padding: 0;
margin: 50px auto;
}
#main li {
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 15px 20px;
cursor: pointer;
z-index: 5;
min-width: 120px;
}
li {
margin: 0;
}
.drop {
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 48px;
}
.drop div {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-ms-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
position: relative;
}
.drop li {
display: block;
padding: 0;
width: 100%;
background-image: url('https://tc-boxing.net/pic/gradientdd.png') !important;
background-repeat: repeat-x no-repeat-y;
}
#marker {
height: 4px;
background: #CCFF00 !important;
position: absolute;
bottom: 0;
width: 120px;
z-index: 2;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
transition: all 0.35s;
}
#main li:nth-child(1):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(1):hover ~ #marker {
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker {
-webkit-transform: translate(120px, 0);
-moz-transform: translate(120px, 0);
-ms-transform: translate(120px, 0);
transform: translate(120px, 0);
}
#main li:nth-child(3):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker {
-webkit-transform: translate(240px, 0);
-moz-transform: translate(240px, 0);
-ms-transform: translate(240px, 0);
transform: translate(240px, 0);
}
#main li:nth-child(4):hover ul div {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#main li:nth-child(4):hover ~ #marker {
-webkit-transform: translate(360px, 0);
-moz-transform: translate(360px, 0);
-ms-transform: translate(360px, 0);
transform: translate(360px, 0);
}
</style>
</head>
<body>
<!-- not responsive yet -->
<nav>
<ul id="main">
<li>Home</li>
<li>About</li>
<li>Skills
<ul class="drop">
<div>
<li>scss</li>
<li>jquery</li>
<li>html</li>
</div>
</ul>
</li>
<li>Contact</li>
<div id="marker"></div>
</ul>
</nav>
</body>
</html>
https://codepen.io/dghez/pen/Kwoper
Try adding::
#main li {
visibility: hidden;
}
#main li:hover ul {
visibility: visible;
}
Related
I've been fiddling with this code for two days now but whatever I do I can't get this off-canvas nav toggle to take me to the same #section of the website as the normal nav menu.
Here's the html:
<div id="page">
<nav class="fh5co-nav">
<!-- <div class="top-menu"> -->
<div class="container">
<div class="row">
<div class="col-xs-12 text-center logo-wrap">
<div id="fh5co-logo">Woodbridge Art Services</div>
</div>
<div class="col-xs-12 text-center menu-1 menu-wrap">
<ul>
<li class="menu-active"></li>
<li>Consultation</li>
<li>Installation</li>
<li>Sourcing</li>
<li>Transportation</li>
<li>Contact</li>
<li>07905 468747</li>
</ul>
</div>
<!-- </div> -->
</nav>
Here's the css style for the offcanvas:
#fh5co-offcanvas {
position: absolute;
z-index: 1901;
width: 270px;
background: #000 ;
top: 0;
right: 0;
top: 0;
bottom: 0;
padding: 75px 40px 40px 40px;
overflow-y: auto;
display: none;
-moz-transform: translateX(270px);
-webkit-transform: translateX(270px);
-ms-transform: translateX(270px);
-o-transform: translateX(270px);
transform: translateX(270px);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#fh5co-offcanvas {
background: #000 url(../images/broken_noise.png) repeat;
}
}
#media screen and (max-width: 768px) {
#fh5co-offcanvas {
display: block;
}
}
.offcanvas #fh5co-offcanvas {
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
#fh5co-offcanvas a {
color: rgba(255, 255, 255, 0.5);
}
#fh5co-offcanvas a:hover {
color: rgba(255, 255, 255, 0.8);
}
#fh5co-offcanvas ul {
padding: 0;
margin: 0;
}
#fh5co-offcanvas ul li {
padding: 0;
margin: 0;
list-style: none;
}
#fh5co-offcanvas ul li > ul {
padding-left: 20px;
display: none;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown > a {
display: block;
position: relative;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown > a:after {
position: absolute;
right: 0px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ebfc";
font-size: 20px;
color: rgba(255, 255, 255, 0.2);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
And here's the script for the toggle:
.fh5co-nav-toggle {
width: 25px;
height: 25px;
cursor: pointer;
text-decoration: none;
top: 25px !important;
}
.fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
background: #444;
}
.fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
outline: none;
border-bottom: none !important;
}
.fh5co-nav-toggle i {
position: relative;
display: inline-block;
width: 25px;
height: 2px;
color: #252525;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #252525;
transition: all .2s ease-out;
}
.fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
content: '';
width: 25px;
height: 2px;
background: #252525;
position: absolute;
left: 0;
transition: all .2s ease-out;
}
.fh5co-nav-toggle.fh5co-nav-black > i {
color: #fff;
background: #fff;
}
.fh5co-nav-toggle.fh5co-nav-black > i::before, .fh5co-nav-toggle.fh5co-nav-black > i::after {
background: #fff;
}
.fh5co-nav-toggle i::before {
top: -7px;
}
.fh5co-nav-toggle i::after {
bottom: -7px;
}
.fh5co-nav-toggle:hover i::before {
top: -10px;
}
.fh5co-nav-toggle:hover i::after {
bottom: -10px;
}
.fh5co-nav-toggle.active i {
background: transparent;
}
.fh5co-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
background: #fff;
}
.fh5co-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
background: #fff;
}
.fh5co-nav-toggle {
position: absolute;
right: 0px;
top: 65px;
z-index: 21;
padding: 6px 0 0 0;
display: block;
margin: 0 auto;
display: none;
height: 44px;
width: 44px;
z-index: 2001;
border-bottom: none !important;
}
#media screen and (max-width: 768px) {
.fh5co-nav-toggle {
display: block;
}
}
At the moment the menu opens and shows the various links yet when you click on them they go to the section of the website they're targetted to however you can't then scroll up or down and when you click on the screen it goes back to the toggle menu. Also the images for each section don't show up...
Look forward to seeing what my glaring failure is in this as I know it'll likely be one line or a <div/> in the wrong place.
Cheers guys
I'm struggling with centering the modal together with fade in and scale up:
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
The absolute positioning approach with transform:translate(-50%,-50%); isn't working for me. It has to be responsive so I can't use the margin-left approach. Do you have an idea why it is simply not displayed in the middle?
Please try this,
Add this style to md-modal-wrapper class. added a md-modal-wrapper div to cover md-modal class
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
Remove this style
.md-modal {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width:100%;
max-width: 550px;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.md-modal-wrapper{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
body{
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="md-trigger">Show</button>
<div class="md-modal-wrapper">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
</div>
</body>
scale(1) was overriding the other transform property, translate(-50%,-50%).
It can be easily fixed by combining them both: transform: translate(-50%,-50%) scale(1).
$('#md-trigger').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
$('#md-close').on('click', function(e) {
$('#modal-1').toggleClass("md-show"); //you can list several class names
e.preventDefault();
});
.md-modal {
width: 100%;
max-width: 550px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
z-index: 9999;
visibility: hidden;
padding: 25px;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
background-color: #fff;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
outline: 0;
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 9998;
opacity: 0;
background: rgba(40,43,49,.8);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-content {
color: #333;
}
.md-effect-1 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: translate(-50%,-50%) scale(1);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="md-trigger">Show</button>
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<p>This is a modal window. You can do the following things with it:</p>
<button class="md-close" id="md-close">Close me!</button>
</div>
</div>
<div class="md-overlay"></div>
How about using flex?
Remove position: absolute; and transform: translate(-50%,-50%); from md-modal
and cover the modal with flex div
.md-container {
display:flex;
justify-content:center;
align-items:center
}
<div class="md-container">
<div class="md-modal">
~~
</div>
</div>
I don't know how to use snippet so I'm attaching a codePen link 😂
https://codepen.io/seongmin0801/pen/MWyrYvm
Make transform: translate(-50%,-50%) !important;. There is .md-show.md-effect-1 { transform: scale(1); } that overrides it that's why you should use important
I'm not used to develop much html outside premed templates and now I'm having an awesome opportunity to venture through this.
My Layout https://i.stack.imgur.com/hZJEM.png
I'm having the toughest days of my life tying to put the in codes. Could some good some give a starting point?
I still have no codes for this, I have bunch of codes for trial, but none of them could achieve what I want.
Is there anyone who could help me please?
here is an example of your image with skew column while running the snip will only show code , to see full example please download resources from download link
here is a live view of what is the result
and here is my code which been used for the skew :
position: absolute;
left: 27%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;
}
download
here an example of skew css code :
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
#import url("https://fonts.googleapis.com/css?family=Lato:300,800");
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: #f7720c;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #f7720c;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events: none;
}
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: #000000c7;
display: block;
transition: cubic-bezier(0.62,-0.79, 0, 1.71);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#menu .wrapper {
opacity: 0;
-webkit-transform: translate(0, 40px);
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
}
#menu .wrapper ul {
list-style-type: none;
text-align: center;
color: #fff;
}
#menu .wrapper ul li:first-child {
padding-top: 0;
}
#menu .wrapper ul li {
padding-top: 1.5em;
}
#menu .wrapper a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: #f3f3f3;
transition: color .3s ease-in-out;
}
#menu .wrapper a:hover {
color: #f7720c;
}
#menu.active {
-webkit-transform: translate(0, 0%);
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.box-with-text {
background-image: url('https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&h=700&q=75&w=1050');
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.box-with-text {
position: relative;
margin-top:50px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-repeat: repeat;
background-position: 50% 50%;
background-size: cover;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:95px;
font-family:Oswald, Impact;
}
.box-with-text-2 {
background-image: -webkit-linear-gradient(seagreen 50%, lightseagreen 80%);
background-repeat: repeat;
background-position: 0 0;
background-size: 100% 50px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation: stripes 2s linear infinite;
animation: stripes 2s linear infinite;
}
#-webkit-keyframes stripes {
100% {
background-position: 0 -50px;
}
}
#keyframes stripes {
100% {
background-position: 0 -50px;
}
}
.box-with-text-2 {
position: relative;
display:block;
margin-top:50px;
left: 50%;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
font-size:82px;
font-family: bold Open Sans, Impact;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* Main styles */
#import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
.text {
fill: none;
stroke-width: 6;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #F2385A;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #F5A503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #E9F1DF;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56D9CD;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3AA1BF;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
#-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
#keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
/* Other styles */
svg {
position: absolute;
left:0;
right:0;
width: 250px;
height: 250px;
margin:0 auto;
}
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Exo+2:600,700,800,900' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/styletxt.css">
<link rel="stylesheet" href="./css/styletxt.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<style>
.bodybg {
font-family: helvetica, arial, sans-serif;
background-image: url(./background.png);
height: 90%;
width: 100%;
background-size: cover;
overflow: hidden;
z-index: 1;
background-repeat: no-repeat;
background-color: black;
position: absolute;
left: 0;
top: 5%;
box-shadow: -1px -3px 20px 0px #333333fa;}
.col {
background: #ddd;
width: 33%;
height: 100%;
float: left;
position: relative;
cursor: pointer;
-moz-transform: skew(-5deg, 0deg);
-webkit-transform: skew(-5deg, 0deg);
-o-transform: skew(-5deg, 0deg);
-ms-transform: skew(-5deg, 0deg);
transform: skew(-5deg, 0deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.col:first-of-type {
background: #fff;
margin-left: -50px;
padding-left: 50px;
}
.col:last-of-type {
background: #f7d00c;
margin-right: -50px;
padding-right: 50px;
}
.col:hover {
background: #900;
color: #fff;
}
.col-content {
position: absolute;
width: calc(100% - 40px);
bottom: 0;
padding: 20px;
text-align: center;
-webkit-transform: skew(5deg, 0deg);
-moz-transform: skew(5deg, 0deg);
-ms-transform: skew(5deg, 0deg);
-o-transform: skew(5deg, 0deg);
transform: skew(5deg, 0deg);
}
.col:first-of-type .col-content,
.col:last-of-type .col-content {
width: calc(100% - 90px);
}
}
#import url('https://fonts.googleapis.com/css?family=Lato:300,800');
$menu-bg-color: #f7580;
$content-color: #f7580;
$background-color: #f3f3f3;
$links: #f3f3f3;
body {
display: flex;
// flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: $background-color;
font-family: 'Lato', sans-serif;
}
div {
position: relative;
height: 60px;
width: 110px;
cursor: pointer;
}
span {
width: 110px;
height: 7px;
background: $content-color;
position: absolute;
transition: all .4s ease-in-out;
}
.text {
background: transparent;
top: 22%;
right: -100%;
width: 110px;
color: $content-color;
font-weight: bold;
font-size: 30px;
opacity: 0;
}
.one {
top: 50%;
right: 0;
width: 90px;
transform: translate(0%, -50%);
}
.three {
bottom: 0px;
right: 0;
width: 70px;
}
div:hover .one {
right: 90px;
opacity: 0;
}
div:hover .three {
width: 110px;
}
div:hover .text {
right: -11%;
opacity: 1;
}
h1 {
text-align: center;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%,-50%);
color: $content-color;
opacity: .04;
font-size: 6em;
font-weight: 800;
text-transform: uppercase;
line-height: .8;
pointer-events:none;
}
// menu styling
#menu {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background: $menu-bg-color;
display: block;
transition: all .3s ease-in-out;
transform: translate(0, -100%);
.wrapper {
opacity: 0;
transform: translate(0, 40px);
padding-top: 20vh;
width: 100%;
height: 100%;
text-align: center;
transition: all .4s ease-in-out;
ul {
list-style-type: none;
text-align: center;
color: #fff;
}
ul li:first-child {
padding-top: 0;
}
ul li {
padding-top: 1.5em;
}
a {
text-decoration: none;
font-size: 3em;
font-weight: 800;
color: $links;
transition: color .3s ease-in-out;
&:hover {
color: darken($links, 25%);
}
}
}
}
#menu.active {
transform: translate(0, 0%);
height: 100%;
transition-delay: .2s;
}
#menu .active {
transform: translate(0, 0px);
transition-delay: .45s;
opacity: 1;
}
.menuinteract{
position:absolute;right:6%;top:4%;z-index:88888;height:100px; background-image:url("./menudisabled.png");
background-size:cover;
}
.menuinteract:hover{
position:absolute; right:6%; top:4%;z-index:88888;height:100px; background-image:url("./clicked.png");
background-size:cover;}
</style>
<script>
$("div").on("click", function() {
$("#menu").toggleClass("active");
});
$("div").on("click", function() {
$(".wrapper").toggleClass("active");
});
</script>
</head>
<body style="overflow:hidden;background-color:black">
<div class="menuinteract" "
<div>
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="text">MENU</span>
</div>
<nav id="menu">
<div class="wrapper">
<ul>
<li>About</li>
<li>Work</li>
<li>Journal</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div style="height: 100%;width: 100%;text-align:center;">
<div class="bodybg">
<div class="col" style="position: absolute;
left: 17%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;">
<div class="col-content">
</div>
<div style="position:absolute; top:5%;z-index:10000;">
<!-- animated txt here >
<svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- <svg viewBox="0 0 600 300">
<!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em">
|SL|
</text>
</symbol>
<!-- Duplicate symbols -->
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
</svg>
</div>
-->
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</html>
I'm a beginner to CSS and having a crazy time trying to figure how to create the following:
The circle represents 100% and the filled in green would represent the 62%. Is this even possible in just CSS or would need some javascript to create?
here's example with progressbar.js
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.Circle(container, {
color: '#7ed321',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 5,
trailWidth: 5,
trailColor: '#73787d',
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#7ed321', width: 5 },
to: { color: '#7ed321', width: 5 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value+'%');
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '3rem';
bar.animate(62*0.01); // Number from 0.0 to 1.0 //currently set to 62%
#container {
width: 200px;
height: 200px;
position: relative;
background: #454b52;
padding: 20px;
}
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<div id="container"></div>
Created a demo with pure css-
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.page {
margin: 40px;
}
h1 {
margin: 40px 0 60px 0;
}
.dark-area {
background-color: #666;
padding: 40px;
margin: 0 -40px 20px -40px;
clear: both;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.rect-auto {
clip: rect(auto, auto, auto, auto);
}
.pie,
.c100 .bar {
position: absolute;
border: 0.08em solid #307bbb;
width: 0.84em;
height: 0.84em;
clip: rect(0em, 0.5em, 1em, 0em);
border-radius: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.pie-fill {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
margin: 0 0.1em 0.1em 0;
background-color: #cccccc;
}
.c100 *,
.c100 *:before,
.c100 *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.c100.center {
float: none;
margin: 0 auto;
}
.c100.big {
font-size: 240px;
}
.c100.small {
font-size: 80px;
}
.c100 > span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 5em;
line-height: 5em;
font-size: 0.2em;
color: #cccccc;
display: block;
text-align: center;
white-space: nowrap;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.c100:after {
position: absolute;
top: 0.08em;
left: 0.08em;
display: block;
content: " ";
border-radius: 50%;
background-color: #f5f5f5;
width: 0.84em;
height: 0.84em;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.c100 .slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p50 .bar {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.c100:hover {
cursor: default;
}
.c100:hover > span {
width: 3.33em;
line-height: 3.33em;
font-size: 0.3em;
color: #307bbb;
}
.c100:hover:after {
top: 0.04em;
left: 0.04em;
width: 0.92em;
height: 0.92em;
}
.c100.dark {
background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
border-color: #c6ff00 !important;
}
.c100.dark > span {
color: #777777;
}
.c100.dark:after {
background-color: #666666;
}
.c100.dark:hover > span {
color: #c6ff00;
}
.c100.green .bar,
.c100.green .fill {
border-color: #4db53c !important;
}
.c100.green:hover > span {
color: #4db53c;
}
.c100.green.dark .bar,
.c100.green.dark .fill {
border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
color: #5fd400;
}
.c100.orange .bar,
.c100.orange .fill {
border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
color: #dd9d22;
}
.c100.orange.dark .bar,
.c100.orange.dark .fill {
border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
color: #e08833;
}
<div class="page">
<div class="dark-area clearfix">
<!-- default -->
<div class="clearfix">
<div class="c100 p50 big dark">
<span>50%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
<!-- /default -->
</div>
<!-- /.dark-area -->
</div>
I need to do something like Studio Up on the third slide, to show hidden content when I click the button, I need to do the same effect but I don't know how. Can someone help me, please? I have searched on the internet but found nothing.
This is my HTML, I don't know how to set CSS.
<div class="services">
<h2>Social Media</h2>
<div class="service-icon convers"></div>
<p>La comunicazione si è evoluta in conversazione. Siamo nati con questo cambiamento.</p>
<p class="answer">Inventiamo strategie e pensiamo comportamenti buoni (che valgono sempre).<br>
Studiamo ogni giorno nuovi strumenti e servizi</p>
e quindi?
indietro
</div>
Thank you so much.
When you click on .button-detail the class .answered will be added to .services, click on .button-back and the same class will be removed
$('.button-detail').on('click',function(){
$(this).parent().addClass('answered');
});
$('.button-back').on('click',function(){
$(this).parent().removeClass('answered');
});
then css will do the trick:
.services.answered .button-back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: 10001
}
.services.answered .button-detail {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.services.answered .answer {
height: 12.5rem;
padding-top: 0.625rem;
opacity: 1
}
.services.answered p {
height: 0;
overflow: hidden;
margin: 0;
opacity: 0
}
.services.answered .service-icon {
height: 5rem;
margin-top: 0.625rem
}
.services {
text-align: center;
overflow: hidden;
position: relative;
padding-bottom: 55px;
color: #fff;
height: 360px
}
.services h2 {
font-size: 1.3125rem;
margin-top: 1rem
}
.services p {
margin: 0.625rem 0 0;
font-size: 16px;
font-weight: 100;
line-height: 1.1;
letter-spacing: 0.07rem;
height: 4.25rem;
font-family: "bariol-thin",helvetica,arial,sans-serif
}
.services .answer {
height: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
font-size: 16px;
padding: 0.75rem 0.5rem 0;
line-height: 19px;
opacity: 0
}
.services .button {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: none!important;
font-family: "lato-regular",helvetica,arial,sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.8125rem 0
}
.services .button:hover {
background-color: #FF6F5C
}
.services .button-back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-color: #c2371f;
border-color: transparent
}
.services .button-back:hover {
background-color: #862f26
}
.services .button-detail {
z-index: 10000
}
.services p,.services .answer, .services .button, .services .service-icon {
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out
}