Yesterday I made a popup in Html, Css and JS but it didn`t work.
Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...
In a other project from me the popup works with the same code...
What shall I do that it works? Or what is the mistake in the code?
function togglePopup() {
document.getElementById("popup").classList.toggle("active");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#pop-up {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
#pop-up.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>
Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
}
#popup.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup active" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>
First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".
Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".
So to work properly you should change the following:
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
Then change:
<div class="popup" id="pop-up">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
I want to ask a question when I click on my navigation bar menu icon that I have from font awesome it does not open my menu first time but when I click again I on the navigation bar I will be more cleared by these images and situations.
First time click:
Image of first time clicked
Second time click - it opens means clicking two times :
The image after clicking second time
My html code
function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
if (navLis.style.marginTop === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
Edit : My media queries
#media screen and (max-width:668px)
{
nav
{ height: 64px; transition: 1s!important; }
nav li
{ text-align: center; display: block; transition: all 1s linear!important; }
#navLis { transition: margin-top .3s ease-in .2s!important; display: block; margin-top: -250px; background: black; z-index: 11; }
nav i {
display: block!important;
}
.home_container{
height: 80vh;
}
}
The problem is that you've not included the margin-top: -250px in the style attribute at first.
so navLis.style.marginTop === '-250px' will return false at first and the else block will be executed.
so you have to add the style attribute to your #navList like this:
<div id="navLis" style="margin-top: -250px">
function navigation() {
let navLis = document.getElementById('navLis');
let hamburger = document.getElementById('hamburger');
let top = window.getComputedStyle(navLis, null).getPropertyValue("margin-top");
if (top === '-250px') {
navLis.style.marginTop = '50px';
setTimeout(function() {
hamburger.className = 'fa fa-close';
}, 200);
} else {
navLis.style.marginTop = '-250px';
setTimeout(function() {
hamburger.className = 'fa fa-bars';
}, 200);
}
}
.nav {
position: absolute;
z-index: 2222;
width: 100%;
}
.current {
color: black;
background: #fff;
padding: 4px;
}
li {
list-style-type: none;
}
a {
transition: .2s!important;
text-decoration: none;
}
nav ul {
margin-top: 20px;
color: white;
background: black;
transition: all 1s linear!important;
}
nav {
height: 60px;
border-bottom: 2px solid black;
background: black;
}
nav li {
display: inline-block;
transition: 1s!important;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
font-family: Sans-Serif;
font-weight: bold;
padding: 2px 0px;
}
nav li a:hover {
color: black;
background: #fff;
padding: 4px;
}
#navLis {
background: black!important;
position: absolute;
width: 100%;
z-index: 11!important;
padding: 10px 0;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
color: white;
transition: all 1s ease;
}
.logo {
padding: 10px;
display: block;
z-index: 111;
font-size: 25px;
}
.logo a {
font-family: 'Josefin Sans', sans-serif;
color: #ff6f00;
}
#media screen and (max-width:668px) {
nav {
height: 64px;
transition: 1s!important;
}
nav li {
text-align: center;
display: block;
transition: all 1s linear!important;
}
#navLis {
transition: margin-top .3s ease-in .2s!important;
display: block;
margin-top: -250px;
background: black;
z-index: 11;
}
nav i {
display: block!important;
}
.home_container {
height: 80vh;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<nav class="navbar" id="navbar">
<div class="nav">
<a onclick="navigation()">
<i class="fa fa-bars" aria-hidden="true" id="hamburger"></i>
</a>
<div class="logo">
The Big Blog
</div>
</div>
<div id="navLis">
<ul>
<li>Home</li>
<li>Start Blogging</li>
<li>Popular Bloggers</li>
<li>About Us</li>
<li><a class="current" href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
I'm just a novice. I know some html, but I have no idea how to do the following:
there is an html page, it has a section or div with 3 columns (1st column - text, 2nd - video, in the 3rd column there are 4 links).
When the user scrolls to this section, I need the page to stop (I would like to but not necessarily), and while the person scrolls, it should change the text in the 1st column and the video in the 2nd(both same time) . And also the user should be able to scroll through these videos&text by clicking on the links in the 3rd column. How it is done here: fleet-app
It's written in React, so I can't to spy the solution.
I found this solution Javascript - change image and text on select, but I can't figure out how to apply it in my situation.
Is it possible to do this with Javascript or CSS or something else?
Please don't scold me too much - I'm just learning:)
The solution I got now is very ugly - example codepen.io/Avelaskes/pen/rNOKVbQ
(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);(function($){
$(document).ready(function() {
// Scroll to Top
jQuery('.scrolltotop').click(function(){
jQuery('html').animate({'scrollTop' : '0px'}, 400);
return false;
});
jQuery(window).scroll(function(){
var upto = jQuery(window).scrollTop();
if(upto > 500) {
jQuery('.scrolltotop').fadeIn();
} else {
jQuery('.scrolltotop').fadeOut();
}
});
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
})(jQuery);
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght#0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Oswald:wght#200;300;400;500;600;700&family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
background: #fff;
color: #333333;
}
a:hover {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
::selection {
color: white;
background: #C840E9;
}
::-webkit-selection {
color: white;
background: #C840E9;
}
::-moz-selection {
color: white;
background: #C840E9;
}
.scrolltotop {
width: 40px;
height: 40px;
border-radius: 20px 20px 0 0;
background: #5773FF;
text-align: center;
padding-top: 8px;
font-size: 22px;
color: #ffffff;
position: fixed;
right: 5px;
bottom: 5px;
display: none;
transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
}
.scrolltotop:hover {
background: #C840E9;
color: #fff;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5);
}
/*---- header-area start ----*/
.header-area {
background-color: #15161C;
padding: 25px 0;
}
.navbar {
padding: 0px;
}
.navbar-brand img {
max-width: 100%;
display: block;
transition: 0.2s all ease;
-moz-transition: 0.2s all ease;
-webkit-transition: 0.2s all ease;
}
.navbar-brand img:hover {
opacity: 0.8;
}
.main-menu-part ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.main-menu-part ul li {
float: left;
}
.main-menu-part ul li a {
font-family: 'Cabin', sans-serif;
display: block;
padding: 0px 5px 0px 52px;
text-transform: capitalize;
font-weight: normal;
font-size: 18px;
color: #fff;
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
}
.main-menu-part ul li a:hover {
opacity: 0.8;
}
.hamburger {
padding: 10px 0px 0px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: 0px!important;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #13F1FC;
border-radius: 2px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/*---- rkma-area start ----*/
.rkma-area {
background-color: #15161c;
}
.mnrkma_top {
background: url(img/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0;
padding-bottom: 545px;
}
.rkma_top h2 {
color: #fff;
font-size: 50px;
text-align: center;
font-weight: 600;
padding-top: 50px;
}
.rkma_top p {
font-family: 'Cabin', sans-serif;
color: #B7E6FF;
font-size: 16px;
text-align: center;
line-height: 25px;
padding-top: 5px;
}
.rkma_part {
position: relative;
-webkit-animation:animation-hci0jy 5s 2s infinite alternate;
animation:animation-hci0jy 5s 2s infinite alternate;
-webkit-animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function:cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part img {
width: 334px;
display: block;
margin: auto;
padding-top: 50px;
}
.rkma_part_1 {
position: absolute;
top: 0;
left: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
.rkma_part_2 {
position: absolute;
top: 0;
right: 24%;
-webkit-animation: animation-hci0jy 5s 2s infinite alternate;
animation: animation-hci0jy 5s 2s infinite alternate;
animation-timing-function: ease;
-webkit-animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
animation-timing-function: cubic-bezier(0.43,0.05,0.6,0.99);
}
#-webkit-keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
#keyframes animation-hci0jy{
0% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
50% {
-webkit-transform:translateY(15px);
-ms-transform:translateY(15px);
transform:translateY(15px);
}
100% {
-webkit-transform:translateY(0px);
-ms-transform:translateY(0px);
transform:translateY(0px);
}
}
/*---- smy-area start ----*/
.smy-area {
background-color: #15161C;
padding: 60px 0;
padding-top: 0;
}
.smy_top h2 {
color: #9F9F9F;
font-size: 52px;
font-weight: 700;
text-align: center;
}
.smy_top p {
color: #9F9F9F;
font-size: 27px;
font-weight: 700;
text-align: center;
padding-top: 5px;
padding-bottom: 30px;
}
.smy_left img {
max-width: 100%;
display: block;
}
.smy_left p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
font-size: 25px;
font-weight: 600;
padding-left: 103px;
line-height: 35px;
margin-top: -68px;
}
.smy_right img {
width: 180px;
height: 120px;
border-radius: 100%;
display: block;
margin: auto;
border: 4px solid #B9B8B8;
}
.smy_right p {
color: #F2F2F2;
font-size: 18px;
text-align: center;
line-height: 25px;
padding-top: 16px;
}
/*---- tabbingsec-area start---*/
.tabbingsec-area2 {
display: none;
}
.tabs {
width: 100%;
display: inline-block;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
padding-top: 110px
}
.tab-links li {
list-style: none;
padding-bottom: 19px;
}
.tab-links li i {
color: #C4C4C4;
font-size: 10px;
padding-right: 6px;
}
.tab-links a {
color: #E4E4E4;
font-size: 16px;
}
.tab-links a:hover {
text-decoration: none;
}
.tab-links li.active a {
color: #13F1FC;
}
/*----- Content of Tabs -----*/
.tab {
display: none;
}
.tab.active {
display: block;
}
#tabbingsec {
background: #15161C;
padding: 60px 0px;
}
.width60 {
width: 50%;
float: left;
}
.width60 h3 {
color: #9F9F9F;
font-size: 40px;
font-weight: 800;
padding-top: 60px;
padding-bottom: 6px;
}
.width60 p {
color: #AAABAB;
font-size: 28px;
line-height: 37px;
}
.width40 {
width: 50%;
float: left;
}
.width40 img {
max-width: 10%;
display: block;
margin: auto;
}
.width60 a {
width: 121px;
height: 46px;
line-height: 46px;
text-align: center;
color: #fff;
background:#ff8b38;
border-radius:3px;
font-size: 15px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="tabbingsec">
<div class="container">
<div class="tabs">
<div class="row">
<div class="col-lg-8 col-md-9 col-sm-6">
<div class="tab-content">
<div id="tab1" class="tab active">
<div class="width60">
<h3>First of all</h3>
<p>Decide where you will <br>enter into a position <br>and where you want<br> to put a stop order</p>
</div>
<div class="width40">
<img src="img/ph4.png" alt=""/>
</div>
</div>
<div id="tab2" class="tab">
<div class="width60">
<h3>In App</h3>
<p>Choose the calculator<br> depending on what<br> market you are working<br> or choose Universal</p>
</div>
<div class="width40">
<img src="img/ph5.png" alt=""/>
</div>
</div>
<div id="tab3" class="tab">
<div class="width60">
<h3>Balance</h3>
<p>Enter the amount of<br> balance or the amount<br> of money from which <br>you will count risk</p>
</div>
<div class="width40">
<img src="img/ph6.png" alt=""/>
</div>
</div>
<div id="tab4" class="tab">
<div class="width60">
<h3>Required</h3>
<p>Enter the price at wich<br> you plan to enter into <br>position and the price <br>of the planed stop order</p>
</div>
<div class="width40">
<img src="img/ph7.png" alt=""/>
</div>
</div>
<div id="tab5" class="tab">
<div class="width60">
<h3>Be WISE</h3>
<p>Chose the aceptable<br> risk amount in %.<br> The amount that you<br> are ready to loose in<br> case you wrong in your<br> predicrion</p>
</div>
<div class="width40">
<img src="img/ph8.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-6">
<ul class="tab-links">
<li class="active"><i class="fas fa-circle" aria-hidden="true"></i>First step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Second step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Third step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fourth step</li>
<li><i class="fas fa-circle" aria-hidden="true"></i> Fivth step</li>
</ul>
</div>
</div>
</div>
</div>
</section>
I am trying to create a fullscreen navigation overlay with 2 levels of navigation.
Currently I have managed to build the fullscreen overlay along with the level 1 navigation.
https://codepen.io/anon/pen/rJJGKE
$(document).ready(function() {
$(".menu-btn a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
font-size: 32px;
}
.menu-btn a {
display: inline-block;
text-decoration: none;
/* safari hack */
}
.btn-open:after {
color: #000;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
color: #000;
}
.btn-close:after {
color: #000;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
color: #000;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(135, 119, 116, 0.95);
}
.overlay .menu {
margin: 100px auto;
width: 80%;
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
margin-bottom: 40px;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 10px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #000;
text-transform: capitalize;
font-weight: 300;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.overlay .menu ul ul li a:hover {
color: #34b484;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #c3bab9;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 600!important;
font-size: 18px!important;
letter-spacing: 1px;
}
p.email a {
font-family: 'Open Sans', sans-serif!important;
color: #000!important;
font-weight: 300!important;
font-size: 16px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 18px;
color: #000000;
line-height: 18px;
font-weight: 600;
position: relative;
top: -5px;
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Logo
<img src="" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
Menu
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What i am looking to do now is: When a user clicks on services, instead of going to services page, i would like a second level menu to appear (service 1, service 2 etc) in the same place as the existing menu.
Would this require a jQuery solution? Any help would be appreciate.
Yeah, I think a simple jQuery function in combination with some CSS would be the best solution:
$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
// I added this line
$(this).next('.sub').toggleClass('visible');
});
.overlay .menu ul li .sub {
max-height: 0;
transition: max-height 0.4s ease;
overflow: hidden;
}
.overlay .menu ul li .sub.visible {
max-height: 500px;
transition: max-height 0.4s ease;
}
Have a look over here (Just click on the 'Service' button)
I'm using the following HTML + CSS for a sidebar on a asp.net web page. I got this from a template. Currently when I toggle the sidebar, it comes out messed up. The text and icon are not in the same line. I think it is running out of space. How can i change it so that when it is toggled, it opens up more? Thank you. I'm really new to CSS and bootstrap. Thank you.
<div id="wrapper">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
<li><a>Dashboard<span class="sub_icon glyphicon glyphicon-dashboard"></span></a></li>
<li><a>Reports<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Configuration<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Settings<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content inset">
<div class="row">
<div>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
margin-right:0px;
}
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-left: -150px;
left: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: left;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: left;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
}
#main_icon
{
float:right;
padding-right: 30px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 32px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
.glyphicon{
font-size: 19px;
}
}
JS:
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
You'll just need to make some updates to the CSS to make it wider. These are the selectors I made changes to. You can see the working version in the Fiddle below.
#sidebar-wrapper {
margin-left: -242px;
left: 70px;
width: 250px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
#wrapper.active #sidebar-wrapper {
left: 66px;
}
.sidebar-nav {
display: block;
float: left;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
#media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 242px;
/*width: 150px; You can remove this */
transition: all .4s ease 0s;
}
}
Check out this Fiddle