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

标签 javascript css html drop-down-menu

我正在尝试改编 Todd Motto 的教程 http://toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript/关于使用 Dreamweaver 的 Fluid Grid 布局为我的移动优先设计创建带有媒体查询和 JavaScript 的响应式菜单。

我的桌面 View 端口中的内联导航菜单在平板电脑和移动设备 View 中都消失了，这是我想要的方式，但是应该打开和关闭 CSS 转换下拉菜单的菜单图标，只是没有出现在平板电脑和移动视口(viewport)中。 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(从移动布局阶段开始。我省略了全局 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 的 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>
_______________________________________________________________________

感谢您查看所有这些内容。 希望它只是一些非常明显的东西，我想念......？

最佳答案

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

Uncaught TypeError: Cannot read property 'appendChild' of null

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

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

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

如果有帮助，请告诉我。

关于javascript - 使用媒体查询和 JavaScript 构建 HTML5 响应式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30264302/

上一篇：c# - body 最大高度；纵横比；飞涨

下一篇：javascript - 在 fancybox 中单击按钮时将参数传递给 afterclose 回调

相关文章：

javascript - 以 Angular 保存对象数组

javascript - 如何使用具有自定义属性的 Angular js ngOptions

css - 如何将 bootstrap.css 加载到我的 rails3 应用程序？

php - 使用ajax通过键盘中的向上/向下键选择元素以进行自动完成

html - CSS 导航栏的子子菜单未向右扩展

html - 这是 Canvas 的 lineWidth 错误吗？

html - 获取带有居中文本的全 Angular Bootstrap 导航栏

javascript - 使用 javascript 或 jQuery 添加/传递 Bootstrap 类到 'div'

jquery - 展开此代码以检查 head 中的 HTML 注释是否包含字符串

javascript - 将模态存储在变量中并在点击时显示

©2024 IT工具网  联系我们