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

时间：2015-05-15 16:20:37

标签： javascript css html5 drop-down-menu

我正在尝试修改Todd Motto的教程http://toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript/，以创建带有媒体查询的响应式菜单。使用Dreamweaver流体网格布局的JavaScript到我的Mobile First设计。

我的桌面视图端口中的内联导航菜单在平板电脑和移动视口中都以我想要的方式消失，但菜单图标应该打开和关闭CSS转换后的下拉菜单，只是没有出现在Tablet和Mobile视口中。 http://www.wayofthewomb.com/index_R_nav_menu.2.html

这是我有相关的源代码:: 

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

和我这里的CSS（从Mobile布局阶段开始。我省略了全局CSS，因为这已经是一个很长的字符串了）:: 

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

}

..和TODD'S JAVASCRIPT生产魔法我 （我已经设法使用这个JavaScript复制他的教程，它一切正常......当我尝试在Dreamweaver中重新创建它的移动设计时就不行了。（PS - 我不知道如何用JavaScript编写代码，除了复制和粘贴有效的脚本......并且一直运行良好！）：

<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>
_______________________________________________________________________

谢谢你看看这一切。 希望它只是一些非常明显的东西，我错过了......？

1 个答案:

答案 0 :(得分：0)

加载页面时，控制台显示以下错误：

Uncaught TypeError: Cannot read property 'appendChild' of null

这意味着，JavaScript无法找到.nav元素。 尝试在body标签的末尾包含脚本，如下所示：

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

这解决了在构建DOM之前运行脚本的问题。

如果有帮助，请告诉我。

相关问题
最新问题