I am taking reference from :
https://codepen.io/SudhakarJ/pen/GRgpddL .
I want to make same transition effect in my application, where I have 10 images and I use 3 classes namely cars,animals and fruits and when I click they should be filtered.
But the animated filter selector is not performing transition
HTML
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill" style="color:#212121"></span>
<li class="filter-option option-1 active" onclick="filterSelection('all')" style="color:#fffefe">All</li>
<li class="filter-option option-2" onclick="filterSelection('cars')" style="color:#fffefe">Shoes</li>
<li class="filter-option option-3" onclick="filterSelection('animals')" style="color:#fffefe">Toys</li>
<li class="filter-option option-4" onclick="filterSelection('fruits')" style="color:#fffefe">Toys</li>
</ul>
</div>
css
body {background-color:#ffffff; margin: 0; padding:0; font-family: Tahoma;}
h2 {text-align:center;}
#filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;}
#wrapper-filter {background-color:#000; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;}
#filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;}
.pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; }
.filter-option {transition: color 500ms;}
#filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;}
#filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;}
#filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;}
.option-1.active, .option-2.active, .option-3.active {color:#FFD700; transition: color 200ms; }
JS
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active")
$(this).addClass("active")
$("#filter-bar").removeClass().addClass($(this).attr("data-target"))
})
})
Below is an adapted version of the codepen where:
menu width is changed from 570px to 760px to take in account the 4 elements instead of 3 (it could maybe done in a dynamic way to take in account any number of items)
item width is unchanged (190px)
onclick=filterSelection custom method is removed. JS retrieves the class to apply using the data-target-filter attr
CSS transitions rules are updated with your options (.all, .car, .animals, .fruits instead of example .option-1,.option-2,.option-3) so they match when the value is applied as a class on #bar-filter
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target-filter"));
});
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #000;
width: 760px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #212121: z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
color: #fffefe;
}
#filter-bar.all .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.cars .pill {
margin-left: 190px;
transition: margin-left 200ms ease;
}
#filter-bar.animals .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
#filter-bar.fruits .pill {
margin-left: 570px;
transition: margin-left 200ms ease;
}
.all.active,
.cars.active,
.animals.active,
.fruits.active {
color: #FFD700;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option all active" data-target-filter="all">All</li>
<li class="filter-option cars" data-target-filter="cars">Shoes</li>
<li class="filter-option animals" data-target-filter="animals">Toys</li>
<li class="filter-option fruits" data-target-filter="fruits">Fruits</li>
</ul>
</div>
Related
I am trying to create a filter like the one here.
I have written some code in an HTML file and the aspect is identical, but the JavaScript does not work, meaning that if I click on a different option that the one active by default then nothing happens.
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
So, what I think is that the Javascript script is not visible at all, so what it should do, does not happen at all.
Did I place it wrongly? I am a front-end beginner, so I am not sure what is wrong.
Can anyone help me?
Your code works fine, you just missed adding jQuery, add this to the head section in your html file <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This will add the jQuery library to your project, jQuery will add a bunch of new features. Take a look at the docs here
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
</body>
</html>
I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.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');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
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;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
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;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* 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;
}
.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: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* 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: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" 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>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG
To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.
Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
Hi I am giving a try as new am new to html and css can you guys suggest how can I move side wrapper below a horizontal nav bar and the nav bar should fit into page width. in horizontal nav bar I have text called home and logout can you guys move right end side and make it as homepage icon and logout icon
Fiddle :https://jsfiddle.net/xzm7bx4n/
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
.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: 200px;
background: #222;
position: fixed;
height: 60%;
z-index: 10000;
transition: all .4s ease 0s;
float:top;
}
.sidebar-nav {
display: block;
float: left;
width: 200px;
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: 200px;
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;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
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;
}
}
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet"/>
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper" class="active">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li><a>New Project</a></li>
<li><a>Projects</a></li>
<li><a>Pyramid Oppurtinities</a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-14">
<p class="well lead">SANRIA Home Logout</p>
<div class="container">
<div class="row"> <!-- div da esquerda -->
<!-- Text input CNPJ e Razao Social-->
</div> <!-- fim div da esquerda -->
</div>
<!-- <p class="well lead">An Experiment using the sidebar (animeshmanglik.name)</p> -->
</div>
</div>
</div>
</div>
I'm glad you asked this question. When you have a header that should be the first thing in the DOM, you want to put this or as the first item inside the wrapper. The sidebar element can be placed below it to achieve a sleek look.
If you wanted a different style, we can discuss that as well.
This is the code I ended with.
<div id="wrapper" class="active">
<!-- Sidebar -->
<!-- Sidebar -->
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-14">
<p class="well lead">SANRIA Home Logout</p>
<div class="container">
<div class="row"> <!-- div da esquerda -->
<!-- Text input CNPJ e Razao Social-->
</div> <!-- fim div da esquerda -->
</div>
<!-- <p class="well lead">An Experiment using the sidebar (animeshmanglik.name)</p> -->
</div>
</div>
<div id="sidebar-wrapper">
<ul class="sidebar-nav" id="sidebar">
<li><a>New Project</a></li>
<li><a>Projects</a></li>
<li><a>Pyramid Oppurtinities</a></li>
</ul>
</div>
</div>
</div>
Here is 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: 200px;
background: #222;
position: fixed;
height: 60%;
z-index: 10000;
transition: all .4s ease 0s;
/*float:top;*/
}
.sidebar-nav {
display: block;
float: left;
width: 200px;
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: 200px;
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;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
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;
}
}
.well{
margin-bottom: 0px;
}
.lead{
margin-bottom: 0px;
}
p{
margin: 0px;
}
Working JSFiddle: https://jsfiddle.net/eq6bhyg5/
Notes: I took out all of the unnecessary padding that seemed to be throwing off the view.
We really should use the space that we are given.
If you want the sidebar to be in the side, with the page including header next to it, adjacent.
Action: Take the sidebar back out of the page-content-wrapper.
add display:inline-block; width:20% to side-bar css. Then set the wrapper css to width: 80%; display: inline-block;
So i know this is so easy for most of people here but i'm learning and i realy hope someone can help me;
I'm making a responsive nav for my website so i want to click the menu buttom so the menu drops from top of the screen. So i did the transform: translateY(-100%), but i have a function to make my menu (classic 3 lines) to turn into an "X" so what can i add to this function to make at the same time the menu appears?. And i don't know why but the transition from 3 hirizontal lines to X works nice but from X to the 3 lines is not working the same way.
DOM
<div id="mobile_menu">
<div class="mobile_menu_lines1"></div>
<div class="mobile_menu_lines2"></div>
<div class="mobile_menu_lines3"></div>
</div>
<nav id="mobile_nav">
<ul id="mobile_links">
<li>INICIO</li>
<li>PORTAFOLIO</li>
<li>NOSOTROS</li>
<li>CONTACTO</li>
</ul>
<ul id="mobile_links_social">
<li><img src="assets/img/svgs/facebook_icon.svg" alt="Facebook logo"/></li>
<li><img src="assets/img/svgs/twitter_icon.svg" alt="Twitter Logo"/></li>
<li><img src="assets/img/svgs/instagram_icon.svg" alt="Instagram logo"/></li>
</ul>
</nav>
CSS
#mobile_menu{
position: absolute;
display: block;
width: 50px;
height: 60px;
float: right;
right: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.mobile_menu_lines1{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 18px;
border-radius: 2px;
}
.mobile_menu_lines2, .mobile_menu_lines3{
max-width: 70%;
align-items: center;
height: 2px;
background-color: white;
margin-top: 9px;
border-radius: 2px;
}
.show .mobile_menu_lines1 {
transform: rotate(45deg) translate(11px, 5px);
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines2 {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.show .mobile_menu_lines3 {
transform: rotate(-45deg) translate(10px, -5px);
transition: all 0.3s ease-in-out;
}
#mobile_nav{
display: block;
text-align: center;
padding-top:60px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
#mobile_nav #mobile_links li{
padding: 15px 0;
}
#mobile_nav #mobile_links li a{
list-style: none;
text-decoration: none;
color: white;
font-family: "josefin sans";
font-size: 12px;
letter-spacing: 7px;
align-items: center;
text-align: center;
padding: 15px 0;
width:600px;
max-width: 100%
}
#mobile_nav #mobile_links_social li{
padding: 10px 20px;
}
JS
var mobileNavMostrar = document.getElementById('mobile_menu');
mobileNavMostrar.addEventListener('click',function(){
mobileNavMostrar.classList.toggle('show');
})
Thanks in advance.
I tried your code and I think you are missing two things - the css to define how the mobile_nav should change when it is shown, and the javascript to apply that css on click.
I'm trying to link the nav bar list items to transition a scroll to specific panels on the page. After making adjustment to the CSS to make all panel backgrounds (.maincontent) 100% page width the scroll effect no longer works...
CSS:
/****Landscape****/
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: #000000;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus,
a:hover {
color: #e6e8eb;
cursor: pointer;
transition: color 0.5s ease;
width: inherit;
right: 0;
left: 0;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*Maincontent*/
.maincontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
/*----/----Maincontent*/
/*contact panel*/
.letmeknow:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
.letmeknow {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
/*Contact submit Form*/
#container {
width: 840px;
margin: 25px auto;
}
.whysign {
float: left;
background-color: white;
width: 480px;
height: 347px;
border-radius: 0 5px 5px 0;
padding-top: 20px;
padding-right: 20px;
}
.signup {
float: left;
width: 300px;
padding: 30px 20px;
background-color: white;
text-align: center;
border-radius: 5px 0 0 5px;
}
[type=text] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
height: 45px;
line-height: 45px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0, 0, 0, .4);
}
input[type="submit"] {
appearance: none;
width: 80%;
height: 50px;
font-size: 1.05em;
background: transparent;
color: #e6e8eb;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
outline: none;
border: none;
}
input[type="submit"]:hover {
color: #464c4c;
cursor: pointer;
transition: color 0.5s ease;
}
[type='text']:focus {
outline: none;
border-color: #53CACE;
}
span:hover {
color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
}
.links {
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float: left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
#media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor: pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float: left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float: right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top,
#toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});
HTML:
<div class="header">
<div class="navbar">
LogoPlaceHolder
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner">
<p>Work Title 1</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner">
<p>Work Title 2</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner">
<p>Work Title 3</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner">
<p>Work Title 4</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner">
<p>Work Title 5</p> View Project → </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner">
<p>Work Title 6</p> View Project → </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel8">
<div class="inner">
<P>Like what I do?</P>
<p>Let me know</p>
<div id='container'>
<div class='signup'>
<p> Send me a message </p>
<form>
<input type='text' placeholder='First:' />
<input type='text' placeholder='Last:' />
<input type='text' placeholder='Email:' />
<input type='text' placeholder='Phone:' />
<input type='submit' placeholder='SUBMIT' />
</form>
</div>
</div>
<div class="thank you">
<p>Thank you for your message!</p>
</div>
</div>
</div>
<div class="panel multiplepanels" id="panel9">
<div class="inner">
<p>Social</p>
</div>
</div>
</div>
<footer>
<div class="panel panel-blank" id="panel10">
<div class="inner"> © 2015 thiswebsite.com</div>
</div>
</footer>
It is caused by giving .maincontent absolute positioning. This makes html not be the full height of the document. And the script relies on this for the transition. So here are a few changes to make :
Demo
Take a way the dot from body (sidenote) :
.body {
...
}
Remove positioning here :
.maincontent {
width: 100%;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
And then box-sizing on this element to remove the horizontal scrollbar :
.panel {
width: 100%;
background: #000000;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}