时间戳

首页 > 解决方案 > 使用 css 和/或 JavaScript 更改位置

javascript - 使用 css 和/或 JavaScript 更改位置

问题描述

我一直在尝试用我的 css 改变位置，但我不知道为什么它一直在重置位置。我有这个中间栏，并且...当我点击右上角的菜单（还没有）时，这个栏向右滑动。知道我该怎么做吗？

<!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>Bootstrap - Prebuilt Layout</title>

  </head>
  <body>

      <section id="menu">
      <header id="header">
        <div class="container">
          <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#about">About</a>
            <a href="#event">Event</a>
            <a href="#menu-list">Menu</a>
            <a href="#contact">Book a table</a>
          </div>
          <!-- Use any element to open the sidenav -->
          <span onclick="openNav()" class="pull-right menu-icon">☰&lt;/span>
        </div>
      </header>
      </section>

      <div style="height: 100%;width: 100%;text-align:center;">



      <div class="container">
        <div class="row">
            <div class="col">
                <div class="colreta">
                    <img src="images/logo.png">
                </div>
            </div>

        </div>
      </div>
      </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-3.2.1.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.0.0.js"></script>
    <script src="js/funcoes.js"></script>
  </body>
</html>

CSS如下：

@charset "UTF-8";
/* CSS Document */

body{

    background-image: url(images/bg.png);
    background-size: cover;
    overflow: hidden;
}

.meio{

    background-color: #fad60b;
}

.meio:hover{
    left: 55%;
}

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 40%;
    margin-top: 0px;
    padding: 0px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

.col:last-of-type {
   background: #f7d00c;
   margin-right: -50px;
   padding-right: 50px;
    position: absolute;
    left: 35%;
    height: 100%;
    transform: rotate(15deg);
    top: -200;
    text-align: center;
    width: 238px;
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(-17deg);
    width: 30%;
}

.col {
    color:black;
    font-weight:normal;
    margin-left:0px;
    transition:all 0.5s linear;
}

.col:target {
    color:red;
    font-weight:bold;
    margin-left:20px;
    transition:all 0.5s linear;
}

.colreta{
    position: absolute;
    left: 13%;
    top: 22%;
    height: 100%;
    transform: rotate(-15deg);
    top: -200;
    text-align: center;
    width: 238px;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(17deg);
    width: 30%;
}

我的代码有时可以工作，但是当我移动指针时它会回到原来的位置

JS 只包含打开和关闭菜单：

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}



(function($) {

  // Menu filer
  $("#menu-flters li a").click(function() {
    $("#menu-flters li a").removeClass('active');
    $(this).addClass('active');

    var selectedFilter = $(this).data("filter");
    //  $("#menu-wrapper").fadeTo(100, 0);

    $(".menu-restaurant").fadeOut();

    setTimeout(function() {
      $(selectedFilter).slideDown();
      //$("#menu-wrapper").fadeTo(300, 1);
    }, 300);
  });

  // Add smooth scrolling to all links in navbar + footer link
  $(".sidenav a").on('click', function(event) {
    var hash = this.hash;
    if (hash) {
      event.preventDefault();
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function() {
        window.location.hash = hash;
      });
    }

  });

  $(".sidenav a").on('click', function() {
        closeNav();
    });

})(jQuery);

标签： javascriptcss

解决方案

推荐阅读