私のリンクを中心にして、ボタンはまだ動作します。

これはPHPのHTMLです。私はクラスを変更しようとしましたが、liとulを追加しようとしましたが、私はそれが働きたかったので、今、HTMLスクリプトにJava Scriptを追加しました。それは動作しますが、私はそれはもう機能していないtopnavクラスに何かを変更した後：私のリンクを中心にして、ボタンはまだ動作します。

<div class="container"> 
      <h3></h3> 

<div class="topnav" id="myTopnav"> 

    <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a> 
      <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a> 
      <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a> 
      <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a> 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
</div> 

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script>   

</div>

そして、これは、応答ナビゲーションバーのCSSです。私は信じているメディアクエリの問題ですが、私はよく分からない：

.topnav { 
    overflow: hidden; 
    background-color: #ce8c4e; 
    border-bottom: #63451e 1px solid; 

} 

.topnav a { 
    float: left; 

    color: black; 

    padding: 10px 12px; 
    text-decoration: none; 
    font-size: 14px; 


} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

.topnav .icon { 
    display: none; 

} 

@media screen and (max-width: 600px) { 
    .topnav a:not(:first-child) {display: none;} 
    .topnav a.icon { 
    float: right; 
    display: block; 
    } 
} 

@media screen and (max-width: 600px) { 
    .topnav.responsive {position: relative;} 
    .topnav.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .topnav.responsive a { 
    float: none; 
    display: block; 
    text-align: left; 

    } 

}

私は、フロートを変更すると頭字語にいくつかのクラスを追加しようとしましたが、私は望んでいたように動作しませんでした。

出典

2017-11-05 Bogdan

どの程度this-

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     .topnav { 
      overflow: hidden; 
      background-color: #ce8c4e; 
      border-bottom: #63451e 1px solid; 

     } 

     .topnav a { 
      float: left; 

      color: black; 

      padding: 10px 12px; 
      text-decoration: none; 
      font-size: 14px; 


     } 

     .topnav a:hover { 
      background-color: #ddd; 
      color: black; 
     } 

     .topnav .icon { 
      display: none; 

     } 

     .topnav-container { 
      width: fit-content; 
      margin: 0 auto; 
     } 

     @media screen and (max-width: 600px) { 
      .topnav a:not(:first-child) {display: none;} 
      .topnav a.icon { 
      float: right; 
      display: block; 
      } 
     } 

     @media screen and (max-width: 600px) { 
      .topnav.responsive {position: relative;} 
      .topnav.responsive .icon { 
      position: absolute; 
      right: 0; 
      top: 0; 
      } 
      .topnav.responsive a { 
      float: none; 
      display: block; 
      text-align: left; 

      } 

      .topnav-container { 
      width: auto; 
      } 
     } 
    </style> 
</head> 
<body> 

    <div class="container"> 
     <h3></h3> 

     <div class="topnav" id="myTopnav"> 
      <div class="topnav-container"> 
       <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a> 
         <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a> 
         <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a> 
         <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a> 
       <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
      </div> 
     </div> 

     <script> 
     function myFunction() { 
      var x = document.getElementById("myTopnav"); 
      if (x.className === "topnav") { 
       x.className += " responsive"; 
      } else { 
       x.className = "topnav"; 
      } 
     } 
     </script>   

    </div> 

</body> 
</html>

出典

2017-11-05 23:17:54

私のリンクを中心にして、ボタンはまだ動作します。

答えて

関連する問題