我已经附加了部分代码。我正在尝试使固定的导航栏正常工作。现在，当我单击菜单按钮时，它几乎可以正常运行。
菜单有2个问题：
没有任何可能导致此问题的“ href =＃”，至少我可以找到
有什么解决方法吗？
function menuChange() {
"use strict";
/****** Variables *****/
// Burger link & image
var burger = document.getElementById("burg");
// Individual drop down elements; home, inventory, etc.
var lines = document.getElementsByClassName("nav-item");
// Overall container; to make dropdown 'un-scrollable'
var mainArea = document.getElementById("dropdownFreeze");
// Cross link & image
var cross = document.getElementById("xCross");
// Background for dropdown & navigation
var navList = document.getElementById("navList");
// Social Media images & buttons
var social = document.getElementById("navImage");
// If menu is open, close it. If closed, open it
if (burger.style.display === 'none') {
burger.style.display = 'block';
cross.style.display = 'none';
navList.style.display = 'none';
social.style.display = 'none';
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
mainArea.style.position = 'relative';
} else {
burger.style.display = 'none';
cross.style.display = 'block';
navList.style.display = 'block';
social.style.display = 'block';
for (var j = 0; j < lines.length; j++) {
lines[j].style.display = 'block';
}
mainArea.style.position = 'fixed';
}
}/*********************************
Max-Width:
**********************************/
@media (max-width:1200px) {
/*********************************
Mobile Size, Quick Phone Call Button
**********************************/
#quickcall {
height: 35px;
width: auto;
float:left;
margin-top: 10px;
margin-bottom: 10px;
margin-left:10px;
}
h2 {
text-align: center;
margin-top: 55px;
}
#quickcall:hover {
opacity: .4;
}
main {
margin-top: 50px;
margin-bottom: 10px;
padding-bottom: 50px;
}
/*****************************
Buttons CSS
******************************/
.buttons {
background-color: white;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 20px;
border-color: black;
border-width: 2px;
}
.buttons:hover {
opacity: .4;
}
.dropButton {
background-color: white;
color: black;
font-size: 16px;
border: 1px solid black;
cursor: pointer;
border-radius: 5px;
}
.dropButton:hover {
opacity: .4;
}
.dropButton:active {
outline: none;
}
.dropButton:focus {
outline: none;
}
#inventorySortContainer {
display: none;
position: relative;
width: 100%;
text-align: center;
border-bottom: 1px solid #C6C4C4;
padding-bottom: 30px;
}
.sortByButton {
background-color: white;
color: black;
font-size: 12px;
border: 1px solid black;
cursor: pointer;
border-radius: 5px;
position: absolute;
bottom: .4em;
right: .2em;
}
.sortByButton:hover {
opacity: .4;
}
.sortByButton:active, .sortByButton:focus {
outline: none;
}
.sortOptions {
margin-top: 30px;
display: inline-block;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropDownContent a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
#viewInventory {
margin: 10px;
text-align: center;
}
#frontPageBlurb {
margin: auto;
width: 90%;
text-align: center;
font-size: 16px;
}
#frontPageBlurb p {
border: 3px solid black;
padding: 10px;
}
#navImage
{
display: none;
margin-top:20px;
}
#navImage img
{
height:100px;
}
#navList
{
height:100vh;
width:100%;
background-color:white;
display:none;
}
.nav-item {
position: relative;
height:70px;
width: 100%;
display: none;
background-color: white;
font-size: 20px;
cursor: pointer;
}
.nav-item a
{
display: block;
height:100%;
}
.nav-item:first-child
{
}
.nav-item li
{
padding: 20px 0 0 0;
height:0px;
}
.nav-item a li {
border-top: #dddddd 1px solid;
}
#lastNav {
border-bottom: #dddddd 1px solid;
}
.nav-item:hover {
background-color: #DFDFDF;
}
.nav-item:hover a {
text-decoration: none;
}
.fixed-nav {
margin-top: -6px;
font-weight: bold;
top: 0;
left: 0;
width: 100%;
font-size: .8em;
position: fixed;
height: 50px;
box-sizing: border-box;
text-align: center;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16), 0px 3px 6px rgba(0,0,0,0.23);
background-color: #FFFFFF;
z-index: 1;
}
.fixed-nav ul {
padding: 0;
list-style-type: none;
list-style-image: none;
margin-top: 0;
overflow: scroll;
}
.fixed-nav li {
box-sizing: border-box;
}
.fixed-nav li:hover {
display: block;
}
.fixed-nav ul li a {
text-decoration: none;
margin: 0px;
color: black;
margin-top: -1px;
}
.fixed-nav ul li a:hover {
}
.fixed-nav a {
text-decoration: none;
color: black;
}
#burg:hover {
opacity: .4;
}
#xCross:hover {
opacity: .4;
}
.hamburger {
background: none;
position: absolute;
top: 0;
right: 0;
line-height: 45px;
padding: 2px 15px 0 15px;
color: black;
border: 0;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
cursor: pointer;
outline: none;
}
.cross {
background: none;
position: absolute;
top: 0px;
right: 0px;
padding: 8px 15px 0px 15px;
font-size: 70px;
color: black;
border: 0;
font-weight: bold;
cursor: pointer;
outline: none;
display: none;
}
.quickContact {
display: none;
}
.mainImage {
max-width: 100%;
height: auto;
}
#homeIcon {
display: none;
vertical-align: middle;
margin-top: 6px;
margin-bot: 10px;
}
#smallHomeIcon {
position: absolute;
margin-top: 6px;
margin-bot: 10px;
left:0;
right:0;
margin-left:auto;
margin-right: auto;
display: block;
vertical-align: middle;
}
#smallHomeIcon:hover {
opacity: .4;
}
#footer {
height: 150px;
}
.footerInfo {
margin-left:90px;
text-align: left;
}
.footerMap {
text-align: center;
margin-bottom: 20px;
}
.footerPhone {
height: 25px;
width: auto;
}
#footPhone {
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
vertical-align: middle;
width: 100%;
}
#footcall {
margin-left: 15px;
text-decoration: none;
color: black;
font-size: 20px;
vertical-align: middle;
font-weight: bold;
}
#dropDownSocial
{
text-align: center;
}
#dropDownSocial img
{
height:32px;
margin:20px;
}
#dropDownSocial img:hover
{
opacity: .4;
}
#socialMedia {
text-align: center;
margin: 20px 0;
}
#socialMedia img {
height: 32px;
margin: 20px;
}
#socialMedia img:hover {
opacity: .4;
}
#footerSocial {
width: 90%;
margin: auto;
border-bottom: 1px solid #C6C4C4;
border-top: 1px solid #dddddd;
padding: 10px;
}
#footerSocial h2
{
margin:20px 0;
}
#asmLogo {
display: block;
width: 40%;
margin: auto;
}
#asmLogoContainer {
}
#locationImage {
height: 25px;
margin-left: 10px;
}
#footAddress {
text-decoration: none;
color: black;
font-size: 20px;
vertical-align: middle;
margin-left: 10px;
display: inline-block;
font-weight: bold;
}
#footerLocation {
width: 80%;
display: inline-block;
margin-top: 20px;
}
#clockImage {
height: 25px;
vertical-align: middle;
float: left;
margin-left: 10px;
}
#footerHours {
margin-top: 20px;
margin-bottom: 10px;
}
#labelContainer {
display: inline-block;
width: 80%;
margin-left: 15px;
}
#hours1 {
float: left;
width: 90%;
font-size: 16px;
}
#hours2 {
float: left;
width: 90%;
font-size: 16px;
}
#hours115 {
float: left;
width: 90%;
font-size: 20px;
font-weight: bold;
}
#hours97 {
float: left;
width: 90%;
font-size: 20px;
font-weight: bold;
}
#copyright {
text-align: center;
border-top: 1px solid #C6C4C4;
margin: auto;
width: 95%;
}
.vehicle_container {
width: 100%;
height: 200px;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 1px solid #C6C4C4;
}
.vehicle_container:last-child {
border-bottom: none;
}
.vehicle_MainImage {
float: left;
width: 30%;
max-width: 150px;
max-height: 100px;
margin-left: 10px;
margin-top: 10px;
}
.vehicle_Description {
width: 60%;
float: left;
margin-left: 10px;
margin-bot: 10px;
}
.vTitle {
font-weight: bold;
}
.vTitleContainer {
width: 100%;
float: left;
}
.vehicleInfoContainer {
}
.vehicleTitle {
width: 100%;
}
.vehicleTitle h3 {
text-align: center;
margin: 0px;
float: left;
width: 100%;
}
.priceContainer {
width: 30%;
float: right;
}
.vehiclePriceButton {
float:right;
text-decoration: none;
border-radius: 5px;
border: 1px solid black;
background-color: white;
font-size: 16px;
color: black;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 20px;
margin-left:20px;
}
.vehiclePriceButton:hover {
border: 1px solid red;
}
#inventoryContainer {
margin-top: 40px;
}
#aboutUsContainer {
width: 95%;
margin: auto;
}
#missionStatement {
}
#missionStatement label {
font-weight: bold;
}
#contactForm {
margin: auto;
width: 80%;
padding: 10px;
overflow: hidden;
background-color: #ccc;
margin-bottom: 20px;
}
#contactForm label {
float: left;
width: 45%;
margin-top: 5px;
margin-bottom: 5px;
}
#contactForm input {
margin-top: 5px;
margin-bottom: 5px;
}
#contactForm textarea {
float: right;
box-sizing: border-box;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
height: 100px;
}
#employerDisclaim {
text-align: center;
font-weight: bold;
}
#financeForm {
margin: auto;
width: 80%;
/*border:2px solid black;*/
padding: 10px;
overflow: hidden;
background-color: #ccc;
}
#financeForm label {
}
#financeForm input {
}
#financeForm textarea {
float: right;
box-sizing: border-box;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
height: 100px;
}
#financeForm select {
}
#financeForm h3 {
width: 100%;
float: left;
}
.financeDropdown {
background-color: white;
}
.financeDropdown option {
background-color: white;
}
#filterDesiredContainer {
float: right;
width: 100%;
}
#filterDesiredContainer select {
width: 100%;
margin: 2px;
}
.financeInputs {
width: 95%;
}
.financeLabels {
float: left;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.horizontalContainer {
width: 100%;
display: inline-block;
}
.horizontalContainerCheckboxes {
margin-top: 10px;
display: inline-block;
}
.checkboxes {
float: left;
width: 4%;
}
.checkboxLabels {
width: 90%;
float: left;
}
#submit {
margin-top: 10px;
float: right;
width: 100%;
}
#submit:hover {
color: #FBB03B;
background-color: black;
border-radius: 5px;
cursor: pointer;
}
#submitFinance {
margin-top: 10px;
float: right;
width: 100%;
}
#submitFinance:hover {
color: #FBB03B;
background-color: black;
border-radius: 5px;
cursor: pointer;
}
#financeVehicleChoice {
max-width: 95%;
}
#missionStatement {
border-bottom: 1px solid #C6C4C4;
}
.questions {
width: 100%;
font-weight: bold;
float: left;
}
.answers {
width: 100%;
}
.socialMediaLinks:hover {
cursor: pointer;
}
.pagination {
list-style: none;
color: black;
}
.pagination ul {
}
.pagination li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
.pagination a {
border-radius: 5px;
text-decoration: none;
padding: 8px 16px;
color: black;
}
.pagination a:hover {
background-color: lightslategrey;
color: white;
}
.pagination a.active {
border: 1px solid red;
color: black;
}
.paginationContainer {
width: 90%;
margin: auto;
text-align: center;
display: inline-block;
}
.card {
width: 75%;
height: 505px;
margin: 10px auto 10px auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: .3s;
display: inline-block;
vertical-align: text-bottom;
overflow: hidden;
}
.card::before, .card::after {
white-space-collapse: collapse;
}
.card img {
width: 100%;
height: 300px;
}
.card h4 {
text-align: center;
}
.card h5 {
text-align: center;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.cardDescriptionContainer {
padding: 2px 16px;
overflow: scroll;
height: 205px;
}
#meetOurStaff {
width: 100%;
text-align: center;
}
#faqs {
border-top: #dddddd 1px solid;
}
#faqs h2 {
margin-top: 20px;
}
#vehicle_description
{
}
.vTemplateImages {
max-width: 100%;
position: relative;
margin: auto;
}
.vTemplateImages img {
max-width: 100%;
max-height:150px;
margin-left:auto;
margin-right:auto;
}
.vTemplateDisplayLeft {
width: 10%;
font-size: 30px;
bottom: .2em;
left: .2em;
position: absolute;
background-color: transparent;
color: black;
border-radius: 5px;
border: 2px solid black;
cursor: pointer;
outline: none;
}
.vTemplateDisplayLeft:hover {
/*color: #FBB03B;
border: 2px solid #FBB03B; */
background-color: #FBB03B;
}
.vTemplateDisplayRight {
width: 10%;
font-size: 30px;
bottom: .2em;
right: .2em;
position: absolute;
background-color: transparent;
color: black;
border-radius: 5px;
border: 2px solid black;
outline: none;
cursor: pointer;
}
.vTemplateDisplayRight:hover {
/*color: #FBB03B;
border: 2px solid #FBB03B;
*/
background-color:#FBB03B;
}
.vTemplateMain {
position: relative;
width: 95%;
background-color: #f1f1f1;
border: 1px solid black;
box-shadow: 5px 5px 5px black;
margin: auto;
margin-top: 5px;
}
.vTemplateInfo {
width: 100%;
}
#carfax {
position: absolute;
left: 0;
top: 0;
}
#carfax:hover {
opacity: .7;
}
#mainArea {
}
.vTemplateLabel {
}
.vTemplateLabelContainer {
display: inline-block;
width: 100%;
/*border-bottom:1px solid #FBB03B;*/
margin-top: 20px;
margin-left: 5px;
}
.vTemplateLabelDescription {
font-weight: bold;
float: left;
width: 30%;
}
.vTemplateLabelValue {
float: right;
margin-right: 20px;
}
.priceDisclaimer {
margin-top: 20px;
width: 100%;
display: inline-block;
}
.priceDisclaimer button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: .3s;
}
/*Style the tab */
.tab {
overflow: hidden;
border: 1px solid black;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: .3s;
}
.tab button.active {
background-color: black;
color: #FBB03B;
}
.tabContent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tabContainer {
width: 95%;
margin: auto;
}
#disclaimer {
font-size: 10px;
text-align: center;
border: 1px solid black;
background-color: #f1f1f1;
}
.comLinks {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.comLinks button {
}
.comLinks a {
border: none;
outline: none;
text-decoration: none;
cursor: pointer;
color: white;
background-color: black;
font-size: 16px;
height: 40px;
border-radius: 5px;
padding: 5px;
}
.comLinks a:hover {
color: #FBB03B;
}
.comLinks button:hover {
color: #FBB03B;
}
.vTemplateLower {
margin-top: 20px;
}
#filterButton {
border-bottom: 1px solid #C6C4C4;
padding-bottom: 30px;
text-align: center;
}
#filterButton button {
text-decoration: none;
border-radius: 5px;
border: 1px solid black;
background-color: white;
font-size: 16px;
color: black;
outline: none;
}
#filterButton button:hover {
border: 1px solid red;
cursor: pointer;
text-decoration: none;
}
#stateList, #stateList2, #stateList3, #stateList4 {
list-style-type: none;
padding: 0;
margin: 0;
margin-top: 10px;
}
#stateList li, #stateList2 li, #stateList3 li, #stateList4 li {
margin-top: -1px;
background-color: white;
text-decoration: none;
color: black;
display: none;
width: 100%;
}
#stateList li:hover, #stateList2 li:hover, #stateList3 li:hover, #stateList4 li:hover {
background-color: #FBB03B;
cursor: pointer;
}
.submit {
background-color: white;
border-radius: 5px;
outline: none;
border-color: black;
}
#inventoryReturn
{
width:95%;
margin-left:auto;
margin-right: auto;
margin-top:60px;
margin-bottom: 10px;
border:1px solid black;
background-color: white;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
text-align: center;
}
#inventoryReturn a
{
display: block;
width:100%;
color:black;
}
#inventoryReturn:hover
{
opacity: .6;
box-shadow: 0px 8px 16px 0px black;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Used Cars|Tempe Dealer|Arizona Specialty Motors</title>
<meta content="Search Used Cars in Tempe at Arizona Specialty Motors to find the best car deals in Arizona." name="description">
<link rel="stylesheet" type="text/css" href="css/asmStyles.css">
<script src="js/myJava.js" type="text/javascript"> </script>
</head>
<body>
<!--Top Navigation Div -->
<div id="topNav">
<nav class="fixed-nav">
<!-- Quickcall allows users to directly call ASM while the screen is adjusted for mobile-->
<input id="quickcall" type="image" src="images/phoneIcon.png" alt="Call Us"/>
<!--Buttons for Hamburger menu -->
<button id="burg" onclick="menuChange();" class="hamburger">☰</button>
<button id="xCross" onclick="menuChange();" class="cross">˟ </button>
<!--Navigation Links -->
<ul id="navList">
<div class="nav-item"><a href="inventory.php">
<li>Inventory</li>
</a> </div>
<div class="nav-item"><a href="https://extranet.dealercentric.com/CreditPlus?AssociateID=122567&AssociateTypeID=4000&P=GPIS&video=speed">
<li>Finance</li>
</a></div>
<div class="nav-item"><a href="contact.php">
<li>Contact Us</li>
</a></div>
<div class="nav-item"><a href="about.html">
<li>About Us</li>
</a></div>
<div id="lastNav" class="nav-item"><a href="reviews.html">
<li>Reviews</li>
</a> </div>
<div class="" id="navImage"> <a href="index.html">
<li><img src="images/asmOriginalLogo_V4.png" alt="Arizona Specialty Motors"/>
<div id="dropDownSocial"> <a href="#"><img class="socialMediaLinks" src="images/fbLogo.png" alt="Facebook"/></a> <a href="https://www.linkedin.com/company/arizona-specialty-motors/"><img class="socialMediaLinks" src="images/In-Black-128px-TM.png" alt="LinkedIn"/></a> <a href="#"><img class="socialMediaLinks" src="images/instaGlyph.png" alt="Instagram"/></a> <a href="https://twitter.com/az_specialty"><img class="socialMediaLinks" src="images/twitterLogo.png" alt="Twitter" /></a> </div>
</li>
</a> </div>
</ul>
</nav>
</div>
<div id="dropdownFreeze">
<main id="mainArea">
<!-- Main image on home page, eventually will be slider of pictures-->
<div class="mainImageContainer"> <img class="mainImage vTemplate_image" src="images/gtr.jpg" alt="GT-R"/> <img class="mainImage vTemplate_image" src="images/weShip.jpg" alt="We Ship!"/> <img class="mainImage vTemplate_image" src="images/gtr2.jpg" alt="GT-R 2"/> <img class="mainImage vTemplate_image" src="images/gtr3.jpg" alt="GT-R 3"/> </div>
<!-- View Inventory Button-->
<div id="viewInventory"> <a href="inventory.php">
<button id="inventoryButton" class="buttons" type="button">View Our Inventory</button>
</a> </div>
<!--Front page text info -->
<div id="frontPageBlurb">
<p> Arizona is the best place in our great Nation to buy a vehicle from! Our great weather helps keep vehicle condition excellent. We are dry year-round, so there is no corrosion from moisture, ocean air or chemically treated roads. <br>
<br>
These conditions can wreak havoc on vehicles not just aesthetically, but mechanically and electronically as well. </p>
</div>
</main>
<!-- Footer Section -->
<div id="footer">
<footer>
<div id="footerSocial">
<h2>Follow Us on Social Media!</h2>
<img id="asmLogo" src="images/asmOriginalLogo_V4.png" alt="LogoFooter" />
<div id="socialMedia"> <a href="#"><img class="socialMediaLinks" src="images/fbLogo.png" alt="Facebook"/></a> <a href="https://www.linkedin.com/company/arizona-specialty-motors/"><img class="socialMediaLinks" src="images/In-Black-128px-TM.png" alt="LinkedIn"/></a> <a href="#"><img class="socialMediaLinks" src="images/instaGlyph.png" alt="Instagram"/></a> <a href="https://twitter.com/az_specialty"><img class="socialMediaLinks" src="images/twitterLogo.png" alt="Twitter" /></a> </div>
</div>
<div class="footerCombo">
<div class="footerInfo">
<div id="footPhone"> <a href="tel:+14804543844"><img class="footerPhone" src="images/phoneIcon.png" alt="Call Us"/></a> <a id="footcall" href="tel:+14804543844"> 480-454-3844</a> </div>
<div id="footerLocation"> <a href="#" ><img id="locationImage" src="images/mapLocation_Icon.png" alt="Find us at"/></a> <a id="footAddress" href="#">1625 E Weber Dr <br/>
Tempe, AZ 85281 </a> </div>
<div id="footerHours"> <img id="clockImage" src="images/clock_icon.png" alt="Our Hours are"/>
<div id="labelContainer" >
<label id="hours1"> Monday - Saturday </label>
<label id="hours97"> 9AM - 7PM </label>
<label id="hours2"> Sunday </label>
<label id="hours115"> 11AM - 5PM</label>
</div>
</div>
</div>
<div class="footerMap"> <a href="https://www.google.com/maps/dir//Arizona+Specialty+Motors/"><img src="https://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=300x200&maptype=terrain&key=AIzaSyDeJdb79cYUi58cl3hm1lctYvvshqBmASQ&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:1%7CArizona+Specialty+Motors" alt="Google Map of Arizona Specialty Motors"></a> </div>
</div>
<div id="copyright">
<label >Copyright © 2017 Arizona Specialty Motors </label>
</div>
</footer>
</div>
</div>
</body>
</html>