使用媒体查询和JavaScript构建HTML5响应式菜单

Question

I'm trying to adapt Todd Motto's tutorial http://toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript/ on creating a responsive menu with media queries & JavaScript to my Mobile First design using Dreamweaver's Fluid Grid layouts.

I've got my inline navigation menu from the desktop view port disappearing in both the Tablet and Mobile viewports, the way I want, but the menu icon that is supposed to toggle the CSS converted drop-down menu on and off, is just not showing up in the Tablet and Mobile viewports. http://www.wayofthewomb.com/index_R_nav_menu.2.html

---

HERE'S THE RELEVANT SOURCE CODE I HAVE ::

---

<div id="wrap_nav" class="fluid">

  <div class="fluid nav">

      <ul class="nav_list">
         <li class="nav_item"><a href="main_pgs/alchemy/alchemy_about.html">Alchemy</a>
         </li>

         <li class="nav_item"><a href="main_pgs/alchemy/alchemy_about.html">Tantric Womb</a>
         </li>

         <li class="nav_item"><a href="main_pgs/practices/practices.html">Practices</a> 
         </li>

         <li class="nav_item"><a href="main_pgs/ceremony/ceremony_about.html">Ceremony</a>
         </li>

         <li class="nav_item"><a href="main_pgs/about/barbara_lee.html">About</a> 
         </li>

         <li class="nav_item"><a href="main_pgs/praise.html">Praise</a></li>

         <li class="nav_item"><a href="main_pgs/shop/shop_main.html">Shop</a></li>

         <li class="nav_item"><a href="main_pgs/free_juice/free_juice.html">Free Juice</a></li>

     </ul>

  </div><!--END nav -->

   <div id="nav_opt_in" class="fluid nav_opt_in">
       <p><a href="main_pgs/forms/pop_ups/opt_in.html">JOIN THE WOMB REVOLUTION</a></p>
   </div><!--END nav_opt_in -->

</div> <!--END wrap_nav -->

---

AND HERE'S THE CSS I HAVE SO FAR (beginning at the Mobile layout stage. I've omitted the global CSS, as this is already quite a long string) ::

---

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.7391%;
padding-left: 1.6304%;
padding-right: 1.6304%;
clear: none;
float: none;}

#wrap_header_top {
margin: 0rem -9999rem;
/* add back negative margin value */
padding: 0rem 9999rem;}

#header_top {
position: relative;}

#header_logo {
width: 100%;
z-index: 20;
position: absolute;
top: 0%;
left: 0%;}

#header_logo img {
width: 30%;
float: left;
margin-left:5%;}

#header_opt_in {
width: 100%;
clear: both;
margin-left: 0;
display: none;}

#wrap_nav {
margin: 0rem -9999rem;
/* add back negative margin value */
padding: 0rem 9999rem;
background-color: #000000;
z-index: 1;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dcd3df;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dcd3df;}

.nav {
width: 22.4719%;
position:relative; 
background-color:#000000;
margin: ;
padding: ;}

.nav_list { /* ul */    
display:none;}

.nav_item { /* ul li */
font-family:'Raleway-Light','Century Gothic','sans-serif';
list-style-type:none;
width:100%;
float:none;
text-align:left; 
font-size:0.8em;
margin:0.6em 0;
padding: ;    }

.nav_item a { /* ul li */
color:#dcd3df;}

.nav_item a:hover { /* ul li */
color:#fff;}

.nav_item a:focus { /* ul li */
color:#fff;}

.nav_mobile { /* for the expandable menu icon link */
display:block;
position:absolute;
cursor:pointer;
top:0;
left:0;
background:#000000 url(../test_R_nav/toddmotto_example/img/nav.svg) no-repeat       left center;
height:auto;
width:auto;}

.nav_active {
display:block;}

.nav_mobile_open { }

#nav_opt_in {
width: 74.1573%;
clear: none;
margin-left: 3.3707%;
display: block;}

#nav_opt_in p{
font-size: 0.6em;
text-align:right;
margin-right: 5%;
margin-top: 5%;}

#wrap_header {
margin: 0rem -9999rem;
/* add back negative margin value */
padding: 0rem 9999rem; }

#header { }

#main_content { }

.zeroMargin_mobile {
margin-left: 0;}

.hide_mobile {
display: none;}



/* TABLET Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {



.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
clear: none;
float: none;
margin-left: auto;}

#wrap_header_top { }

#header_top { }

#header_logo {
width: 100%;}

#header_opt_in {
width: 100%;
clear: both;
margin-left: 0;
display: none;}

#wrap_nav { }
#nav_opt_in {
width: 61.8784%;
clear: none;
margin-left: 1.6574%;
display: block;}

.nav {
width: 36.464%;}

.nav_list { /* ul */}

.nav_item { /* ul li */
font-size: ;
margin: ;
padding: ;}

#wrap_header { }

#header { }

#main_content { }

.hide_tablet {
display: none;}

.zeroMargin_tablet {
margin-left: 0;}

}



/* DESKTOP Layout: 769px to a max of 1232px.  Inherits styles from: Mobile      Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {



.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
clear: none;
float: none;
margin-left: auto;}

#wrap_header_top { }

#header_top { }

#header_logo {
width: 49.4505%;}

#header_logo img {
width: 50%;
margin-top: 1%;}

#header_opt_in {
width: 49.4505%;
margin-left: 1.0989%;
clear: none;
display: block;
position: absolute;
top: 0%;
/* [disabled]left: 0%; */
right: 0%;
z-index: 20;}

#header_opt_in p {
font-size: 0.6em;
text-align:right;
margin-right: 5%;
margin-top: 5%;}

#wrap_nav { }

.nav {
width:100%;
/*position:relative; (Not necc? Todd uses this, here.)*/
/* display:inline-block; (Not necc? Todd uses this, here.)*/
margin-left:auto;
margin-right:auto;}

.nav_list {  /* ul */
margin:0;
padding:0;
display:inline;}

.nav_item {  /* ul li */
 width:12.5%;
 float:left;
 /* display:inline; (is redunant here - cos is called by parent .nav_list) */
 font-size:0.8em;
 text-align:center;
 margin:0.6em 0;}

.nav_mobile { /* for the expandable menu icon link */
display:none;}

#nav_opt_in {
width: 49.4505%;
margin-left: 1.0989%;
clear: none;
display: none;}

#wrap_header { }

#header { }

#main_content { }

.zeroMargin_desktop {
margin-left: 0; }

.hide_desktop {
display: none; }

}

---

.. AND TODD'S JAVASCRIPT FOR PRODUCING THE MAGIC I'M AFTER (I've managed to replicate his tutorial using this JavaScript and it all works just fine .. just not when I try to re-create it to my mobile first design in Dreamweaver. (PS - I do not know how to code with JavaScript, other than copying and pasting scripts that work ... and that has always worked quite well!) :

---

<script>
    (function () {

        // Create mobile element
        var mobile = document.createElement('div');
        mobile.className = 'nav-mobile';
        document.querySelector('.nav').appendChild(mobile);

        // hasClass
        function hasClass(elem, className) {
            return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
        }

        // toggleClass
        function toggleClass(elem, className) {
            var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
            if (hasClass(elem, className)) {
                while (newClass.indexOf(' ' + className + ' ') >= 0) {
                    newClass = newClass.replace(' ' + className + ' ', ' ');
                }
                elem.className = newClass.replace(/^\s+|\s+$/g, '');
            } else {
                elem.className += ' ' + className;
            }
        }

        // Mobile nav function
        var mobileNav = document.querySelector('.nav-mobile');
        var toggle = document.querySelector('.nav-list');
        mobileNav.onclick = function () {
            toggleClass(this, 'nav-mobile-open');
            toggleClass(toggle, 'nav-active');
        };
    })();
    </script>
_______________________________________________________________________

Thank-you for taking a look at all this. Hopefully its just something really obvious that I'm missing ....?

Answer 1

when loading your page, the console displays the following error:

Uncaught TypeError: Cannot read property 'appendChild' of null

That means, you .nav element cannot be found by the JavaScript. Try including the script at the end of the body tag, like so:

    ...
    <script src="scripts/responsive-menu.js"></script>
</body>

That solves the problem of your script being run before the DOM is built.

Let me know if it helps.