The following codes work perfectly in Google Chrome or other browsers. But when tested with a safari on an iPhone, the bottom dropdown menu doesn't appear. But when I click on the screen it goes to the menu. The menu is operational but nothing appears on the screen. What is the reason of this? This appears when I add position: fixed to the menu. But I don't want it fixed on the screen. Any help, I'd appreciate it.
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav>li {
position: initial;
display: block;
transition: all 0.6s ease;
}
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: #FFF;
border: none;
overflow-y: auto;
border-radius: 0px;
width: 100%;
}
.dropdown_mobile {
background: #FFF;
width: 100%;
min-height: 40px;
display: inline-table;
align-items: center;
transition: all 0.6s ease;
}
#menu .dropdown-inner {
display: flex;
}
#menu div.dropdown-inner > ul.list-unstyled {
display: flex;
}
#menu .dropdown-inner li {
margin: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
#menu .dropdown-inner a {
font-family: Century Gothic, sans-serif;
font-size: 14px;
font-weight: 600;
color: #FFF;
}
<li class="dropdown open">
Fruits
<div class="dropdown-menu" style="">
<div class="dropdown_mobile">
<div class="dropdown-inner"> <ul class="list-unstyled">
<li>Apple</li>
<li>Banana</li>
</ul>
</div>
</div>
</div>
</li>
BOTTOM DROPDOWN MENU WORKS ON GOOGLE CHROME
BOTTOM DROPDOWN MENU DOESN'T WORK ON SAFARI (iPHONES)
It seems Safari doesn't support well when transition-property is all.
Also, -webkit-transition should be added for better Safari support.
Try to change this:
.nav>li {
transition: all 0.6s ease;
}
.dropdown_mobile {
transition: all 0.6s ease;
}
To this:
.nav>li {
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
.dropdown_mobile {
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
This is due to the size of the drop-down menu. This problem can be solved by adding a height or margin-bottom. I changed my css files below and it works fine now. If the size of the top menu is 70px, for example, the pop-up menu is 120px when opened. However, since the size of the menu is 70px, the drop-down menu does not appear in the safari. I solved this by adding margin-bottom: 70px and pinned a *top to the drop-down menu.
CSS;
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: #FFF;
border: none;
overflow-y: auto;
border-radius: 0px;
width: 100%;
top: 80px;
margin: 0;
padding: 5px;
}
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 70px;
margin-top: 0;
background-image: linear-gradient(to right, rgb(254, 202, 56) 0%, rgb(245, 130, 32) 51%, rgb(250, 69, 3) 100%);
}
Related
I have this navbar with flexbox. I use justify-content: space-between but it seems the items are not evenly distribute as the center item is a bit on the left side. Is there something i am missing? Sorry for the basic question.
How it currently looks like and how it should look like
Codepen: https://codepen.io/joxs546/pen/qBRYZLa
* {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo {
height: 85px;
width: 85px;
display: inline-block;
cursor: pointer;
background: url('https://dummyimage.com/400x400/000/fff') no-repeat;
background-size: contain;
}
.logo:hover {
background: url('https://dummyimage.com/400x400/000/ffff') no-repeat;
background-size: contain;
}
li,
a,
button {
font-family: PT Sans, sans-serif;
font-weight: bold;
font-size: 18px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.nav-ul {
list-style: none;
}
.nav-ul li {
padding: 0px 40px;
display: inline-block;
}
.nav-ul li a {
transition: all 0.3s ease 0s;
}
.nav-ul li a:hover {
color: cornflowerblue;
}
button {
padding: 9px 25px;
background-color: cornflowerblue;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
color: white;
}
<header>
<div class="logo">
</div>
<nav class="nav">
<ul class="nav-ul">
<li> Services</li>
<li> Project</li>
<li> About</li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Contact</button>
</header>
Use <button>Contact</button> inside of <a> tag.
Also you can use justify-content: space-evenly; in case you want to fill the space evenly.
There is an empty a tag that is taking some space. Either it should be removed from the HTML or it should wrap the button. Everything else is perfect.
<a class="nav-button" href="#">
<button>Contact</button>
</a>
Click the flower to open menu. Then i have created the motion i want with "prosess" fading in after the menu opens up. But i want to reverse the motion when collapsing. So that "prosess" fades out before the meny toggles back. Anyone that can help me out with this?
function classOpen() {
var spinn = document.getElementById("nav");
spinn.classList.toggle('in');
spinn.classList.toggle('out');
}
const delay = ms => new Promise(res => setTimeout(res, ms));
const classFadeIn = async () => {
var element1 = document.getElementById("text1");
var element2 = document.getElementById("text2");
var element3 = document.getElementById("text3");
await delay(300);
element1.classList.toggle("show");
element2.classList.toggle("show");
element3.classList.toggle("show");
}
document.querySelector('#nav').addEventListener('click', classFadeIn);
:root{
--seconds: 5s;
--fast: 2s;
}
nav{
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10px;
padding-top: 20px;
width: 100%;
}
nav img{
width: 50px;
}
/* INN OUT */
#nav{
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
background-color: white;
margin-right: 20px;
/*drop shadow*/
-webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.in {
width: 50px;
}
.out {
width: 400px;
}
.transition{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out
-o-transition:all 0.2s ease-in-out;
transition::all 0.2s ease-in-out;
}
#navtext{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.style{
display: flex;
background-color: white;
justify-content: center;
align-items: center;
padding: 10px 15px 10px 15px;
border-radius: 40px;
color: lightgrey;
transition: 0.1s;
}
#text{
display: none;
}
.noshow{
display: none;
}
.show{
display: flex;
}
.show:hover{
color: black;
background-color: lightgrey
}
<nav>
<div id="nav" class="in transition">
<img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
<div id="navtext">
<a id="text1" class="noshow style">Prosess</a>
<a id="text2" class="noshow style">Prosess</a>
<a id="text3" class="noshow style">Prosess</a>
</div>
</div>
</nav>
I have deleted the part for showing/hiding the items from Javascript and kept in/out toggle.
Then, depending on in/out classes I will show/hide the items by CSS:
.transition.in .noshow{
visibility: hidden;
opacity: 0;
height:0;
}
.transition.out .noshow{
visibility: visible;
opacity: 1;
height:auto;
transition: 0.7s;
}
The reason for not using display: none || flex is to keep the effect of transitoin.
Here is the full code:
function classOpen() {
var spinn = document.getElementById("nav");
spinn.classList.toggle('in');
spinn.classList.toggle('out');
}
document.querySelector('#nav').addEventListener('click', null);
:root{
--seconds: 5s;
--fast: 2s;
}
nav{
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10px;
padding-top: 20px;
width: 100%;
}
nav img{
width: 50px;
}
/* INN OUT */
#nav{
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
background-color: white;
margin-right: 20px;
/*drop shadow*/
-webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.in {
width: 50px;
}
.out {
width: 400px;
}
.transition{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out
-o-transition:all 0.2s ease-in-out;
transition::all 0.2s ease-in-out;
}
#navtext{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.style{
display: flex;
background-color: white;
justify-content: center;
align-items: center;
padding: 10px 15px 10px 15px;
border-radius: 40px;
color: lightgrey;
transition: 0.1s;
}
#text{
display: none;
}
.transition.in .noshow{
visibility: hidden;
opacity: 0;
height:0;
}
.transition.out .noshow{
visibility: visible;
opacity: 1;
height:auto;
transition: 0.7s;
}
.noshow:hover{
color: black;
background-color: lightgrey
}
<nav>
<div id="nav" class="in transition">
<img id="spinn" src="https://i.dlpng.com/static/png/762080_preview_preview.png" class="rotating spinn" onclick="classOpen()">
<div id="navtext">
<a id="text1" class="noshow style">Prosess</a>
<a id="text2" class="noshow style">Prosess</a>
<a id="text3" class="noshow style">Prosess</a>
</div>
</div>
</nav>
Use only one "is-active" class-name on the #nav element, toggle it using JS and target descendants using CSS.
Use transition-delay CSS property to smartly inverse the transition timing login on toggle:
const nav = document.querySelector("#nav");
nav.addEventListener("click", () => nav.classList.toggle("is-active"));
nav {
position: fixed;
top: 10px;
left: 10px;
z-index: 100;
}
#navImg {
width: 50px;
cursor: pointer;
display: inline-block;
transition: transform 0.6s ease-in-out;
}
#nav {
display: flex;
padding: 10px;
border-radius: 50px;
background-color: white;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10);
}
#navText {
display: flex;
flex-flow: row nowrap;
width: 0;
transition: 0.3s ease-in-out 0.3s;
overflow: hidden;
}
#navText a {
display: inline-flex;
align-self: center;
padding: 10px 15px 10px 15px;
margin-left: 10px;
border-radius: 40px;
color: #aaa;
text-decoration: none;
opacity: 0;
transition: opacity 0.3s ease-in-out 0s;
}
/* ACTIVE STATE */
#nav.is-active #navText {
transition-delay: 0s; /* reverse delay timing logic */
width: 270px; /* this could be calculated using JS... this is for demo only */
}
#nav.is-active #navText a {
transition-delay: 0.3s; /* reverse delay timing logic */
opacity: 1;
}
#nav.is-active #navImg {
transform: rotate(1turn);
}
<nav>
<div id="nav">
<img id="navImg" src="https://i.dlpng.com/static/png/762080_preview_preview.png">
<div id="navText">
Prosess
Prosess
Prosess
</div>
</div>
</nav>
I've made a navbar which shows up from the right of the screen when the user clicks on the hamburger menu. When I've tested the page I am able to scroll to the hidden navigation bar, whats a way to prevent this ? overflow?
nav {
display:flex;
justify-content: space-around;
align-items: center;
min-height: 2vh;
font-family: var(--ff-primary);
background-color: var(--clr-accent);}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
z-index: 9999;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: var(--clr-dark);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 16px;
}
.logo{
color: var(--clr-dark);
letter-spacing: 2px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 30px;
height: 3px;
background-color: var(--clr-dark);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px){
.nav-links{
width: 55%;
}
}
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: 0px;
height: 100%;
top: 5vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.3s ease-in;
}
.nav-links a{
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
this is my css code for the navbar, it is a hamburger on mobile and on regular screen size its just a navigation bar
Your menu is "hidden" unsuccessfully by positioning it 0px from the right:
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: 0px;
}
}
Try using negatives for your positioning, it positions elements outside of the view which prevents the ability to scroll them into view:
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: -100%;
}
}
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>
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.