I’m trying to create a toggle menu for a client website, and I’m struggling to get it working properly. I’m new at using anything more than html and css, so I’m not sure what the problem is. I’m following the tutorial of Implementing Responsive Design, by Tim Kadlec.
I have this html for my menu
window.onload = function() {
var collapse = document.getElementById('nav-collapse');
var nav = document.getElementById('nav');
//toggle class utility function
function classToggle( element, tclass) {
var classes = element.className,
pattern = new RegExp( tclass );
var hasClass = pattern.test( classes );
//toggle the class
classes = hasClass ? classes.replace(pattern, '' ) : classes + ' ' + tclass;
element.className = classes.trim();
};
classToggle(nav, 'hide');
classToggle(collapse, 'active');
collapse.onclick = function() {
classToggle(nav, 'hide');
return False;
} }
Unfortunately, I’m not getting any toggling. I’ve checked all the code again several times, done a little tinkering, but I can never seem to find anything wrong with the code, nor any of my tinkering change the result.
Can anyone see where I’m going wrong here? I’d ever so much appreciate any tips.
Thanks!
Sorry, I should have mentioned that I’d currently removed the javascript file to make it easier to identify that I at least had the html and css correct, try to rule that out as a problem.
I’ll add in the .hide class and see if it comes together. Thanks for the pointer.
That did the trick! Either I missed the direction to create the .hide class, or they forgot to include it, and I was too ignorant to figure it out. I appreciate the heads up!
In further enhancing the design, I seem to have run into another problem. I want the menu to be responsive, and become a horizontal menu at 1000px/62.5em. So I’ve created a media query.
@media only screen and (min-width: 62.5em) {
#main-nav li {
float: left;
margin: 0;
padding-left: 0;
border-bottom: 0;
}
}
With some other additional styling.
I want the menu button and toggle feature to be removed from the code once the menu goes horizontal. So again I followed a tutorial from the book, and entered the following javascript code into my javascript file
window.onload = function() {
var nav = document.getElementById('nav');
var navItem = nav.getElementsByTagName('li');
//is it floated?
var floated = navItem[0].currentStyle ? el.currentStyle['float'] : document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float');
if (floated != 'left') {
var collapse = document.getElementById('nav-collapse');
//toggle class utility function
var classToggle = function( element, tclass ) {
var classes = element.className,
pattern = new RegExp( tclass );
hasClass = pattern.test( classes );
//toggle the class
classes = hasClass ? classes.replace( pattern, '' ) : classes + ' ' + tclass;
element.className = classes.trim();
};
classToggle(nav, 'hide');
classToggle(collapse, 'active');
collapse.onclick = function() {
classToggle(nav, 'hide');
return false;
}
}
}
It looks like it should work, as far as I can tell, but if you check my test site, it doesn’t remove the toggle feature or menu button when it hits that 62.5 em viewport width.
Am I not having it watch the proper elements for a float? Am I getting something obviously wrong here?
That seems to be what it already does. I think you need to be more specific about what you are trying to achieve, and post a link to a page that clearly demonstrates where you are up to, with all the relevant code in place.
Yes, it does switch to a horizontal when the viewport is 1000px+. The problem I’m having is getting the toggle function to stop at that width, and the menu button to become hidden as long as it is that width. I’m trying to accomplish this by scripting it so that the toggle feature doesn’t run if the menu items are floated, and this is the code I’m trying to use to accomplish this.
window.onload = function() {
var nav = document.getElementById('nav');
var navItem = nav.getElementsByTagName('li');
//is it floated?
var floated = navItem[0].currentStyle ? el.currentStyle['float'] : document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float');
if (floated != 'left') {
var collapse = document.getElementById('nav-collapse');
But it doesn’t seem to be working. The menu button remains visible, and the list itself hidden until the menu button clicked, even when the viewport is wider than 999px, and the list lis are floated.
Does that clear up what I’m trying to accomplish, and what’s wrong?
Anyone see any problems? I can’t see why it won’t eliminate (display: none) the menu button and display the menu by default when the menu <li>s are floated. Am I targeting the <li> properly?
