Javascript 汉堡菜单切换 [英] Javascript hamburger menu toggle

查看:31
本文介绍了Javascript 汉堡菜单切换的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在尝试制作一个响应式导航栏,以便将来在处理项目时用作模板.我遵循了一些教程并将我学到的东西混合在一起,现在当我尝试切换我创建的汉堡菜单时,我似乎无法切换并且无法弄清楚我做错了什么.仍然是这方面的新手,所以如果有人能指出我正确的方向,那就太好了.

这是我的 html 和 javascript:

 <html lang="zh-cn"><头><meta charset="utf-8"><title>导航</title><link rel="stylesheet" href="style.css"><script src="script.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><身体><nav class="nav-main"><img class="logo" src="images/melogo.png" alt="logo"><span class="nav-button"></span><ul class="nav"><li><a href="#" class="nav-item">首页</a><li><a href="#" class="nav-item">图片</a><li><a href="#" class="nav-item">景点</a><div class="nav-content"><div class="nav-sub"><ul><li><a href="#" class="nav-item">街道景点</a></li><li><a href="#" class="nav-item">Skateparks</a></li>

<li><a href="#" class="nav-item">关于我们</a></nav><脚本>$('span.nav-button').click(function {$('.nav-main ul').toggle();})<div class="内容"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近随着桌面出版软件 Aldus PageMaker 的发布,包括 Lorem Ipsum 的版本.</p><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来,Lorem Ipsum 一直是行业标准的虚拟文本,当时一位不知名的印刷商使用了一个类型的厨房,并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪,而且还经历了电子排版的飞跃,基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行,最近随着桌面出版软件 Aldus PageMaker 的发布,包括 Lorem Ipsum 的版本.</p>

<!-- 页面内容--></html>

这是我的 CSS:

body, html{边距:0;填充:0;}.内容{填充:30px;}.nav-main{宽度:100%;背景色:#222;高度:70px;颜色:#fff;}.nav-main .logo{向左飘浮;最大宽度:250px;填充:20px 30px;}.nav-main >ul{边距:0;填充:0;浮动:对;列表样式类型:无;}.nav-main >升 >李{浮动:对;}.nav-item{显示:内联块;填充:25px 10px;颜色:#fff;文字装饰:无;}.nav-item:悬停{背景色:#444;}.nav-内容{位置:绝对;顶部:70px;溢出:隐藏;背景色:#222;最大高度:0;}.nav-content a{文字装饰:无;颜色:#fff;}.nav-content a:hover{}.nav-sub{填充:20px;}.nav-sub ul{填充:0;边距:0;列表样式类型:无;}.nav-sub ul li a{填充:5px 0;显示:内联块;}.nav-item:focus{背景色:#444;}.nav-item:focus ~ .nav-content{最大高度:400px;-webkit-transition: max-height: 0.4s 缓入;-moz-transition:最大高度:0.4s 缓入;过渡:最大高度:0.4s 缓入;}@media 屏幕和(最大宽度:600px){.nav-main{宽度:100%;背景色:#222;最小高度:70px;颜色:#fff;显示:块;}.nav-main >ul{清除:两者;背景色:#222;宽度:100%;}.nav-main >升 >李{宽度:100%;}.nav-item{文字装饰:无;宽度:100%;文本对齐:居中;}.导航按钮{显示:块;背景色:#222;红色;字体大小:40px;文本对齐:居中;光标:指针;浮动:对;padding-right: 30px;}.导航按钮:之前{内容:H";}}

任何帮助将不胜感激.

谢谢各位.

解决方案

$('span.nav-button').click(function {$('.nav-main ul').toggle();});

$('span.nav-button').click(function() {$('.nav-main ul').toggle();});

你忘记在函数后面加括号了....

I have been trying to make a responsive navigation bar to use as a template when when working on projects in the future. Ive followed a few tutorials and mashed together what ive learnt, now when trying to toggle a hamburger menu that i have created i cant seem to get it to toggle and can not figure out what i'm doing wrong. Still a newbie at this so if someone could point me in the righ direction that would be great.

Here is my html and javascript:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </head>
  <body>
    <nav class="nav-main">
        <img class="logo" src="images/melogo.png" alt="logo">
        <span class="nav-button"> </span>
        <ul class="nav">
            <li>
                <a href="#" class="nav-item">Home</a>
            </li>
            <li>
                <a href="#" class="nav-item">Images</a>
            </li>
            <li>
                <a href="#" class="nav-item">Spots</a>
                <div class="nav-content">
                    <div class="nav-sub">
                        <ul>
                            <li><a href="#" class="nav-item">Street spots</a></li>
                            <li><a href="#" class="nav-item">Skateparks</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="#" class="nav-item">About us</a>
            </li>
        </ul>
    </nav>


    <script>
        $('span.nav-button').click(function {
            $('.nav-main ul').toggle();
        })
    </script>

        <div class="content">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>

        </div>



    <!-- page content -->
  </body>
</html>

And here is my CSS:

body, html{
    margin: 0;
    padding: 0;
}
.content{
    padding: 30px;
}
.nav-main{
    width: 100%;
    background-color: #222;
    height: 70px;
    color: #fff;
}
.nav-main .logo{
    float: left;
    max-width: 250px;
    padding: 20px 30px; 
}
.nav-main > ul {
    margin: 0;
    padding: 0;
    float: right;
    list-style-type: none;
}
.nav-main > ul > li{
    float: right;
}
.nav-item{
    display: inline-block;
    padding: 25px 10px; 
    color: #fff;
    text-decoration: none;
}
.nav-item:hover{
    background-color: #444;
}
.nav-content{
    position: absolute;
    top: 70px;
    overflow: hidden;
    background-color: #222;
    max-height: 0;
}
.nav-content a{
    text-decoration: none;
    color: #fff;
}
.nav-content a:hover{

}
.nav-sub{
    padding: 20px;
}
.nav-sub ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.nav-sub ul li a{
    padding: 5px 0;
    display: inline-block;
}
.nav-item:focus{
    background-color: #444;
}
.nav-item:focus ~ .nav-content{
    max-height: 400px;
    -webkit-transition: max-height: 0.4s ease-in;
    -moz-transition: max-height: 0.4s ease-in;
    transition: max-height: 0.4s ease-in;
}

@media screen and (max-width: 600px){
    .nav-main{
        width: 100%;
        background-color: #222;
        min-height: 70px;
        color: #fff;
        display: block;
    }
    .nav-main > ul {
        clear:both;
        background-color: #222;
        width: 100%;
    }
    .nav-main > ul > li{
        width: 100%;
    }
    .nav-item{
        text-decoration: none;
        width: 100%;
        text-align: center;
    }
    .nav-button{
        display: block;
        background-color: #222;
        color: red;
        font-size: 40px;
        text-align: center;
        cursor: pointer;
        float: right;
        padding-right: 30px;
    }
    .nav-button:before{
        content: "H";
    }
}

Any help would be greatly appreciated.

Thanks guys.

解决方案

$('span.nav-button').click(function {
  $('.nav-main ul').toggle();
});

to

$('span.nav-button').click(function() {
  $('.nav-main ul').toggle();
});

You forgot to put brackets after function....

这篇关于Javascript 汉堡菜单切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆