堆棧內存溢出
  簡體   English   中英

使用HTML，CSS和JS的自適應導航欄未顯示菜單； 也無法更改鏈接的順序

[英]Responsive Navigation Bar using HTML, CSS and JS is not showing the menu; also unable to change order of links

 原文  2018-12-02 22:49:57  2   1    javascript/ html/ css/ bootstrap-4/ responsive-navigation

問題描述

我正在基於舊站點創建一個投資組合站點，但是使用Bootstrap進行布局只是因為它更快。 我嘗試使用Bootstrap創建一個下拉導航欄，但是菜單永遠不會出現，因此我放棄了，只使用了HTML，CSS和JS。 我以W3C Scools的THIS教程為基礎，並遵循對T的指導，但更改了選項。

這也不允許我切換順序（例如，我希望它是：主頁| |項目|關於我|聯系人）。 這是我的代碼： 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Portfolio</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- if IE 9 -->
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"</script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!-- end -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin:0;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: pink;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

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

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    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.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <div class="dropdown">
  <button class="dropbtn">Projects
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#websites">Web Sites</a>
      <a href="#jsapps">JavaScript Applications</a>
      <a href="#csharpapps">C# Applications</a>
      <a href="#javaapps">Java Applications</a>
      <a href="#xmlapps">XML Applications/XSLTs</a>
      <a href="#wpsites">WwordPress Sites (Coming Soon)</a>
    </div>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  </div> 
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<!-- Bootstrap rows and columns -->
      <div class="row">
        <div class="col-md-12 text-center">
          <h1>Web Portfolio</h1>
        </div>
      </div>

    <hr /> 
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <h3>Skill 1</h3>
        <p>Stuff goes here
        </p>
      </div>

       <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 2</h3>
        <p>Stuff goes here
        </p>
      </div>

       <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 3</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 4</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 5</h3>
        <p>Stuff goes here
        </p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
       <h3>Skill 6</h3>
        <p>Stuff goes here
        </p>
      </div>

     </div>
  </div>

    <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
    <!-- scripts into the body -->
   <script src="jquery.js"</script>
   <script src="bootstrap.js"></script>
<!-- </footer>PLC &copy;2018 All Rights Reserved.</footer> -->
  </body>
   </html>

拜托，如果有人可以讓我知道我做錯了什么，我將不勝感激。 還是我應該只刪除它並使用Nav元素創建一個，然后添加CSS和JS以希望使其具有響應性？ 謝謝。

1 個解決方案

解決方案1
 0 已采納  2018-12-02 23:40:50

您的About和Contact div包裝在您的Projects下拉列表中，因此我將它們放在以下位置： 

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 
 body { margin: 0; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: pink; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { 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.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Web Portfolio</title> <link rel="stylesheet" type="text/css" href="bootstrap.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- if IE 9 --> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <!-- end --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <div class="dropdown"> <button class="dropbtn">Projects <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#websites">Web Sites</a> <a href="#jsapps">JavaScript Applications</a> <a href="#csharpapps">C# Applications</a> <a href="#javaapps">Java Applications</a> <a href="#xmlapps">XML Applications/XSLTs</a> <a href="#wpsites">WwordPress Sites (Coming Soon)</a> </div> </div> <a href="#about">About</a> <a href="#contact">Contact</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> <!-- Bootstrap rows and columns --> <div class="row"> <div class="col-md-12 text-center"> <h1>Web Portfolio</h1> </div> </div> <hr /> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 1</h3> <p>Stuff goes here </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 2</h3> <p>Stuff goes here </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 3</h3> <p>Stuff goes here </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 4</h3> <p>Stuff goes here </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 5</h3> <p>Stuff goes here </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <h3>Skill 6</h3> <p>Stuff goes here </p> </div> </div> </div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何更改 HTML、CSS、JS 的響應式導航欄中的活動選項卡？ 鏈接在菜單欄 HTML/CSS/JS 上不起作用 響應式導航菜單：（使用 html 和 Css）切換菜單不起作用 我正在嘗試為小屏幕提供一個響應式導航欄，如何更改指向CSS下拉菜單的左側鏈接？ 在CSS / HTML響應中創建菜單欄 在導航欄上使用 HTML 和 CSS 制作下拉菜單 HTML，CSS，JS響應式下拉菜單 HTML/CSS 下拉導航菜單未顯示 導航欄不起作用（帶有 JS、css、HTML） 使用HTML5 / CSS3將桌面導航欄轉換為移動設備的響應式菜單欄
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM