I've included a snippet of the jquery/html/css for the hamburger. the jquery is what I would like to use to make the mobile menu close upon clicking its links. Currently you must click the X again (css-transformed spans) to do so which is annoying and not nice at all. I've tried ids and classes in all the different html tags and nothing seems to work. Any ideas/tips in the right direction?
$(document).ready(function() {
//took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working...
$('.menu').on('click', function() {
$('.menu').addClass('open');
});
$('.menu a').on("click", function() {
$('.menu').removeClass('open');
});
});
.sticky-navMobile {
margin: 0;
width: max-content;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#menuToggle {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: plum;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
position: relative;
background: #722f58;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
color: #232323;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
color: #232323;
}
/** Transform all the slices of hamburger into an X. */
#menuToggle input:checked~span {
background: rgb(146, 102, 146);
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
background: rgb(146, 102, 146);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
background: rgb(146, 102, 146);
}
#menu {
position: absolute;
width: 150px;
margin: -37px 0 0 -10px;
border-bottom-right-radius: 45px;
padding-top: 40px;
background: #722f58;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="sticky-navMobile">
<nav>
<div id="menuToggle">
<!-- A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
<input type="checkbox" />
<!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. -->
<span></span>
<span></span>
<span></span>
<!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
<ul id="menu">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#bio">
<li>Personal Info</li>
</a>
<a href="#footer">
<li>Contact</li>
</a>
</ul>
</div>
</nav>
</nav>
Part of the problem, is that open and close don't mean anything in this context, since it's a checkbox that's causing the menu to open and close.
What you need to do, is traverse up the DOM when you click on the menu or the anchor within the menu, and get the checked state of the checkbox. If it's true (which it will be because the menu is open), you set the checked state to false and that will trigger the CSS for the menu.
$(document).ready(function() {
//took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working...
$('#menu').on('click', function() {
if ($(this).siblings('input').prop('checked')) {
$(this).siblings('input').prop('checked', false);
}
});
$('#menu a').on("click", function() {
if ($(this).parent('ul').siblings('input').prop('checked')) {
$(this).siblings('input').prop('checked', false);
}
});
});
.sticky-navMobile {
margin: 0;
width: max-content;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#menuToggle {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: plum;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
position: relative;
background: #722f58;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
color: #232323;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
color: #232323;
}
/** Transform all the slices of hamburger into an X. */
#menuToggle input:checked~span {
background: rgb(146, 102, 146);
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
background: rgb(146, 102, 146);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
background: rgb(146, 102, 146);
}
#menu {
position: absolute;
width: 150px;
margin: -37px 0 0 -10px;
border-bottom-right-radius: 45px;
padding-top: 40px;
background: #722f58;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="sticky-navMobile">
<nav>
<div id="menuToggle">
<!-- A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
<input type="checkbox" />
<!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. -->
<span></span>
<span></span>
<span></span>
<!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
<ul id="menu">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#bio">
<li>Personal Info</li>
</a>
<a href="#footer">
<li>Contact</li>
</a>
</ul>
</div>
</nav>
</nav>
Related
So I decided to animate my hamburger menu, which was previously unanimated, so this problem was irrelevant to begin with.
The animation starts as a standard hamburger style menu which has several links to different areas of the homepage. When clicked, I animated the menu to turn from a hamburger to an x, indicating to visitors that they can close the menu by clicking on the x. I ran into a problem though, after clicking on a link within the hamburger menu, the icon does not reset from an x back to the hamburger, and that messes up how the menu is opened on the second time. If a visitor were to open it again, the x would turn into the hamburger when the x is clicked on, and it wouldn't make any sense.
Anyways, I'm just wondering if there's a way I could make it so that when a link in the menu gets clicked on, the x returns to its unopened hamburger form. Here's my code:
var links = document.querySelectorAll('.menu a');
var linksLength = links.length
for(var i = 0; i < linksLength; i++) {
links[i].addEventListener('click', function() {
document.getElementById('toggle').checked = false;
});
}
$(document).ready(function(){
$('.icon').click(function(){
$(this).toggleClass('open');
});
});
.header {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 70px;
line-height: 70px;
padding-left: 15px;
font-family: 'Burbank', 'Alegreya Sans SC', 'Alegreya Sans SC Black', sans-serif;
font-size: 40px;
color: #ffffff;
z-index: 2;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.heading {
position: absolute;
top: 0px;
left: 0px;
width: 327px;
height: 67px;
padding-left: 15px;
z-index: 3;
}
.nav {
position: absolute;
top: 0px;
height: 70px;
background-color: #223861;
box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-webkit-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
-moz-box-shadow: 0px 3px 10px 0px rgba(39,38,38,0.6);
text-align: right;
z-index: 1;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.icon {
position: relative;
float: right;
width: 100px;
height: 70px;
padding-left: 13px;
cursor: pointer;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.icon span {
position: absolute;
left: 0;
display: block;
height: 5px;
width: 45px;
margin-left: 75px;
margin-top: 18px;
background: #ffffff;
border-radius: 4px;
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.icon span:nth-child(1) {
top: 0px;
}
.icon span:nth-child(2) {
top: 12px;
}
.icon span:nth-child(3) {
top: 24px;
}
.icon.open span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.icon.open span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.header {
width: 90%;
}
.icon {
display: block;
padding-right: 22px;
cursor: pointer;
}
.menu {
max-height: 0px;
transition: max-height .5s ease-in-out;
opacity: 0;
overflow: hidden;
}
.menu a {
display: block;
height: 8vh;
line-height: 8vh;
margin: 0px;
padding: 0px 0px;
border-bottom: 1px solid #eaeaeb;
}
#toggle {
display: none;
}
#toggle:checked + .menu {
max-height: 800px;
opacity: 1;
}
#toggle:not(checked) + .menu {
max-height: 0px;
opacity: 1;
}
<label class="nav" for="toggle" style="z-index:999;">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
<input type="checkbox" id="toggle"/>
<div class="menu">
Assault Rifles
Submachine Guns
Shotguns
Sniper Rifles
Pistols
Explosives
Other
Vaulted
</div>
</label>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
Simply add this click handler inside of the $(document).ready() function to remove the open CSS class from the hamburger icon when one of the menu links is clicked:
$('.menu a').click(function() {
$('.icon').removeClass('open');
});
You can do this by PURE CSS also
.navigation__checkbox {
display: none
}
.navigation__button {
height: 7rem;
width: 7rem;
position: fixed;
top: 1rem;
left: 1rem;
border-radius: 50%;
z-index: 2000;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer
}
.navigation__icon {
position: relative;
margin-top: 3.5rem;
user-select: none;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
width: 3rem;
height: 2px;
background-color: #333;
display: inline-block
}
.navigation__icon::before,
.navigation__icon::after {
content: "";
position: absolute;
left: 0;
transition: all .2s
}
.navigation__icon::before {
top: -.8rem
}
.navigation__icon::after {
top: .8rem
}
.navigation__button:hover .navigation__icon::before {
top: -1rem
}
.navigation__button:hover .navigation__icon::after {
top: 1rem
}
.navigation__checkbox:checked+.navigation__button .navigation__icon {
background-color: transparent
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::before {
top: 0;
transform: rotate(135deg)
}
.navigation__checkbox:checked+.navigation__button .navigation__icon::after {
top: 0;
transform: rotate(-135deg)
}
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>
I have to add a hamburger for mobile view of my website coding.
I tried with the help of w3 school but it's not working fine.
I will share my html and css code. I have added a hamburger icon just have to make it active.
Should I write code in separate JavaScript file or add any code here in my HTML?
I have tried adding hamburger from HTML CSS properties
HTML and CSS for the mobile view header:
.mobheader {
width: 80%;
height: auto;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger {
font-size: 33px;
color: white;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="mobheader">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h1>
<img src="img/logomob.png" alt="logo">
</h1>
</div>
<div class="dots">
<i class="fas fa-search"></i>
</div>
</div>
I want this hamburger to work in such a way it shows 3 menus on click
I can't comment, I'm not understanding what's your problem because the code you already posted works, I just changed the color and the size in the code snippet. See and if your problem is other's just clarify what's your current problem.
EDIT
I find a codepen and added to the snippet to show you what you wanted.
Source: https://codepen.io/mranenko/pen/wevamj
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function(e) {
hamburger.doToggle(e);
});
}());
/* imports */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/* colors */
/* variables */
/* mixins */
/* resets and base styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
background: white;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Assuming the hamburger is an image:
<img src="img/hamburger.png" alt="hamburger"/>
You don't need the h1 tags for images, those are for headings (i.e text)
Also remember the "/" to close your img tags; your logo doesn't have one.
how can I close my hamburger menu when clicking on link, I need it for one page navigation. Menu works fine but just need a way to close it.
I have very little knowledge about JS.
I have this in HTML and CSS, don't have any JS:
HTML in index.html file
<nav>
<div id="menuToggle">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
</nav>
CSS in style.css file
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2){
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li{
padding: 10px 0;
font-size: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
Thank you very much for any help you can provide!
Use trigger .
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #000000;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2){
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #000000;
}
#menuToggle input:checked ~ span:nth-last-child(3){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2){
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu{
background-size:cover;
background-repeat:no-repeat;
position: absolute;
width: 100vw;
height:100vh;
margin: -77px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background-color: rgba(255,255,255,1);
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li{
padding: 10px 0;
font-size: 60px;
text-align: center;
}
#menuToggle input:checked ~ ul{
transform: scale(1.0, 1.0);
opacity: 1;
}
#media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li>idi na 1</li>
<li>idi na 2</li>
<li>idi na 3</li>
</ul>
</div>
Note: Don't forget to put your js code inside document.ready.
$(function() {
$('#menu > li > a').on('click', function() {
$("#menuToggle").find('input').trigger("click");
});
});
Essentially, I'm trying to combine two online tutorials:
1st is from the good folks here http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ which gives me a button that creates a drop down menu that displays hides with css display attribute, which I have working:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
I have this working, hiding and showing my
<ul id="menu">
but I want the below menu button to do the same job. The second is from a great tut for a menu icon that changes to a cross and back again with css and javascript:
http://callmenick.com/post/animating-css-only-hamburger-menu-icons
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
I tried putting on inside the other, but it seemed to lose the functionality… Any help much appreciated.
– – -
OK the full markup is:
<!-- Load Drop down menu #maxwidth 760px -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<!-- END Drop down menu -->
<!-- START Hamburger Icon -->
<div class="o-grid__item">
<button class="c-hamburger c-hamburger--htx" >
<span>Toggle</span>
</button>
</div>
<!-- END Hamburger Icon -->
<!-- END Button for menu below when below CSS Mediaquery -->
<ul id="menu">
<li><a class="item1" href="/item1.html">item1</a></li>
<li><a class="item2" href="/item2.html">item2</a></li>
<li><a class="item3" href="/item3.html">item3</a></li>
</ul>
The second part also has the following Javascript:
<script>
(function() {
"use strict";
var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) {
var toggle = toggles[i];
toggleHandler(toggle);
};
function toggleHandler(toggle) {
toggle.addEventListener( "click", function(e) {
e.preventDefault();
(this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
});
}
})();
</script>
and the following is the css used for the css checkbox:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: inline-block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
right: 0px;
line-height: 1.2em;
padding-right: 20px
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
text-align: right;
line-height: normal;
background-color: rgba(0, 0, 0, 0.0);
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
padding-right: 0px;
position: absolute;
display: block;
right: 0px;
top: 10px;
}
}
and the following is the css used for the css/javascript button animation:
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 96px;
height: 96px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.c-hamburger:focus {
outline: none;
}
.c-hamburger span {
display: block;
position: absolute;
top: 32px;
left: 30px;
right: 30px;
height: 4px;
background: white;
border-radius: 1px;
}
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: "";
border-radius: 1px;
}
.c-hamburger span::before {
top: -10px;
}
.c-hamburger span::after {
bottom: -10px;
}
.c-hamburger--htx {
background-color: transparent;
}
.c-hamburger--htx span {
-webkit-transition: background 0s 0.3s;
transition: background 0s 0.3s;
}
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0s;
transition-delay: 0.3s, 0s;
}
.c-hamburger--htx span::before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.c-hamburger--htx span::after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
background-color:;
}
.c-hamburger--htx.is-active span {
background: none;
}
.c-hamburger--htx.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-hamburger--htx.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
-webkit-transition-delay: 0s, 0.3s;
transition-delay: 0s, 0.3s;
}
Can anyone please help me to make my Polygon navigation more accurate on different browsers because it works on Chrome but looks ugly on Firefox no support for IE also. Can anyone please help me add some jQuery / css3 code to make it work in at least Chrome & Firefox. suggest some code to make it better .. Thank You !
HTML Markup :
<div id="left_rot"></div>
<div id="str"></div>
<div id="right_rot"></div>
<div id="nav">
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span>
<span class="close">Close</span> Menu</label>
<span class="link1">Link1</span>
<span class="link2">Link2</span>
<span class="link3">link3</span>
<span class="link4">link4</span>
<span class="link5">link5</span>
<span class="link6">link6</span>
</div>
fiddle link for css : http://jsfiddle.net/thekiddev/d8MLQ/
I have work on your project, and changed 2 things.
I have changed your HTML, mainly to change the classes link1, link2, and so, to class link and ids link1 link2 link3.. That makes for a more compact code, since I can set shared properties for all the links.
Also, I have changed the way you position your triangles. Instead of setting positions for every one of them with top and left, I position all of them the same way. And then, I rotate them with the rotation center in the lower vertix of the triangle. That makes positioning them much easier.
The modified HTML is
<div id="nav">
<!-- Option for Opening or Closing menu -->
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label>
<!-- Links -->
<span class="link" id="link1">Link1</span>
<span class="link" id="link2">Link2</span>
<span class="link" id="link3">link3</span>
<span class="link" id="link4">link4</span>
<span class="link" id="link5">link5</span>
<span class="link" id="link6">link6</span>
</div>
And the CSS is
* {
margin: 0;
padding: 0;
}
body {
background:#3498DB;
}
#nav {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 350px auto;
position: absolute;
text-align:center;
}
#left_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#right_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top:0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#str {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
text-align: center;
}
span {
z-index:555 !important;
}
span a {
}
span a:hover {
background:rgba(0, 0, 0, .1);
box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
margin-left: -80px;
top:-142px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
text-align:center;
background:transparent;
color:#fff !important;
padding: 0px;
position:absolute;
text-shadow:0 2px 1px rgba(0, 0, 0, .2);
-webkit-transition: all ease 0.50s;
transition: all ease 0.50s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
height: 140px;
width: 162px;
}
#link2 a {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#link3 a {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
#link4 a {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#link5 a {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
#link6 a {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.link a:before {
position: absolute;
content:'';
width:0;
height:0;
top:0;
left:0;
border-style:solid;
border-width: 140px 81px 0px 81px;
border-color:transparent;
border-top-color: #fff;
margin:0px;
z-index:5;
-webkit-transition: all 0.55s linear;
transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
border-top-color: #ECF0F1;
}
.chkbx {
display: none;
margin: 0px auto;
}
.pin {
display: block;
width: 200px;
padding: 10px 25px;
font-family: century gothic;
background:rgba(252, 252, 252, 1);
position: fixed;
top: -300px;
left: 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: #666;
position: relative;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.chkbx:checked ~ .pin {
color: #fff;
background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
border-color: transparent !important;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.close {
display: none;
}
.chkbx:checked ~ .pin span.close {
display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
display: none !important;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
footer h2, p {
font-family: century gothic;
color: #fefefe;
}
footer p a {
text-decoration: none;
font-weight: bold;
color: #1f2f3f;
}
fiddle
I have remover prefixed properties that aren't needed in modern browsers to keep the example short. It works ok in latest Chrom, Firefox and IE.