Responsive menu viewport height - javascript

I added a menu to my responsive website that pops up as soon as the viewport is 714px width or less.
When you click the button a menu slides out from the side across the page. The issue that I can't seem to solve is that I want the menu to be the height of the current viewport without allowing people to scroll down.
Here's a fiddly of what the menu looks like right now:
https://jsfiddle.net/baqcfjt1/1/
<div class="site-container-menu">
<div class="site-pusher">
<header class="header">
MENU
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
</header>
<div class="site-content">
<div class="container-menu">
<section id="header">
<div class="headerlogo"><img src="image" /></div>
<div class="headerlogosmall"><img src="image" /></div>
</section>
<section class="main">
-content-
</section>
</div>
</div>
<div class="site-cache" id="site-cache"></div>
</div>
</div>
CSS
.header {
z-index: -10;
position: absolute;
}
/* RESPONSIVE */
#media only screen and (max-width: 714px) {
.container-menu {
overflow: hidden;
*zoom: 1;
}
/* HEADER */
.header__logo {
font: inherit;
font-weight: 700;
padding: 0 25px;
float: left;
}
/* MENU */
.site-pusher,
.site-container-menu {
height: 100%;
}
.site-container-menu {
overflow: hidden;
}
.site-pusher {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.site-content {}
.header {
position: static;
height: 66px;
line-height: 62px;
color: rgba(228, 91, 65, 1.00);
background-color: #fff;
}
.header__icon {
position: relative;
display: block;
float: left;
padding-left: 3em;
font: inherit;
font-weight: 400;
font-size: 20px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 16px;
left: 15px;
box-shadow: 0 10px 0 1px rgba(228, 91, 65, 1.00), 0 16px 0 1px rgba(228, 91, 65, 1.00), 0 22px 0 1px rgba(228, 91, 65, 1.00);
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
/* overflow-y: scroll;
-webkit-overflow-scrolling: touch;*/
width: 250px;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
overflow: hidden;
}
.menu a {
display: block;
padding-top: 2em;
padding-bottom: 2em;
color: #666666;
height: 25%;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.menu a:hover {
color: #e45b41;
}
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
}
$(document).ready(function() {
(function($) {
$('#header__icon').click(function(e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function(e) {
$('body').removeClass('with--sidebar');
});
})(jQuery);
});


This can be achieved using viewport-percentage length units: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
One option would be to use the vh css unit and specify that the body has height:100vh
https://jsfiddle.net/r61n4y0v/
I added:
body{
height:100vh;
}
to the CSS file.
You should also check the vh unit's browser compatibility, before using it. You can check here:
http://caniuse.com/#feat=viewport-units
If you'd like to be more specific with the height:100vh; rule, you can remove the overflow:hidden from .site-container-menu and add height:100vh to .menu directly:
https://jsfiddle.net/6won6stx/
Your menu links have both a height defined height:25% and padding...this is not advised as it can lead to unexpected behaviour. It would be better to replace:
<nav class="menu">
Link 1
<strong>Link 2</strong>
Link 3
Link 4
</nav>
With:
<nav class="menu">
<ul>
<li>Link 1</li>
<li><strong>Link 2</strong></li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
and remove the height:25% from the a element and add height:25vh to the li elements.
https://jsfiddle.net/s5gbk7y1/
I've also made a few other changes such as changing the line-height property on the menu links to 25vh.
Take a look at the latest fiddle and let me know if it helps!

Related

JavaScript Responsive Menu

I have this navigation menu as in the image here.
Below is my JS that I currently have to make it responsive so that it opens up on clicking it but it is not working:
function showMenu(event) {
event.preventDefault();
let element = document.getElementById('header');
if (element.classList.contains('active')) {
element.className = "";
} else {
element.className = "active";
}
}
header {
padding: 0 !important;
background: #fff;
}
header.active {
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
}
header.fixed {
padding: 0 0;
}
header button {
position: absolute;
top: 12px;
right: 25px;
display: block;
width: 30px;
height: 40px;
padding-top: 6px;
border: none;
background: #fff;
}
header button span {
position: relative;
top: 0;
display: block;
width: 100%;
height: 2.5px;
margin-bottom: 5px;
transition: all .2s ease;
border-radius: 15px;
background: #0d2366;
}
header button span:nth-child(2) {
right: 0;
width: 80%;
opacity: 1;
}
header button span:nth-child(3) {
width: 60%;
}
header.active button span:nth-child(1) {
top: 8px;
left: -4px;
-ms-transform: rotate(38deg);
transform: rotateZ(38deg);
}
header.active button span:nth-child(2) {
right: -100%;
opacity: 0;
}
header.active button span:nth-child(3) {
top: -6px;
left: -4px;
width: 100px;
-ms-transform: rotate(-38deg);
transform: rotateZ(-38deg);
}
header ul.menu-left {
display: none;
}
header img {
margin-left: 25px !important;
}
header.active ul.menu-left {
display: block;
float: none;
clear: both;
}
header.active ul.menu-left li {
display: block !important;
padding: 10px 20px;
}
header ul.menu-right {
display: none;
}
<!--Header-->
<header id="header">
<div class="wrapper">
<a href="/">
<img src="images/pulse.png" alt="logo">
</a>
<button id="submenu">
<span></span>
<span></span>
<span></span>
</button>
<!--Menu Links-->
<ul class="menu-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<ul class="menu-right">
<li class="menu-cta">Get Started</li>
</ul>
</div>
</header>
The active class here represents the responsive menu icon.
Any help is highly appreciated.
Thanks!

By using the addEventListener you can watch the click event. After clicking the button, the third line below will toggle between adding and removing the class 'active' on the id="header"
document.getElementById("submenu").addEventListener("click", function(event) {
event.preventDefault();
document.getElementById("header").classList.toggle("active");
});

How to close the open section of accordion menu?

I'm trying to create an accordion, but I don't know how to close the open one. As you can see, the accordion works fine until you try to close the current view.
How can I do that?
Note: The accordion can only be seen on mobile breakpoint.
$(function() {
$('.footer-links-holder').click(function() {
if ($('.footer-links-holder').hasClass('active')) {
$('.footer-links-holder').removeClass('active')
}
$(this).toggleClass('active')
});
});
/* HTML Set up */
footer {
background: #191919;
color: #fff;
margin: 0;
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
font-family: "Open Sans", sans-serif;
padding-top: 20px;
}
footer .centered {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
footer .centered .footer-contact {
width: 20%;
}
footer .centered .footer-navigation {
width: 60%;
}
footer .centered .footer-navigation .footer-links-holder {
border-left: 1px solid rgba(255, 255, 255, 0.5);
width: 33.33333%;
position: relative;
float: left;
margin: 0;
padding-left: 10px;
}
footer .centered .footer-navigation .footer-links-holder>div {
position: relative;
top: -20px;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
margin: 0;
padding: 0;
list-style: none;
/*-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;*/
}
footer .img-bar {
position: relative;
text-align: center;
margin: 20px 0;
}
footer .img-bar div {
display: inline-block;
}
footer .img-bar div img {
height: 40px;
padding: 10px;
margin: 0 10px;
}
footer .bottom-bar {
position: relative;
text-align: center;
font-size: 10px;
background: #000;
padding: 15px 0;
}
/* Responsive Tablet Sizes */
#media only screen and (max-width: 749px) {
footer .centered {
flex-wrap: wrap;
}
footer .centered .footer-logo {
max-width: 250px;
width: 50%;
}
footer .centered .footer-contact {
width: 50%;
padding: 0 20px;
}
footer .centered .footer-navigation {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
padding: 0 20px;
}
}
/* Responsive Mobile Sizes */
#media only screen and (max-width: 500px) {
footer .centered .footer-logo {
width: 100%;
margin: 0 auto;
}
footer .centered .footer-contact {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
width: 100%;
padding: 0;
}
footer .centered .footer-navigation .footer-links-holder h3 {
margin: 0;
padding: 10px 20px;
border-top: #000 1px solid;
cursor: pointer;
/* Down Arrows */
}
footer .centered .footer-navigation .footer-links-holder h3::after {
float: right;
margin-right: 10px;
content: "";
display: inline-block;
vertical-align: middle;
margin-top: 7px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: transform 0.5s;
transition: transform 0.5s;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
max-height: 0;
overflow: hidden;
padding: 0 20px;
}
footer .centered .footer-navigation .footer-links-holder.active h3::after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
footer .centered .footer-navigation .footer-links-holder.active .footer-links {
max-height: 10000px;
}
}
/* Social Icons */
.social h3 {
padding-bottom: 10px;
}
.social a {
display: inline-block;
padding: 7px;
width: 35px;
height: 35px;
margin: 0 2px;
background: #fff;
border-radius: 50%;
vertical-align: middle;
}
.social a:hover {
background: #65c2ed;
}
.social a.linkedin {
padding: 4px;
}
.social a svg .face,
.social a svg .twit,
.social a svg .link {
fill: #000;
}
/* Typography */
footer h3 {
font-weight: lighter;
margin-bottom: 0;
}
footer p,
footer li {
font-weight: 400;
letter-spacing: 0.05em;
margin: 10px 0;
}
footer a {
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
text-decoration: none;
-webkit-transition: color 0.5s, background 0.5s;
transition: color 0.5s, background 0.5s;
}
footer a:hover {
color: #65c2ed;
}
/* Misc CSS */
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
clear: both;
}
body {
margin: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*# sourceMappingURL=styles.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="centered clearfix">
<div class="footer-navigation">
<div class="footer-links-holder">
<div>
<h3>Section 1</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 2</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 3</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
</div>
<div class="footer-contact">
<div class="social">
<h3>Contact</h3>
<a href="https://www.facebook.com/" class="facebook">
<svg viewBox="0 0 33 33"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg>
</a>
<a href="https://twitter.com/" class="twitter">
<svg viewBox="0 0 33 33"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg>
</a>
<a href="https://www.linkedin.com/" class="linkedin">
<svg viewBox="0 0 512 512"><g><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></g></svg>
</a>
</div>
</div>
</div>
<div class="bottom-bar">
All Rights Reserved © 2016 | Privacy Policy | Terms of Service
</div>
</footer>

Try to store the current active state of the clicked element before removing all active classes.
For example:
$(function() {
$('.footer-links-holder').click(function() {
const thisIsActive = $(this).hasClass('active');
$('.footer-links-holder.active').removeClass('active');
if (!thisIsActive) {
$(this).toggleClass('active');
}
});
});

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

What is a clean way to toggle a slide in menu?

Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?

Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}

Center expanding text on a hover

I have got a hover working with some text and overlay, but I want the text to be centered in the middle. The heading might change so it needs to be center no matter the number of words (I know there is a limit to the container).
I know this is possible to using jquery but I just wanted to see if there was a CSS way of doing it.
li {
position: relative;
display: inline-block;
margin: 0 -4px -4px 0;
}
li img {
display: block;
}
li .over {
position: absolute;
display: none;
background: rgba(0, 0, 0, 0.6);
top: 0;
bottom: 0;
right: 0;
left: 0;
color: white;
}
li:hover .over {
display: block;
}
<div class="wapper">
<ul>
<li>
<img src="http://placehold.it/200x200">
<div class="over">
<h1>Hello</h1>
</div>
</li>
</ul>
</div>

You can set line-height to the height of the container, or you can use the transform trick to vertically center your <h1>:
li .over h1 {
position: absolute;
left: 0;
top: 50%; // 50% of the parent
width: 100%;
transform: translateY(-50%); // -50% of the child
}
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Here is another way of doing it what I fell upon when I was messing around.
li {
position: relative;
display: inline-block;
margin: 0 -4px -4px 0;
}
li img {
display: block;
}
li .over {
position: absolute;
display: none;
background: rgba(0, 0, 0, 0.6);
top: 0;
height: 100%;
width: 100%;
}
li .over p {
display: table-cell;
height: 200px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
li:hover .over {
display: block;
}
<div class="wapper">
<ul>
<li>
<img src="http://placehold.it/200x200">
<div class="over">
<p>Hello by name is stephen motteshead</p>
</div>
</li>
</ul>
</div>

Categories

Resources