I'm a little new to javascript and used a small one to get my menu to appear en move the button accordingly but I wanted to implement submenu's. Now when I want the button to move when the submenu is activated(hovered on main li) it won't.
What am I doing wrong?
A little side note, the menu also expands (on hover 2nd li) when it's not activated that's my second question.
http://jsfiddle.net/drjvdyhb/
body {
font: 400 18px'Fjord One', sans-serif;
line-height: 1em;
background-color: #fff;
color: #c0c5ce;
}
header {
position: relative;
background-color: #2c353a;
}
header ul.nav {
overflow: auto;
margin: 0em;
padding: 0em;
}
header ul.nav li {
position: relative;
float: left;
width: 20%;
list-style: none;
}
header ul.nav li a {
display: block;
height: 30px;
opacity: 0;
font: 400 1.15em'Fjord One', serif;
line-height: 30px;
color: #848e92;
text-decoration: none;
text-align: center;
cursor: default;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header ul.nav li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul.nav li:hover ul li a {
color: #848e92;
background-color: #2c353a;
}
header ul.nav li ul li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul li ul {
position: relative;
left: 0px;
padding: 0px 0px 0px;
width: 100%;
height: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
header ul li ul li {
display: block;
color: #fff;
}
header ul.nav li ul li {
width: 50%;
font-size: 14px;
}
header ul.nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
header ul.nav li:hover button.toggle-nav {
top 90px;
}
header ul li ul li a {
font: 400 1em'Fjord One', serif;
color: #848e92;
}
header.active ul.nav li a {
height: 60px;
opacity: 1;
line-height: 60px;
cursor: pointer;
}
header.active ul.nav li ul li a {
Height: 30px;
line-height: 100%;
}
button.toggle-nav {
position: absolute;
top: 30px;
left: calc(50% - 30px);
width: 40px;
height: 35px;
background-color: #38a6a6;
font: 400 1.2em'Allan', serif;
color: #fff;
border: none;
line-height: 30px;
vertical-align: middle;
outline: none;
cursor: pointer;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
button.toggle-nav:hover {
height: 50px;
}
button.toggle-nav span {
display: block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header.active button.toggle-nav {
top: 60px;
background-color: #256f6f;
}
/* My try so far */
header.active ul.nav li.hvr a:hover button.toggle-nav {
top: 90px;
}
header.active button.toggle-nav span {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
#nav-toggle {
cursor: pointer;
padding: 5px 10px 10px 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 20px;
background: white;
position: absolute;
display: block;
content:'';
}
#nav-toggle span:before {
top: 10px;
}
#nav-toggle span:after {
bottom: 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
Set position: relative for button.toggle-nav and remove top: 30px;,
Have a look at this JSFiddle
try this css code
#nav-toggle {
z-index: 10000000;
position: fixed;
cursor: pointer;
padding: 5px 10px 10px 10px;
top: 0px;
}
Related
I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
I am building a website and ran across this issue.
I have a basic navbar which when viewed on mobile appears like a hamburger menu. The menu works fine. I have used pure HTML-CSS code for making this navbar. The issue is that the navbar is not closing when I click any link on the menu to navigate to a different section of the page.
HTML:
<header class="navbar-fixed-top">
<div class="container">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>HOME</li>
<li>MINT</li>
<li>COMMUNITY</li>
<li>PROJECTS</li>
<li>FAQ</li>
</ul>
</div>
</nav>
</div>
</header>
CSS
header {
text-align: right;
-webkit-transition: all .5s;
transition: all .5s;
height: 65px;}
nav {
padding: 8px;
}
nav ul {
margin-bottom: 0;
float:right;
-webkit-transition: all .5s;
transition: all .5s;
}
nav ul li {
display: inline-block;
float: left;
}
nav li {
display: inline-block;
margin: 0.75em;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: rgb(255, 255, 255);
text-transform: uppercase;
text-decoration: none;
font-size: 1.2em;
align-content: space-between;
font-weight: 600;
}
#media screen and (max-width: 864px) {
.logo {
padding:0;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgb(0, 0, 0);
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: left;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: rgb(255, 255, 255);
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn li {
background: #000;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked + .nav-btn i:nth-child(4) {
opacity: 0;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
.bg-nav {
background: #000;
}
.bg-nav ul {
padding: 10px;
}
`
Sorry for the long codes
Since I am a beginner with near to no experience in JS I would like to know if there is any solution for this.
Is there any solution in CSS for this or do we need to use JS.
Any help would be appreciated
I don't think you can do it with CSS only as it would require child -> parent relation.
If you are ok to use JS you can just set "false" to the #nav checkbox
const onLinkClick = () => {
document.querySelector("#nav").checked = false; // Once link is clicked -> make #nav checkbox false thus close the menu
};
document
.querySelectorAll(".nav-wrapper a") // Grab all links
.forEach((element) => element.addEventListener("click", onLinkClick)); // Listen for click on them
I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>
I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>
Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>
Ok, never done anything like this in JS and CSS here but I am trying to achieve this effect with some buttons in a circular expanding div, and a static "x" button in far left that rotates. https://dribbble.com/shots/3445331-Expanding-Button
For whatever reason I can't get the transition to happen with an increasing delay on each li. What I do is add a "pill" class to both the ul containing the lis (to make them display:none to block) and then to the individual lis.
$('.top-left').hover(function(){
$(this).toggleClass("pill");
$('.top-left ul').toggleClass("pill");
$('.top-left img').toggleClass("pill");
$('.top-left ul li').each(function(i, elem) {
$(elem).delay(i * 800).toggleClass("pill");
});
});
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
margin-left: 0;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 205ms;
}
.top-left img.pill {
display: block;
margin-left: 15px;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
transform: scale(0.01,0.01) rotate(-30deg) translate(43px, 0px);
}
.top-left ul li.pill:hover {
color: #fff;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333;
}
.top-left.pill {
width: 207px;
}
.top-left ul.pill {
display: block;
}
.top-left ul li.pill {
float: left;
transform: scale(1,1) rotate(0deg) translate(43px, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-left">
<img src="http://placehold.it/100x100" alt="">
<ul>
<li value='1'><i class="icon-twitter-sign"></i></li>
<li value='2'><i class="icon-twitter-sign"></i></li>
<li value='3'><i class="icon-instagram"></i></li>
</ul>
</div>
The lis show up and in the right place, but no animation occurs, at least that is visible. What is wrong here?
You just need to add class 'pill' to .top-left :
$('.top-left').hover(function () {
$(this).toggleClass("pill");
}
And then you can use this animation with different animation delay for all lis.
#keyframes myAnim {
0% {transform: rotate(90deg) scale(0);}
100% {transform: rotate(0deg) scale(1);}
}
.top-left.pill ul li:first-child {
animation: myAnim .25s;
}
.top-left.pill ul li:nth-child(2) {
animation: myAnim .25s .8s;
}
.top-left.pill ul li:last-child {
animation: myAnim .25s 1.6s;
}
And the rest of the css:
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
/* padding-top: 10px;
padding-bottom: 10px; */
margin-left: 0px;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
/* What transition ? */
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left.pill img {
display: block;
margin-left: 15px;
transform: rotate(90deg);
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
}
.top-left.pill li:hover {
color: white;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333333;
}
.top-left.pill {
width: 207px;
}
.top-left.pill ul {
display: block;
}
90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.
The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile:
$(function() {
$('.navigation .nav-toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
$(function() {
$('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {
$('.navigation ul li').removeClass('active');
$(this).addClass('active');
});
});
$(function() {
$('.navigation ul li.home a').addClass('active');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
align-items: center;
background: url("../images/bg.png") no-repeat;
background-size: cover;
}
html {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.navigation {
width: 100%;
}
.navigation ul {
overflow: hidden;
color: white;
padding: 0;
text-align: right;
margin: 0;
margin-right: 15px;
}
.navigation ul li {
padding: 17px 12px;
display: inline-block;
}
.navigation ul li a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
.navigation ul li a:hover {
color: #00D5C2;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 115%;
display: block;
}
.side-nav {
position: fixed;
width: 220px;
height: 150vh;
background-color: #2D2D2D;
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.side-nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.side-nav ul li {
border-bottom: 1px solid gray;
border-width: 100%;
margin: 5px;
}
.outerwrapper {
height: 100vh;
display: block;
overflow-x: hidden;
position: relative;
}
.wrapper {
height: 100vh;
display: block;
transform: translateX(-100);
transition: transform 0.6s ease;
min-height: 100%;
position: relative;
}
.wrapper.open {
transform: translateX(220px);
background-color: rgba(84, 84, 84, 0.6);
}
.side-nav ul li a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
}
.side-nav ul li a:hover {
color: white;
text-decoration: none;
}
.side-nav.open {
transform: translateX(0);
}
.navigation .nav-toggle {
display: none;
float: left;
padding: 20px 30px 20px 30px;
cursor: pointer;
}
.footer {
margin-top: -5em;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(237, 237, 237, 0.2);
position: relative;
height: 70px;
z-index: -1;
}
.footerinfo {
margin-top: 20px;
}
.footerinfo p {
vertical-align: middle;
padding: 25px;
color: white;
text-align: center;
;
}
.navigation ul li a.active {
color: #00F0DB;
}
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 0 auto;
}
.footerlogo img {
margin-bottom: -65px;
margin-left: auto;
margin-right: auto;
}
.about-btn {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
font-size: 135%;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
width: auto;
display: block;
}
.about-btn a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
color: #3A9DA4;
border-radius: 9px;
padding: 10px 20px;
border: solid #3A9DA4 3px;
text-decoration: none;
font-size: 20px;
transition: all 0, 4s;
}
.about-btn li {
list-style-type: none;
margin: auto;
align-items: center;
width: 50%;
text-align: center;
}
.about-btn a:hover {
border-color: white;
color: white;
text-decoration: none;
font-size: 20px;
transition: scale(1, 1)
}
#media screen and (max-width: 700px) {
.navigation ul li {
display: none;
}
.navigation .nav-toggle {
display: inline;
}
.about-btn a {
font-size: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerwrapper">
<div class="wrapper">
<div class="side-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div class="navigation">
<ul>
<li class="nav-toggle">☰</li>
<li class="home">Home</li>
<li class="repo">Repo</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" alt="Squallz Logo">
</div>
<div class="about-btn">
<li>About Me</li>
</div>
</div>
<div class="footer">
<div class="footerinfo">
<p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>
</div>
</div>
</div>
Try adding this in your css and view again in your mobileL
.outerwrapper {
height: 100%!important;
}
You need to set the css of the footer class to:
z-index: 999 !important;
position: fixed !important;
bottom:0 !important;
background-color: rgba(237, 237, 237, 0.2);