欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

當我在chrome(html，css，js)中打開菜單容器時，有沒有解決導航中斷的方法

CSS
林雅南2年前10瀏覽0評論

當我打開菜單容器時，導航內容被切斷。當我打開菜單容器時，我希望所有內容都向左。標題工作良好，沒有切斷，但導航不是。這就是我所說的形象。 點擊前點擊后點擊

我試著在css中改變過渡和轉換。但這并沒有解決我的問題。這是代碼。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Classic's Blog</title>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="css/mainstyle.css" rel="stylesheet">
    <link href="css/substyle.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <header>
      <div id="container">
        <div class="box">
            <span id="menu"></span>
            <h1><a href="index.html">???? ???</a></h1>
        </div>
      </div>
    </header>
    <menu>
        <span id="close-menu"></span>
        <ul id="menuList">
            <li><a href="#"><p class="menuList1">ALL</p></a></li>
            <li><a href="#"><p class="menuList1">Rhythm Game</p></a></li>
                <ul>
                    <li><a href="#" class="menuList2">BMS</a></li>
                    <li><a href="#" class="menuList2">EZ2ON</a></li>
                </ul>
            </li>
            <li><a href="#"><p class="menuList1">??</p></a></li>
                <ul>
                    <li><a href="#" class="menuList2">Python</a></li>
                    <li><a href="#" class="menuList2">Kotlin</a></li>
                </ul>
            </li>
            <li><a href="#"><p class="menuList1">About</p></a></li>
        </ul>
      </div>
    </menu>
    <nav>
        <p class="menuText">ALL</p>
        <fieldset>
            <img src="" class="fieldImage">
            <p class="title">Something</p>
            <p class="content">Interest thing</p>
        </fieldset>
    </nav>
</body>
</html>

/* mainstyle.css */
html, body {
  width:1280px;
  background: #FFF;
  color: #444;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
.headTitle {
  margin-top:-3px;
}
a:hover {
  color: #FF5959;
}
ul,
li {
  list-style-type: none;
  font-style:none;
  margin: 0 auto;
  padding: 0;
}
ul li {
  display: inline-block;
}
header,
.container,
#box {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
header {
  width:1000px;
  height:100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  color: #fff;
  background: url(../image/beat.jpg);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: initial;
  z-index: 9;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all .5s ease-in-out;
}
html.active header {
  transform: matrix(1, 0, 0, 1, -320, 0);
  transition: all .5s ease-in-out;
}
header .box {
  display: none;
  height: 100px;
  line-height: 40px;
  margin: 0 50px;
  padding: 10px;
}
header .box > ul {
  display: flex;
}
header .box > ul li {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.box h1 {
  margin-left:2.5%;
}
#overlay {
  background: #000;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 99;
  transition: all .5s ease-in-out;
}
html.active #overlay {
  opacity: .65;
  visibility: visible;
  transition: all .5s ease-in-out;
}
.logo {
  font-size: 32px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: initial;
}
.logo > a {
  display: inline-block;
  margin: 0 auto 0 10px;
  position: relative;
}
#close-menu {
  background: url(../image/menu.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  color: #333;
  cursor: pointer;
  display: flex;
  height: 40px;
  line-height: 20px;
  margin: 15px 20px 15px auto;
  padding: 4px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 40px;
}
html.active,
html.active body {
  overflow: hidden;
}
menu {
  background: #FFF;
  bottom: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  right: -320px;
  top: 0;
  width: 320px;
  z-index: 1;
  transition: all .5s ease-in-out;
}
.container {
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 1000px;
  transform-origin: 0% 50% 0px;
  transform: matrix(0.8, 0, 0, 0.9, 40, 0);
  transition: all .5s ease-in-out;
}
#menuList {
  margin-top: 30%;
}
menu ul li {
  display: block;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  margin-left:10px;
  text-transform: uppercase;
}
.menuList2 {
  margin-left:10px;
  font-size:15px;
  font-weight:normal;
}


html.active menu {
  right: 0;
  z-index: 999;
}

html.active menu .container {
  -webkit-transform-origin: 0% 50% 0px;
  -moz-transform-origin: 0% 50% 0px;
  transform-origin: 0% 50% 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all .5s ease-in-out;
}

#menu {
  background: url(../image/menu.png);
  background-size: 60px 60px;
  background-repeat: no-repeat;
  cursor: pointer;
  display: block;
  font-size: 30px;
  height: 60px;
  line-height: 40px;
  margin: 15px 20px;
  position: fixed;
  right: 0;
  text-align: right;
  top: 0;
  width: 60px;
}
nav {
  position: relative;
  margin-top:10%;
  margin-left:-14.5%;
  width:100%;
  height:100%;
  text-align:left;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all .5s ease-in-out;
}
html.active nav {
  transform: matrix(1, 0, 0, 1, -320, 0);
  transition: all .5s ease-in-out;
}
@media only screen and (min-width: 520px) {
  header .container {
    max-width: 640px
  }
  header .box {
    display: block;
  }
  nav .h1 {
    display: block;
  }
}

/* substyle.css */
fieldset {
    width: 700px;
    height: 150px;
    border: 1px solid #000;
    padding: 0%;
}
.menuText {
    font-size: 50px;
    font-weight: bold;
    margin: 25px 25px;
    margin-top: -10px;
}
.fieldImage {
    float:left;
    width: 200px;
    height: 150px;
}
.title {
    font-size: 30px;
    font-weight: bold;
    padding: 0%;
    line-height: 0%;
}

// script.js
$(function() {
  var w = $(window).width(),
      h = $(window).height();
  $('menu .container').height(h - 60);
  $('body').prepend('<div id="overlay"></div>');
  $('#menu').click(function() {
  $('html').addClass('active');
});
$('#close-menu').click(function() {
  $('html').removeClass('active');
});
$('#overlay').click(function() {
  $('html').removeClass('active');
});
$(window).resize(function() {
  var w = $(window).width(),
      h = $(window).height();
  $('menu .container').height(h - 60);
});
});