How to expand toggle sidebar more

How to expand toggle sidebar more - javascript

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

Related

Why doesn`t work my popup, although I connect Js?

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>

On mobile I want my navbar to close when I click an ID

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>

Is there a way when I click on hamburger, of ul to go horizontally and move the logo from center to far left?

Can I click on the hamburger menu and open it horizontally and verticaly at the same time..? You can see on the images what I exactly want basically I want an animation when I click on the hamburger so the logo moves to the far left and it all needs to be in the same speed. And social media needs to go verticaly.
Before clicking..
After clicking..
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
.logo-header {
width:50px;
position:absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label><a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span> </a>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>
Thank you in advance

You can do it like this:
input[type=checkbox]:checked~.sidebarIconToggle~ a > .logo-header {
left: 0%;
transition: all 0.3s;
}
Also added transition: all 0.3s; to the class .logo-header
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
demo
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background-image: url('https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
background-size: cover;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: transparent;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
right: 0;
width: 250px;
margin-top: 60px;
transform: translateX(+250px);
transition: transform 250ms ease-in-out;
background: transparent;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.6s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
right: 25px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input[type=checkbox]:checked~.sidebarIconToggle~a>.logo-header {
left: 0%;
transition: all 0.3s;
}
.topMenu{
list-style:none;
float:right;
color:#fff;
margin-right: -270px;
}
.topMenu li{
display:inline;
}
input[type=checkbox]:checked~.sidebarIconToggle~.topMenu {
margin-right: 70px;
transition: all 0.3s;
}
.logo-header {
transition: all 0.3s;
width: 50px;
position: absolute;
left: 40%;
top: 5px;
z-index: 100;
}
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<a href="https://stackoverflow.com/"><span class="logo-header">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/CARTOON_NETWORK_logo.png" width=80px> </span>
</a>
<ul class="topMenu">
<li>about us</li>
<li>contact</li>
<li>support</li>
</ul>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>About</li>
<li>Conatact</li>
<li>Support</li>
<li>Marketing</li>
<li>About</li>
<li>Contact</li>
<li>Blog<span>Follow us on Socials</span></li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
<div class="mainInner">
<div>Agency</div>
</div>
</div>

Fullscreen overlay opens on page load

I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

Target Nav Menu with JQuery

I'm trying to target an href button and a menu to fade in as the page loads. I'm having trouble trying to figure out the exact code since it is placed inside so many different tags and I'm fairly new to JS and JQuery. I have included a fiddle with all the code.
So far I have managed this code:
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
Shop Now
</div>
<script>
$(document).ready(function() {
$("#navm").fadeIn(500);
});
$(document).ready(function() {
$("#homeb").fadeIn(500);
});
</script>
CSS:
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
https://jsfiddle.net/tux41Lvp/

You need to create a parent div to the button anchor:
<div id="link">
Shop Now
</div>
You need to hide the target elements( you have to target parents ):
#nav{ display:none;}
#link{ display:none;}
Look at js on the working snippet
$(document).ready(function() {
$("#nav").fadeIn(500);
$("#link").fadeIn(1000);
});
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
#nav{ display:none;}
#link{ display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">
<ul id="nav">
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<div id="link">
Shop Now
</div>
</div>

You forgot to hide the items before showing them and you can't have two separate items with the same ID's, so I changed the selector.
$("#nav a, #homeb").hide();
$(document).ready(function() {
$("#nav a").fadeIn(1000);
$("#homeb").fadeIn(1000);
});
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ImageMain">
<ul id="nav">
<li>Men</li>
<li>Women</li>
<li>Contact</li>
</ul>
Shop Now
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to expand toggle sidebar more - javascript

Related

Why doesn`t work my popup, although I connect Js?

On mobile I want my navbar to close when I click an ID

Is there a way when I click on hamburger, of ul to go horizontally and move the logo from center to far left?

Fullscreen overlay opens on page load

Target Nav Menu with JQuery

Categories

Resources