I just used this menu in order to learn and created 3 files on the local →
index.html
style.css
script.js
But the click doesn’t work01.zip (3.2 KB)
what is my mistake?
Hi,
Your script in your zip seems to be blank? It should contain the script from the codepen.
e.g.This
/* Resources:
Mathematical - Responsive type: https://codepen.io/jxnblk/pen/nwHdD
Codrops - Slide and push menu:
https://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
*/
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
window.classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
})( window );
var nav = document.getElementById( 'nav' ),
showMenu = document.getElementById( 'showMenu' ),
body = document.body;
showMenu.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'pushRight' );
classie.toggle( nav, 'open' );
};
Also you haven’t linked to the script properly anyway and you reference it like this (not using a link tag):
<script src="script.js"></script>
</body>
</html>
As shown above the script needs to go before the closing body tag otherwise it will run before the page has loaded and the element won’t be accessible yet.
2 Likes
Ahh! This could be the reason. Actually, in my local version, my script.js is not empty, but I am loading them in head section that’s why it is not working. Thanks!
1 Like
I was trying to learn form this menu, but later I decided that I should just use the jQuery. so I decided to use some fraction, but convert the Javascript part into the jQuery.
here are the chages that i did→
Changed this portion →
<nav id="nav">
<h3 class="caps">X<br><span>Alpha. 01. Beta.</span></h3>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<small>lorem ipsum sub line one</small>
</nav>
to this →
<nav class="side-menu">
<h3 class="caps">X<br><span>Alpha. 01. Beta.</span></h3>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<small>lorem ipsum sub line one</small>
</nav>
that means add a class side-menu
In the CSS part changed this →
nav a:hover {
background: #3b3b3b;
padding-left: 25px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease;
transition: all .2s ease;
}
nav.open {
left: 0px;
}
body.pushRight {
margin-left: 240px; width: 100%;
}
TO
.side-menu a:hover {
background: #3b3b3b;
padding-left: 25px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease;
transition: all .2s ease;
}
.side-menu.open {
left: 0px;
}
body.pushRight {
margin-left: 240px; width: 100%;
}
NOW COMES THE VANILLA JS TO JQUERY
From
showMenu.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'pushRight' );
classie.toggle( nav, 'open' );
to
$(this).toggleClass('active');
$('body').toggleClass('pushRight');
$('nav.side-menu').toggleClass('open';)
the Problem is actually in this part →
$('nav.side-menu').toggleClass('open';)
The semi colon should be outside the bracket .
.toggleClass('open');
1 Like
sir,
I have one more earnest request can you tell please me why the horizontal sidebar is created when the toggle menu is opened.
we have set a width of 95% on the wrap. Is there a way we can get rid of this.
https://www.screencast.com/t/L6wSoPuHG55
You have a 100% width on the body.pushright and then you have a 240px left margin making it 100% + 240px wide which will require a horizontal scrollbar.
Remove the 100% width and the layout will still stay inside the viewport. However it will not be so smooth because the layout will need to re-organise for the smaller space.
1 Like
Yes, you are right it is not that smooth. We have to add a bit more responsiveness; Early break-points than what they are currently.
Tthe push menu doesn’t have vertical scroll working. I checked if there is any overflow:hidden, but I couldn’t find that as well.
sir,
can you please help me to find the fix. thanks!
Hi,
You need to do this to give the side-menu its own scrollbar.
.side-menu{
overflow:auto;
}
That’s the only way to manage a scroll on that fixed element.
1 Like
Ok sir. Thank you so much. It is now working.
I have temporarily uncommented this code →
$('body').toggleClass('pushRight');
so that body is not pushed, but it is possible that those 3 Horizontals line which on click become cross comes over the side menu so that user can use it to close it?
I have one more question If all the menus are coming in one line then why two menus are coming in one line, exceptionally this is happening just once.
Try this:
.push-menu.active{
z-index:1000;
}
.push-menu.active span {
position:fixed;
top:20px;
left:10px;
}
.push-menu.active span:before,
.push-menu.active span:after{
background:#fff;
}
.side-menu-items li{display:block;}
1 Like
Sir, It is 100% working.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.