I want to add a fadeIn/Out effect on a toggle class when navigation is open and close. Somebody know how? I'm using the toggle class because of a responsive problem i had before when resizing part of the navigation disappeared.
FIDDLE example
nav ul.show {
display: block;
}
And for the javascript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
I prefer using css transitions these days over jquery animations. To me that appears more clear and easier to read, since logic and visualization are more separate. In the end the action is not the fading, but the change of state (or class in this case). The fading effect is a pure optic gimmick.
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
Try this: Demo
// Show navigation //
$(function() {
$('.nav-btn').click(function(event) {
// alert();
if($('nav > ul').hasClass("show"))
{
// alert();
$('nav > ul').fadeOut(1000, function() {
$('nav > ul').removeClass('show');
});
} else {
//alert('no class');
$('nav > ul').fadeIn(1000, function() {
$('nav > ul').addClass('show');
});
}
});
});
/************************************************
Site Name:
Author:
************************************************/
html, body {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 22px;
line-height: 26px;
color: #222;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
strong, b {
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
h1 {
font-weight: bold;
font-size: 18px;
line-height: normal;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 0 0 25px 0;
}
h2 {
font-weight: normal;
font-size: 18px;
line-height: normal;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 0 0 0 0;
}
p {
margin: 0 0 25px 0;
}
p a {
color: #222;
text-decoration: underline;
}
p a:visited {
text-decoration: underline;
}
p a:hover {
text-decoration: none;
color: white;
background-color: #111;
}
.tag {
font-size: 14px;
text-transform: uppercase;
margin: 0 0 0 0;
}
/************************************************
Header - Navigation
************************************************/
header {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 9999;
background-color: white;
}
/* Navigation */
.nav-btn {
display: none;
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 60px;
z-index: 9999;
background: url(../elements/nav-icon.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: red;
}
.nav-btn:hover {
background: url(../elements/nav-icon-hover.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: blue;
}
nav {
margin: 0 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
}
nav li {
position: relative;
float: left;
margin: 0;
padding: 0;
background-color: transparent;
}
nav a,
nav li a {
display: block;
font-size: 25px;
font-weight: bold;
color: #111;
line-height: 61px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
height: 60px;
padding: 0;
margin: 0 10px;
background-color: rgba(255,255,255,0.9);
}
nav a:hover,
nav li:hover a {
color: #aaa;
}
nav ul.show {
display: block;
}
/*nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #aaa;
}*/
.col-nav,
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
/************************************************
Responsives
************************************************/
/*#media all and (min-width: 1601px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1201px) and (max-width: 1600px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 1001px) and (max-width: 1200px) {
.col-25 {
width: 25%; }
}
#media all and (min-width: 0px) and (max-width: 400px) {
}
*/
#media all and (min-width: 1000px) {
.class_test{
display:block !important;
}
.home{
display:none;
}
}
#media all and (min-width: 801px) and (max-width: 1000px) {
.col-25 {
width: 33.33333%; }
}
#media all and (min-width: 601px) and (max-width: 800px) {
.col-25 {
width: 50%; }
}
#media all and (min-width: 0px) and (max-width: 600px) {
nav {
margin: 0 10px;
}
#container {
margin-left: 10px;
margin-right: 10px;
}
.col-25 {
width: 100%; }
}
#media all and (min-width: 0px) and (max-width: 1000px) {
nav ul {
display: none;
top: 60px;
}
/*nav:hover ul {
display: block;
}*/
.nav-btn {
display: block;
}
.home {
width: 220px;
margin: 0 auto;
}
.col-nav {
width: 100%; }
}
.nav ul {
transition: display .3s;
}
.nav ul.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<nav>
<div class="col-nav">
Untitled
</div>
<ul class="class_test">
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item3</li>
</ul>
</nav>
</header>
Use fadeToggle() method in jquery
you can refer the other methods also here
Hope this helps
try this.
http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
jquery:
$(#divID).toggleClass('yourClass').fadeOut('slow');
Related
I want to implement a dropdown menu for mobile devices with animation so when the transition ends, it needs to be display:none. Here's what I've done:
const menuButton = document.querySelector('.menuButton')
const navMenu = document.querySelector('.nav')
function menuToggle() {
if (navMenu.classList.contains('navDisplay')) {
navMenu.classList.remove('navShow')
setTimeout(() => {
navMenu.classList.remove('navDisplay')
}, 300)
} else {
navMenu.classList.add('navDisplay')
setTimeout(() => {
navMenu.classList.add('navShow')
}, 0)
}
}
menuButton.addEventListener('click', menuToggle)
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html, body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: 'Fredoka One', sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
display: none;
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
transition: height 300ms ease-in-out;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
height: 100vh;
}
.navDisplay {
display: block;
}
<header>
<div class="menuButton">☰</div>
<nav>
<p class="logo">LOGO</p>
<div class="nav">
<ul>
<li><div class="orderButton">ELEMENT1</div></li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
So, the menu has display:none and height:0 by default. The click event listener triggers function that checks if menu is displayed or not and adds or removes respective classes (the display class removes after the transition ends with the help of timeout 400ms). Is there any more beautiful or less code solutions?
You are making it way more complex. You don't need to have a display:none and a height:0. height:0 with overflow:hidden will do the job. If you wanna show the links after the menu gets its height with a delay, you could use opacity. That and using the toggle function will make it as simple as this:
const menuButton = document.querySelector(".menuButton");
const navMenu = document.querySelector(".nav");
function menuToggle() {
navMenu.classList.toggle("navShow");
}
menuButton.addEventListener("click", menuToggle);
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
color: #e8e8e8;
}
html,
body {
overflow-x: hidden;
background-color: rgb(66, 66, 66);
}
h2 {
margin: 15px 0;
}
a {
transition: all.3s ease;
-webkit-transition: all.3s ease;
-moz-transition: all.3s ease;
color: #e8e8e8;
text-decoration: none;
}
a:hover {
color: #777777;
}
/*--------------NAV BAR------------*/
header {
background-color: rgba(24, 24, 24, 0.95);
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.menuButton {
display: none;
position: fixed;
right: 0;
color: white;
font-size: 1.5em;
line-height: 65px;
margin: 10 30px;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
.logo {
color: white;
font-size: 30px;
font-weight: bold;
font-family: "Fredoka One", sans-serif;
line-height: 65px;
}
nav div ul {
text-align: center;
flex-direction: column;
margin-top: 50px;
overflow: hidden;
}
nav div ul li {
margin: 20px 0;
}
nav {
flex-direction: column;
}
.nav {
box-sizing: border-box;
width: 100%;
overflow: hidden;
height: 0;
opacity:0;
transition: height 300ms ease-in-out,opacity 300ms 400ms ease-in-out;
}
.orderButton {
padding: 20px;
}
.logo {
text-align: center;
}
.menuButton {
display: block;
}
.navShow {
opacity:1;
height: 100vh;
}
<header>
<div class="menuButton">☰</div>
<nav>
<a href="index.html">
<p class="logo">LOGO</p>
</a>
<div class="nav">
<ul>
<li>
<div class="orderButton">ELEMENT1</div>
</li>
<li>ELEMENT2</li>
<li>ELM3</li>
</ul>
</div>
</nav>
</header>
I use fullpage.js and when I create a link and link it to an id it works fine but when I want to scroll up again I can't do that.
HTML:
click here
jsfiddle
I've made a number of updates to yours. I just started over as I felt like yours was kind of everywhere. Here's your fiddle - See Fiddle
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
});
// fullpage customization
$('#fullpage').fullpage({
sectionsColor: [],
sectionSelector: '.vertical-scrolling',
navigation: true,
slidesNavigation: true,
controlArrows: false,
anchors: ['home', 'about', 'contact'],
menu: '#menu',
afterLoad: function(anchorLink, index) {
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
if (index == 5) {
$('#fp-nav').hide();
}
},
onLeave: function(index, nextIndex, direction) {
if(index == 5) {
$('#fp-nav').show();
}
},
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(false, 'up');
$header_top.css('background', 'transparent');
$nav.css('background', 'transparent');
$(this).css('background', '#374140');
$(this).find('h2').css('color', 'white');
$(this).find('h3').css('color', 'white');
$(this).find('p').css(
{
'color': '#DC3522',
'opacity': 1,
'transform': 'translateY(0)'
}
);
}
},
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
if(anchorLink == 'fifthSection' && slideIndex == 1) {
$.fn.fullpage.setAllowScrolling(true, 'up');
$header_top.css('background', 'rgba(0, 47, 77, .3)');
$nav.css('background', 'rgba(0, 47, 77, .25)');
}
}
});
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);
/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#font-face {
font-family: "untitled-font-1";
src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:after,
[class*=" icon-"]:after {
font-family: "untitled-font-1";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-up-open-big { display: inline-block; }
.icon-up-open-big:after {
content: "a";
font-size: 2.5em;
display: block;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
color: black;
-webkit-transition: color .3s;
transition: color .3s;
}
.icon-up-open-big:hover:after {
color: white;
}
.scroll-icon {
position: absolute;
left: 50%;
bottom: 30px;
padding: 0 10px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.end {
margin-top: 30px;
font-size: 3em;
font-weight: bold;
opacity: 0;
-webkit-transform: translateY(300px);
-ms-transform: translateY(300px);
transform: translateY(300px);
-webkit-transition: opacity, -webkit-transform 1s;
transition: opacity, transform 1s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
margin: 0;
padding: 0;
font-family: 'Alegreya Sans', Arial, sans-serif;
text-transform: uppercase;
}
html {
font-size: 62.5%;
}
body {
color: black;
letter-spacing: .18em;
}
a {
text-decoration: none;
color: white;
}
ul, li {
list-style-type: none;
}
/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-top {
background: rgba(0, 47, 77, .3);
height: 70px;
padding: 0 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 12;
box-sizing: border-box;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
display: block;
padding: 0 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 10px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 30px;
left: 10px;
-webkit-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
nav {
height: 0;
opacity: 0;
box-sizing: border-box;
background: rgba(0, 47, 77, .25);
position: fixed;
top: 70px;
width: 100%;
-webkit-transition: all 1s;
transition: all 1s;
}
.open-menu ~ nav {
opacity: 1;
padding: 80px 0;
z-index: 15;
height: calc(90vh - 70px);
}
nav ul {
padding: 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav li {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
nav li a {
font-size: 2em;
display: block;
padding: 30px;
text-align: center;
-webkit-transition: background .3s;
transition: background .3s;
}
nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
background: #962D3E;
}
nav li:nth-child(even) a {
background: #aa3346;
}
nav li:nth-child(odd) a:hover {
background: #9e2f41;
}
nav li:nth-child(even) a:hover {
background: #c53c52;
}
nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
background: #453659;
}
/* SECTION STYLES - fullPage.js
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
text-align: center;
/*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}
h2 {
text-transform: lowercase;
font-size: 4em;
margin-bottom: 20px;
}
h3 {
font-weight: 300;
font-size: 2.8em;
}
/* SLIDENAV STYLES - fullPage.js
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: white;
width: 8px;
height: 8px;
margin: -4px 0 0 -4px;
display: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: transparent;
box-sizing: border-box;
border: 1px solid #24221F;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 767px) {
nav ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
nav li {
margin-top: 1px;
}
nav li a {
font-size: 1.5em;
}
.scroll-icon {
display: none;
}
}
#media screen and (max-width: 400px) {
html {
font-size: 50%;
}
.open-menu ~ nav {
padding: 20px 0;
}
nav li a {
padding: 3px;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<header>
<div class="header-top clearfix">
<h1 class="l-left">Your Logo</h1>
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li data-menuanchor="home">
Home
</li>
<li data-menuanchor="about">
About
</li>
<li data-menuanchor="contact">
Contact
</li>
</ul>
</nav>
</header>
<div id="fullpage">
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>first slide in slideshow</h3>
<div class="scroll-icon">
<p>Jump into the next slide</p>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>second slide in slideshow</h3>
<div class="scroll-icon">
<p>Jump into the next slide</p>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>third and final slide in slideshow</h3>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>fourth slide in slideshow</h3>
</section>
</div>
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');
});
I have faced with problem.
I have following html layout
<div class="accordion-list-item__controls is-opened">
<span class="accordion-list-item__toggle-icon fa"></span>
<span class="accordion-list-item__icon fa fa-mobile-phone"></span>
<a class="accordion-list-item__link" href="http://crosp.net/category/software-development/mobile/" title="View all posts in Mobile Development">Mobile Development</a>
<div class="accordion-list-item__post-count">7</div>
</div>
And css
.accordion-list-item {
width: 100%;
display: block;
}
.accordion-list-item__icon {
font-size: 1.125em;
display: inline-block;
margin-left: 0.27778em;
text-indent: 0; }
.accordion-list-item__toggle-icon {
cursor: pointer;
margin: 0;
padding: 0; }
.accordion-list-item__toggle-icon::before {
display: inline-block;
content: "";
color: transparent;
text-indent: 0;
font-family: "FontAwesome"; }
.accordion-list-item__link {
text-indent: 0;
margin-left: 0.4375em;
display: inline-block;
white-space: initial;
max-width: 70%;
vertical-align: middle;
color: #797e83; }
.accordion-list-item__link:visited, .accordion-list-item__link:link {
color: #797e83; }
#media only screen and (max-width: 992px) {
.accordion-list-item__link {
max-width: 60%; } }
#media only screen and (max-width: 768px) {
.accordion-list-item__link {
max-width: 80%; } }
#media only screen and (max-width: 480px) {
.accordion-list-item__link {
max-width: 60%; } }
.accordion-list-item__post-count {
text-indent: 0;
font-size: 0.8125em;
position: absolute;
display: inline-block;
right: 0;
color: #797e83;
padding: 0 0.61538em;
margin-right: 0.61538em;
border: 1px solid #68c3a3;
border-radius: 10px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
.accordion-list-item__controls {
padding: 0.625em 0.3125em;
position: relative;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
color: #797e83; }
.accordion-list-item__controls:hover {
color: #68c3a3; }
.accordion-list-item__controls:hover .accordion-list-item__link {
color: #68c3a3; }
.accordion-list-item__controls:hover .accordion-list-item__post-count {
color: #f7f7f7;
background-color: #68c3a3; }
.accordion-list-item__controls:hover::after {
border-color: #68c3a3; }
.accordion-list-item__controls::after {
content: '';
display: block;
position: absolute;
border-bottom: 1px solid transparent;
bottom: 0;
width: 100%;
left: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
.accordion-list-item.is-active > .accordion-list-item__controls::after {
border-color: #68c3a3; }
.accordion-list-item.has-children > .accordion-list-item__controls .accordion-list-item__toggle-icon::before {
content: "";
color: #797e83; }
.accordion-list-item.has-children > .accordion-list-item__controls.is-opened .accordion-list-item__toggle-icon::before {
content: "";
color: #68c3a3; }
The problem is that accordion-list-item__post-count is positioned absolutely and I get following result on some screens
As you can see I tried to set text max width, but because of text-indent (padding of nested items is done using text-indent dynamically generated) I cannot set consistent property (max width).
I am looking for any type of solution, even using JS/jQuery.
But for sure, CSS solution is much valuable.
Please share your ideas how to solve this problem.
I would be grateful for any help.
I am using adtile's fixed responsive nav (demo here) for a website. It's working perfectly, except for one thing: I'd like the header background color to be transparent at first and then fade in as you scroll down to the About section. If possible, the header background should have 100% opacity right when the About link color changes. I'm really lost about how to make this work, so any help would be greatly appreciated!
I made a jsfiddle here, but there is a lot of Javascript so it might be easier to look at the repo on GitHub here.
HTML:
<header>
<a href="#home" class="logo" data-scroll>Fixed Nav</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Home</a></li>
<li class="menu-item"><a href="#about" data-scroll>About</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projects</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Fixed Nav</h1>
<p>The code and examples are hosted on GitHub and can be found from here. Read more about the approach from our blog.</p>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="projects">
<h1>Projects</h1>
</section>
<section id="blog">
<h1>Blog</h1>
</section>
CSS:
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
}
a:active,
a:hover {
outline: 0;
}
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
/* ------------------------------------------
DEMO STYLES
--------------------------------------------- */
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
color: #37302a;
background: #fff;
font: normal 100%/1.4 sans-serif;
}
section {
border-bottom: 1px solid #999;
text-align: center;
padding: 100px 0 0;
height: 800px;
width: 100%;
}
h1 {
margin-bottom: .5em;
}
p {
width: 90%;
margin: 0 auto;
}
/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */
header {
background: #f4421a;
position: fixed;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.logo {
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
font-weight: bold;
line-height: 55px;
padding: 0 20px;
color: #fff;
float: left;
}
/* ------------------------------------------
MASK
--------------------------------------------- */
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
#media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */
.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.nav-collapse,
.nav-collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
#media screen and (min-width: 40em) {
.nav-collapse {
float: right;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
#media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #f4421a;
padding: 0.7em 1em;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #b73214;
}
#media screen and (min-width: 40em) {
.nav-collapse a {
border-left: 1px solid white;
padding: 1.02em 2em;
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
#media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */
#font-face {
font-family: "responsivenav";
src:url("../icons/responsivenav.eot");
src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
url("../icons/responsivenav.ttf") format("truetype"),
url("../icons/responsivenav.woff") format("woff"),
url("../icons/responsivenav.svg#responsivenav") format("svg");
font-weight: normal;
font-style: normal;
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
JAVASCRIPT:
There are too many lines of code to fit on Stackoverflow. Please see the Javascript files on GitHub here.
You can definitely use Skrollr to achieve this. However, I hope someone else can find a solution that does not rely on this.
https://github.com/Prinzhorn/skrollr
You can essentially ease opacity/color changes across a set scroll height/position. So it would do what you want perfectly. The demo https://prinzhorn.github.io/skrollr/ has a great example about half-way down the page.
Try making header background initially transparent and add class over header on scroll.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$("header").addClass("darkHeader");
} else {
$("header").removeClass("darkHeader");
}
});
Style new class as per your requirement. Hope this is what you are looking for.
U can do this by JQuery simply first add any class to home link i.e 'home' <li class="menu-item home active"><a href="#home" data-scroll>Home</a></li> then detect on scroll if it is active add class to header
example
$(window).scroll(function(){
if ($(".menu-item.home").hasClass("active")) {
$("header").addClass("default-header")
}else {
$("header").removeClass("default-header")
}
})
than do
.default-header{
// your css code here for default/home section header
}