jQuery - 添加漢堡包手機菜單圖標

-3

我正在嘗試在移動版本中添加漢堡包類型圖標到我的菜單欄。該圖標使用代碼☰ - 和＃9776添加;jQuery - 添加漢堡包手機菜單圖標

我試圖將其添加到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>

來源

2015-05-13 RandomMath

代碼段應該幫助我們做些什麼嗎？ –

我添加了代碼來顯示我現有的jQuery代碼 - 並且我想要幫助添加圖標 – RandomMath

要添加Java還是JavaScript代碼？這些是非常不同的東西。另外，我們可以看到你的HTML代碼綁定嗎？ – Dreamcasting

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', '')在做，所以我刪除它。你以爲自己正在做的就是每按一下按鈕就做什麼，這在滑出式面板中是有意義的，它可以做一些不同的事情來打開它並關閉它。

另外：可用性研究表明，漢堡，三欄圖標不是導航的最佳選擇。這很混亂。也許把它改成你喜歡的菜單。

來源

2015-05-13 15:29:22 wordSmith

我可以問你如何設法讓符號在第五行工作？你只是輸入unicode還是你做了其他任何事情？ – RandomMath

我剛剛複製了符號（ctrl/cmd + c）並在引號之間粘貼了它（ctrl/cmd + v） – wordSmith

它是一個unicode符號，因此它可以在字符集設置爲接受該符號的任何位置。 – wordSmith

jQuery - 添加漢堡包手機菜單圖標

回答

相關問題