當切換到“移動視圖”和導航欄時，嘗試在導航欄中更改我的徽標位置變為下拉菜單

Question

我對編碼很新，我正在嘗試創建一個具有幾種不同能力的導航欄。 我的導航欄目前有：-a logo -menu items -drop down menu（在移動視圖中時）

問題：

當我單擊以顯示下拉菜單時，仍然顯示的徽標會在徽標底部和從其下方開始的菜單之間創建一個開放空間。

想要解決方案：

我想創建一種類型的腳本，當我點擊菜單圖標以顯示下拉菜單項時，它將隱藏徽標。

那么有沒有人知道如何創建一個簡單的js或css，我可以在顯示下拉菜單時隱藏徽標？ 所以我需要的是一個簡單的代碼：

單擊菜單圖標 =徽標消失並顯示下拉菜單

取消單擊菜單圖標 =徽標重新出現並且不顯示下拉菜單

這是我到目前為止的代碼.....（也請隨時告訴我，如果我有任何不必要的額外代碼，我不需要。我對所有建議持開放態度）

https://jsfiddle.net/beginnercoder/4orac61e/#&togetherjs=mCK2aymdrJ

或代碼如下

HTML：

    <!doctype html>
    <html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="An example of a fixed-position(sticky) top navigation bar that remains visible while the user scrolls the page.">
    <meta name="author" content="Six Revisions">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->  
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/fixed-navigation-bar.css">
   <link rel="stylesheet" href="js/nav-bar.js">
   <link rel="shortcut icon" href="Images/website%20logo.png">

   <div id="container"> </div>
   <head>
   <nav class="fixed-nav-bar">
   <div id="menu" class="menu">
   <img src="Images/website%20logo.png" id="logo"> 

   <a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
  <ul class="menu-items">
  <li><a href="//sixrevisions.com"><h4>Home</h4></a></li>
  <li><a href="//sixrevisions.com/about/"><h4>About</h4></a></li>
  <li><a href="//sixrevisions.com/contact/"><h4>Contact</h4></a></li>
  <li><a href="//twitter.com/sixrevisions"><h4>Twitter</h4></a></li>
  <li><a href="//www.facebook.com/sixrevisions"><h4>Facebook</h4></a></li>
  </ul>
  </div>
  </nav>
  <section class="content">
  <div class="description">
  <h1>Fixed Navigation Bar</h1>
  <p class="summary">*/ text*/ </p>
  <a class="button" href="//sixrevisions.com/css/fixed-navigation-bar/">Read the tutorial</a>
  <a class="button" href="//github.com/sixrevisions/fixed-navigation-bar">View Source on GitHub</a>
  </div>
  </section>
  <p><a class="button-dark" href="//sixrevisions.com/css/fixed-navigation-bar/">Read the tutorial</a>
  <a class="button-dark" href="//github.com/sixrevisions/fixed-navigation-bar">View Source on GitHub</a></p>
  <body>

  <p> Wayfarers portland shabby chic, vegan jianbing helvetica vice craft beer poutine pork belly mustache roof party. Whatever kitsch etsy, air plant dreamcatcher shabby chic thundercats literally kinfolk tousled. Hot chicken enamel pin lumbersexual, pour-over la croix franzen salvia tousled pok pok green juice beard snackwave. Yuccie messenger bag cornhole, fam austin master cleanse iceland helvetica kinfolk sartorial raw denim fap mustache pinterest retro. Gluten-free umami ugh tumeric. Shabby chic enamel pin vaporware, hella retro wayfarers affogato vice lo-fi man bun hashtag pug messenger bag. Distillery YOLO vexillologist bicycle rights, typewriter butcher vinyl unicorn helvetica vape mixtape kitsch listicle.
  </p> 
  <p>Tofu vaporware portland pour-over keytar, tilde pug distillery. Kogi paleo tousled skateboard sartorial hexagon fashion axe blue bottle cronut. Asymmetrical ennui portland, +1 tilde listicle authentic cardigan scenester keytar vexillologist organic poutine. Intelligentsia aesthetic artisan keytar, helvetica kinfolk hella ramps tilde viral stumptown occupy lumbersexual tousled marfa. Trust fund sriracha kickstarter, activated charcoal meh bushwick ennui franzen bicycle rights edison bulb literally offal skateboard. Hexagon fap disrupt scenester. Keytar flexitarian listicle affogato kinfolk vexillologist af art party, cold-pressed offal hell of fingerstache chambray sartorial.</p> 
 </body>
 </html>

CSS：

    .fixed-nav-bar {position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow:visible;
    width: 100%;
    height: 50px;
    background-color: #698e8c;}

    .content {
    margin-top: 20px;}


    .fixed-nav-bar li, .fixed-nav-bar a { 
    height: 50px;
    line-height: 50px;}

    #logo { padding-left: 20px;
    vertical-align: text-top;
    max-height: 90px;
    min-width: 97px; 
    margin-left: clear;
    margin-right:20px;}

    .menu {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;}

    .menu a, .menu a:visited {
    color: #ffffff;}

    .menu a:hover, .menu a:target {
    color: #ebebeb;}

    .menu-items { display:inline-block; 
    vertical-align: text-bottom;}

    .sitename {
    min-height: 190;
    margin-right: 20px;
    margin-left: 10px;}

    a.sitename, a:visited.sitename {
    color: #e0e0e0;}

    .menu-items li { overflow: visible; 
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;}

    .menu-items a {
    text-decoration: none;}

    .show, .hide {
    display: none;
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center left;
    color: #dde1e2;}

    .show {
    background-image: url(assets/down-arrow-icon.png);}

    .hide {
    background-image: url(assets/up-arrow-icon.png);}

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

    #logo { 
    vertical-align:middle;
    width:110px;
    height:220px;
    margin-right:20px;
    padding-left: 3px;
    margin-left: 0;}

   .menu { 
   position: relative;
   width: 100%;}

  .sitename {
  position: absolute;
  top: 0;
  left: 15px;
  margin-left: 0px;}

  .menu-items {
  display: none; 
  width: 100%;
  margin-top:0px; 
  vertical-align: text-bottom;
  background-color: #698e8c;}

  .menu-items li {
  display: block;
  text-align: center;}

  .show, .hide {  
  position: absolute;
  top: 0;
  right: 15px;}

  .show {
  display: inline-block; }

  .hide {
  display: none;}

  #menu:target .show {
  display: none;}

  #menu:target .hide, #menu:target .menu-items {
  display: inline-block; }
  }

  @media only screen and (min-width: 200px) {
  .sitename, .show, .hide {
  font-size: 14px;}
  #logo {display: fixed;
  vertical-align:middle;
  width:110px;
  height:220px;
  margin-right:20px;
  margin-left: 0;}
  }

非常感謝你提前！

-beginnercoder

Answer 1

編輯代碼非常困難，導致你使用兩個菜單，一個用於'show'，一個用於'hide'，它不是一個正確的程序。 現在我給你的概念，希望它有所幫助。

 jQuery(document).ready(function(){ jQuery('#hideshow').on('click', function(event) { jQuery('#logo').toggle('show'); }); });

 .wrapper{ width: 500px; height: 100px; border: 1px solid red; } #hideshow{ float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="wrapper"> <div id='logo'>Here's your logo</div> <input type='button' id='hideshow' value='Menu'> </div>

當切換到“移動視圖”和導航欄時，嘗試在導航欄中更改我的徽標位置變為下拉菜單

問題描述

問題：

想要解決方案：

1 個解決方案

解決方案1
0 2017-05-16 08:29:44

當切換到“移動視圖”和導航欄時，嘗試在導航欄中更改我的徽標位置變為下拉菜單

問題描述

問題：

想要解決方案：

1 個解決方案

解決方案1 0 2017-05-16 08:29:44

解決方案1
0 2017-05-16 08:29:44