html - 调整大小后菜单移动

Question

当您以全尺寸打开浏览器时，菜单会居中(这是它应该在的位置)但是，如果您在浏览器不是全尺寸(恢复向下)时打开浏览器，则菜单不会居中在 .logo 下(如 jsfiddle 中所示)，但在最右边。有帮助吗？

PS:菜单在单击其元素之一时具有动画功能。

菜单代码:

<div id="logo" class="logo" ><img src="http://placehold.it/350x150"/></div>
        <p class="custom-class"><a href="">Go to the main website</a></p>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   
        <div id="menu" class="menu">
        <ul class="headlines">
             <li id="item1"><button>A</button></li>
            <li id="item2"><button>B</button></li>
            <li id="item3"><button>C       </button></li>
            <li id="item4"><button>D        </button></li>
            <li id="item5"><button>E   </button></li>
            <li id="item6"><button>F      </button></li>
            <li id="item7"><button>G      </button></li>

        </ul>
        </div>

JQUERY:

       $(".menu").on("click", function () {
  $(".menu").addClass('permahover');

});


        var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

CSS:

html {
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0 auto;
    background-color: #ffffff;
    max-width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    text-align: center;
}


h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

.custom-class {
    text-align: right;
    margin-top:-130px;
    margin-right: 20px;

}

a {
    color: #000000;
    text-decoration: none;

}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border-style:none;
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}
.logo {

    text-align: center;
    margin-top:40px;

}

 li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 180px;
    text-align:right;    
    border-style: none;

}

.menu{

    width:150px;
    height: 350px;

   }

.menu li{  
position: relative;
  top:150px; 
  bottom: 0;
  left: 695px;
  right:0;
  margin: auto; 
  border-style:none;

}

#item7{
  transition: opacity .8s, left .8s ease-out;
  -moz-transition: opacity .8s, left .8s ease-out;
  -webkit-transition: opacity .8s, left .8s ease-out;
  -o-transition: opacity .8s, left .8s ease-out;
}
#item6{
  transition: opacity 1s, left 1s ease-out;
  -moz-transition: opacity 1s, left 1s ease-out;
  -webkit-transition: opacity 1s, left 1s ease-out;
  -o-transition: opacity 1s, left 1s ease-out;
}
#item5{
  transition: opacity 1.2s, left 1.2s ease-out;
  -moz-transition: opacity 1.2s, left 1.2s ease-out;
  -webkit-transition: opacity 1.2s, left 1.2s ease-out;
  -o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
  transition: opacity 1.4s, left 1.4s ease-out;
  -moz-transition: opacity 1.4s, left 1.4s ease-out;
  -webkit-transition: opacity 1.4s, left 1.4s ease-out;
  -o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
  transition: opacity 1.6s, left 1.6s ease-out;
  -moz-transition: opacity 1.6s, left 1.6s ease-out;
  -webkit-transition: opacity 1.6s, left 1.6s ease-out;
  -o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
  transition: opacity 1.8s, left 1.8s ease-out;
  -moz-transition: opacity 1.8s, left 1.8s ease-out;
  -webkit-transition: opacity 1.8s, left 1.8s ease-out;
  -o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
  transition: opacity 2s, left 2s ease-out;
  -moz-transition: opacity 2s, left 2s ease-out;
  -webkit-transition: opacity 2s, left 2s ease-out;
  -o-transition: opacity 2s, left 2s ease-out;
}


#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{vertical-align:top; height:25px;width:200px; background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}

.permahover li{
opacity: 1;
left: 10%;

}

.headlines li{
    font-size:1.5em;
    color:#000000;
    transition: all 0.5s;
    cursor: pointer;
}

.headlines:hover li,
.headlines.active li{            /* PARENT HOVER */
    opacity:0.4;  
    cursor: pointer;                    /* Dim all */
}    
.headlines li:hover,
.headlines li.active {      /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer; 
}





@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
    }
}

@keyframes colorize {
    0% {
        filter: grayscale(100%);
    }
    100% {
        filter: grayscale(0%);
    }
}

JSFIDDLE:https://jsfiddle.net/n4gwk6qs/

Answer 1

接受我的建议，始终，为您的网站包含一个 CSS 重置。这会将所有元素的所有属性设置为其默认值。你可以找到一个 here

为了使菜单居中，我使用了 margin: auto; 和 top: 0px;左:0px；底部:0px；右:0px;

在这里查看:https://jsfiddle.net/n4gwk6qs/3/

此外，请整理您的代码。您多次为相同的元素声明相同的属性。不疼，但看起来不太漂亮。