Menu toggle problems

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

<nav id="main-nav">
    <a class="nav-collapse" href="#nav" id="nav-collapse">Menu</a>
    <ul id="nav" class="nav">
        <li><a href="http://cofchristslc.org/test/1our_congregation/">Our Congregation</a></li>
        <li><a href="http://cofchristslc.org/test/2our_mission/">Our Mission</a></li>
        ...
    </ul>
</nav>

As directed by the book, I included this css

#nav-collapse {display: none; margin-top: 0; padding-top: 0; background-color: #d46f3d;}
#nav-collapse.active {display: block;}

I used this Javascript function from the book

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!

A couple of things. Firstly, taking a peek at your site, the JS you quote above isn’t actually on the site, so make sure you actually add it in.

Also make sure you supply a .hide class in your CSS so the menu will be hidden when required. Here’s a simple demo with the required code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#nav-collapse {display: none; margin-top: 0; padding-top: 0; background-color: #d46f3d;}
#nav-collapse.active {display: block;}
.hide {display:none;}

</style>
</head>
<body>

<nav id="main-nav">
    <a class="nav-collapse" href="#nav" id="nav-collapse">Menu</a>
    <ul id="nav" class="nav">
        <li><a href="http://cofchristslc.org/test/1our_congregation/">Our Congregation</a></li>
        <li><a href="http://cofchristslc.org/test/2our_mission/">Our Mission</a></li>
     
    </ul>
</nav>

<script>
	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;
        }    
    }
</script>

</body>
</html>
1 Like

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!

Glad I was able to help. :slight_smile:

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?

Thanks for any pointers!

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.

Sorry. I thought I’d posted the link.

http://cofchristslc.org/test/

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?

Make sure to put the scripts in there. Otherwise it’s too theoretical.

the script is active on the website at the link I posted. If you mean include it in these posts, this is the entire script:

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;
        }
    }
}

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?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.