Question

我正在制作移动标题（即汉堡包）。当我按下图标时它不起作用。我花了很多时间来修复它，但我对这种东西并不是很有经验。这是代码：

HTML

 <!DOCTYPE html>
<html lang="en">

<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
    <script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="js/header.js"></script>
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="logo">
            </div>
            <div class="wrapper">
                <div class="menu-icon">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="http://4para.net">Forums</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Role Finder</a></li>
                        <li><a href="#">ORBAT</a></li>
                    </ul>
                </div>
            </div>  
        </div>
    </div>
</body>

</head>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow-x: hidden;
    font-family: 'PT Sans';
    /*do not change it's for a bug*/
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
/*end of bug change*/
.container {
    margin-left: 200px;
    margin-right: 200px;
}
.main-content {
    margin-top: 150px;
    margin-bottom: 50px;
}
.featured {
    margin-top: 75px;
    width: 100%;
}
.textbox {
    position: static;
    margin-top: 20px;
}
.textbox p {
    color: #d3d3d3;
    font-size: 0.750em;
    font-family: 'Alegreya Sans', sans-serif;
}
/*header*/
.header {
    background-color: #3f3f3f;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
}
.wrapper {
    width: 100%;
    margin-top: 25px;
    height: 75px;
    position: absolute;
}
.logo {
    float: left;
    background-image: url(img/logo.png);
    width: 100px;
    height: 100px;  
}
.nav {
    margin: 15px 15px 0px 750px;
}
.nav  ul{
    margin: auto;
}
.nav ul li {
    list-style: none;
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
}
.nav a {
    text-decoration: none;
    font-family: Lucida, Serif;
    color: #fff;
    font-size: 1.500em;
    }
.nav a:hover {
    text-decoration: underline;
}
.menu-icon {
    display: none;
}   
/*end of header*/


/*mobile friendly*/
@media screen and (max-width: 1670px) {
/*header*/
.nav {
    margin: 15px 15px 0px 500px;
}   
 /*end of header*/


 @media screen and (max-width: 1400px) {
/*header*/
.nav {
    margin: 15px 15px 0px 250px;
}   
 /*end of header*/


 @media screen and (max-width: 1140px) {
/*header*/
.nav {
    margin: 15px 15px 0px 200px;
}   
 /*end of header*/


  @media screen and (max-width: 1080px) {
/*header*/
.nav {
    margin: 15px 15px 0px 150px;
}   
 /*end of header*/
 @media screen and (max-width: 1030px) {
/*header*/
.nav {
    margin: 15px 15px 0px 100px;
}   
 /*end of header*/




 @media screen and (max-width: 980px) {
    .container {
    margin-right: 0;
    margin-left: 0;
}
} 

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

.nav {
    margin: 15px -40px ;
    background-color: #3f3f3f;
    transform: translateX(-100%);
    transition: 0.6s ease;
} 

.menu-icon {
    position: relative;
    margin-left: 10px;
    display: block;
    height: 54px;
    width: 54px;
    background-color: #2a2a2a;
    /*border: 0.75px solid #000;*/
    border-radius: 50%;
}

.line {
    width: 38px;
    height: 2px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo {
    float: right;
}

.nav ul li {
    list-style: none;
    display: block;
    padding: 10px 120px 10px 30px;

}   

.nav  .open {
    transform: translateX(0) !important;
}

 .nav ul {
    transform: translateX(-100%);
    transition: 0.6s ease;  
 }

}

JS

$(function() {

$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});

});

移动标头无法正常工作

0 个答案: