时间戳

首页 > 解决方案 > 复制和粘贴时CSS更改？

javascript - 复制和粘贴时CSS更改？

问题描述

我正在尝试将代码从一个代码笔移动到另一个代码笔，尽管当我复制和粘贴它时，它会发生变化。我正在尝试对其进行试验/稍微更改一下，有人有什么想法吗？移动到我自己的网站时，它似乎也无法正确复制。

原文： https ://codepen.io/hayleyt/pen/ZyqBYW

我的： https ://codepen.io/pen/

CSS：

// SASS Variables
$white: #fff;
$navy: #2e2f35;
$navy-dark: #1e1e24;
$navy-light: #494a50;
$grey: #a5a5a4;
$green: #20c270;
$green-dark: #18a960;

// Moves menu to the left/right side of screen
$menu-orientation: right;

@media screen and (max-width: 600px) {
  .pushNav {
    width: 75%;
    #{$menu-orientation}: -75%
  }
}

@media screen and (min-width: 601px) {
  .pushNav {
    width: 350px;
    #{$menu-orientation}: -350px;
  }
}

ul.pushNav {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.pushNav {
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  overflow: hidden;
  background: $navy;
  transition: ease-in-out 0.5s;
    hr {
    border: 1px solid #555;
  }
}

 .pushNav ,.pushNav a {
   font-size: 1em;
   font-family: helvetica, sens-serif;
   font-weight: 100;
   color: $white;
   text-decoration: none;
}

.pushNavIsOpen {
  overflow: auto;
  height: 100%;
}

.js-topPushNav.isOpen, .pushNav_level.isOpen {
 #{$menu-orientation} : 0;
}

.closeLevel, .openLevel {
  cursor: pointer;
}

.openLevel, .closeLevel, .pushNav a {
  padding: 1em 0;
  display: block;
  text-indent: 20px;
  transition: background 0.4s ease-in-out;

  &:hover {
    background: $navy-light;
  }
}

.hdg {
    background-color: $navy-dark;
}

.closeLevel, closelevel > i {
  font-size: 1em;
  color: $grey;
}

.burger {
  position: absolute;
  top: 24px;
  #{$menu-orientation}: 48px;

  i {
    font-size: 3em;
  }
}

.screen {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 0;
  top: 0;
  bottom: 0;
  #{$menu-orientation}: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.pushNavIsOpen .screen {
  height: 100%;
  opacity: 1;
}


// Font Awesome styles - delete if not using font awesome
.fa {
  display: inline;
  padding: 5px;
}

// Delete body and .wrapper styles
body {
  background: url(https://static.pexels.com/photos/379600/pexels-photo-379600.jpeg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: black;
}

.wrapper {
  max-width: 625px;
  margin: 120px auto;
  padding: 0 20px;
  color: $white;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-weight: 100;
  font-size: 1.1em;
  line-height: 1.4em;

  a {
    color: $green;
    text-decoration: none;
  }

  button {
    background-color: $green;
    margin: 50px auto;
    display: block;
    padding: 10px 40px;
    border: none;

    &:hover {
      background-color: $green-dark;
    }

    a {
      color: $white;
      font-size: 2em;
    }
  }
}

HTML：

<nav>
  <ul class="pushNav js-topPushNav">
    <li class="closeLevel js-closeLevelTop hdg">
      <i class="fa fa-close"></i>
      Close
    </li>
    <li>
      <a href="#">
        <i class="fa fa-home"></i>
        Home
      </a>
    </li>

    <li><!-- Begin section 1 -->
      <div class="openLevel js-openLevel">
        Section 1 
        <i class="fa fa-chevron-right"></i>
      </div>
      <ul class="pushNav pushNav_level js-pushNavLevel">
        <li class="closeLevel js-closeLevel hdg">
          <i class="fa fa-chevron-left"></i>
          Go Back
        </li>
        <li>
          <div class="openLevel js-openLevel">
            Section 1.1
            <i class="fa fa-chevron-right"></i>
          </div>
          <ul class="pushNav pushNav_level js-pushNavLevel">
            <li class="closeLevel js-closeLevel hdg">
              <i class="fa fa-chevron-left"></i>
              Go Back
            </li>
            <li><a href="#">Link to page five</a></li>
            <li><a href="#">Link to page six</a></li>
            <li><a href="#">Link to page seven</a></li>
            <li><a href="#">Link to page eight</a></li>
            <li><a href="#">Link to page nine</a></li>
          </ul>
        </li>
        <li>
          <div class="openLevel js-openLevel">
            Secion 1.2
            <i class="fa fa-chevron-right"></i>
          </div>
          <ul class="pushNav pushNav_level js-pushNavLevel">
            <li class="closeLevel js-closeLevel hdg">
              <i class="fa fa-chevron-left"></i>
              Go Back
            </li>
            <li><a href="#">Link to page ten</a></li>
            <li><a href="#">Link to page eleven</a></li>
            <li><a href="#">Link to page twelve</a></li>
            <li><a href="#">Link to page thirteen</a></li>
          </ul>
        </li>
        <li><a href="#">Link to page three</a></li>
        <li><a href="#">Link to page four</a></li>
      </ul>
    </li><!-- End section 1 -->

    <li>
      <div class="openLevel js-openLevel">
        Section 2 
        <i class="fa fa-chevron-right"></i>
      </div>
      <ul class="pushNav pushNav_level js-pushNavLevel">
        <li class="closeLevel js-closeLevel hdg">
          <i class="fa fa-chevron-left"></i>
          Go Back
        </li>
        <li><a href="#">Link to page fourteen</a></li>
        <li><a href="#">Link to page fifteen</a></li>
        <li><a href="#">Link to page sixteen</a></li>
        <li><a href="#">Link to page seventeen</a></li>
        <li><a href="#">Link to page eighteen</a></li>
        <li><a href="#">Link to page nineteen</a></li>
      </ul>
    </li>
    <hr/>
    <li>
      <a href="#">Link to page one</a>
    </li>
    <li>
      <a href="#">Link to page two</a>
    </li>
  </ul>
</nav>

<div class="wrapper">

  <div class="burger js-menuToggle">
    <i class="fa fa-navicon"></i>
  </div>

  <h1>Multi-Level Hamburger Push Menu</h1>
  <p>This is a simple multi-level hamburger menu. The only thing jQuery is doing here is adding and removing CSS classes — all animations/ nav hiding/ sliding etc are pure CSS.</p>
  <p><a href="http://fontawesome.io/">Font Awesome</a> icons are used in the menu. You can easily substitute your own icons or omit them altogether.</p>
  <button>
    <a href="https://hayley.cc" target="_blank"><i class="fa fa-user-circle-o"></i> Hayley.cc</a>
  </button>
</div>

<span class="screen"></span>

jQuery：

var $menuTrigger = $('.js-menuToggle');
var $topNav = $('.js-topPushNav');
var $openLevel = $('.js-openLevel');
var $closeLevel = $('.js-closeLevel');
var $closeLevelTop = $('.js-closeLevelTop');
var $navLevel = $('.js-pushNavLevel');

function openPushNav() {
  $topNav.addClass('isOpen');
  $('body').addClass('pushNavIsOpen');
}

function closePushNav() {
  $topNav.removeClass('isOpen');
  $openLevel.siblings().removeClass('isOpen');
  $('body').removeClass('pushNavIsOpen');
}

$menuTrigger.on('click touchstart', function(e) {
  e.preventDefault();
  if ($topNav.hasClass('isOpen')) {
    closePushNav();
  } else {
    openPushNav();
  }
});

$openLevel.on('click touchstart', function(){
  $(this).next($navLevel).addClass('isOpen');
});

$closeLevel.on('click touchstart', function(){
  $(this).closest($navLevel).removeClass('isOpen');
});

$closeLevelTop.on('click touchstart', function(){
  closePushNav();
});

$('.screen').click(function() {
    closePushNav();
});

标签： javascripthtmljquerycss

解决方案

修改某人的 codepen 的最好方法是fork 它。你可以在那里修改它。此外，当您将 codepen 复制到您自己的站点时，请确保您在文件中导入了所有相关的 html 标记和 css/js。

我的猜测是您正在尝试使用需要更多配置步骤的 SASS 变量。为了简化您的工作，只需将 codepen 中的 CSS 视图切换为“查看编译的 CSS”，然后将其复制到您的站点中。

在此处输入图像描述

推荐阅读