Question

我正在尝试在移动版中向菜单栏添加汉堡类型图标。使用代码☰ - 和＃9776;

添加图标

我正在尝试在Java代码中添加它，以便在打开菜单时图标应该消失，当菜单关闭时，图标应该重新出现在菜单名称旁边

是否可以仅使用代码☰？

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(10, function() { 
             jQuery(this).toggleClass("nav-Expanded").css("display", "");  
            if($(".nav-menu").is(":hidden")) {
                $(".menu-Trigger").text("Menu");
            } else {
                $(".menu-Trigger").text("Close");
            }

          });

    });
});

HTML和CSS代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Arshdeep Soni</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, inital-scale=1">

        <link rel="stylesheet" type="text/css" href="reset.css">
        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="script.js">
        </script>

        <style type="text/css">

            body {
                background-image: url(Final6Lower.jpg);
                background-size: auto 100%;
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-position: center center;

            }

            .nav-menu li, .nav-menu a{
                display: inline-flex;
                color: rgb(137, 134, 134);
                text-decoration: none;
                font-family: Raleway;
                padding-right: 15px;
                font-size: 12px;
                letter-spacing: 7px;

            }
            .nav-menu {
                margin-top: 25px;
                text-align: center;
            }

            .nav-menu li, .nav-menu a:hover {
                color:white;
            }

            .socialIcons img {
                height: 50px;
                width: 50px;
                opacity: 0.4;
                filter: alpha(opacity=40);
                margin-right: 10px;
            }
            icons img {
                position:relative;
                display: inline;
                margin-right: 0 auto;
                margin-left: 0 auto;
            }

            .icons {
                text-align: center;
                position:absolute;
                bottom:10px;
                left:0;
                width: 100%;

            }

            .socialIcons img:hover {
                opacity:1;
                color:white;
            }

            .menu-Trigger {
                display:none;
            }

            div.nav-menu ul {
                margin:0;
                padding:0;
            }

            div.nav-menu ul li {
                list-style: none;
            }


            @media screen and (max-width: 600px) {

                .menu-Trigger {
                    display: block;
                    color:white;
                    background-color: black;
                    padding:13px;
                    text-align: center;
                    cursor:pointer;
                    font-family: raleway;
                }

                div.nav-menu ul li {
                    position: relative;
                    display:block;
                    float:none;
                    padding:13px;
                    background-color: black;
                    height: auto;
                }

                div.nav-menu {
                    display:none;
                }

                div.nav-Expanded {
                    display: block;
                }
            }


        </style>
    </head>

    <body>

        <div class="header">
        </div>                    
        <span class="menu-Trigger" align="center" >&#9776; Menu</span>
        <div class="nav-menu">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>
            </ul>
        </div>

            <div class="icons">
                <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
        <a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="fb.png" /></a>
                <a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="twitter.png" /></a>
            </div>
    </body>
</html>

Answer 1

1。）你正在使用jquery，它是一个javascript库。完全不同于Java。

是的，您可以在jQuery代码中使用该符号：

jQuery(document).ready(function() {

    jQuery(".menu-Trigger").click(function() {

        jQuery(".nav-menu").slideToggle(10, function() {
            jQuery(this).toggleClass("nav-Expanded");
            if($(".nav-menu").is(":hidden")) $(".menu-Trigger").text("☰"); else $(".menu-Trigger").text("Close");
        });
    });
});

我不知道.css('display', '')正在做什么，所以我删除了它。您认为自己正在做的事情就是按下按钮的每次点击，这在滑出式面板中有意义，它可以执行不同的操作以打开它以及关闭它的其他内容。

另外：可用性研究表明，汉堡包，三栏图标不是导航的最佳选择。这令人困惑。或许可以像使用它一样将其更改为菜单。

jQuery - 添加汉堡包移动菜单图标

1 个答案: