Question

我正在尝试使用React-burger-menu菜单中的所有选项，由于某种原因，我似乎无法正确获得样式。我的索引页以某种方式包含在我的导航div中，即使将切换到其他路线，它也保持不变。我敢肯定这很简单。这是我在说什么的图片：

关于CSS，我已经尝试了所有可以想到的方法，但我无法使其正常工作。这是Nav所在的代码：

   render() {
     return (
       <div>
        <Background />
         <Menu>
           <nav className="stroke">
            <ul>
             <div className="menu bm-menu">
              <li>
               <NavLink className="menu-item bm-item" to="/">
                Home
               </NavLink>
              </li>
              <li>
               <NavLink className="menu-item bm-item" to="/portfolio">
                Portfolio
               </NavLink>
              </li>
              <li>
              <NavLink className="menu-item bm-item" to="/contact">
                Contact
              </NavLink>
              </li>
            </div>
          </ul>
        </nav>
      <Route exact path="/" component={Index} />
      <Route path="/portfolio" component={Portfolio} />
      <Route path="/contact" component={Contact} />
      </Menu>
    </div>
   );
  }
 }

这是我的CSS：

   nav {
     z-index: 1;
     width: 100%;
     align-items: center;
     max-height: 3em;
   }

 .menu {
    list-style-type: none;
    justify-content: flex-end;
    border-bottom: 2px solid transparent;
   background: transparent;
 }

 .menu-item {
   margin-right: 1em;
   color: aliceblue;
   font-size: 25px;
   font-weight: bold;
   font-family: 'Raleway', sans-serif;
   text-decoration: none;
 }

.menu-item:hover {
 text-decoration-color: aliceblue;
  }

 nav.stroke ul li a,
 nav.fill ul li a {
position: relative;
 }    

 nav.stroke ul li a:after,
  nav.fill ul li a:after {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0%;
 content: '.';
 color: transparent;
 background: #aaa;
 height: 1px;
}

nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
   transition: all 0.5s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}

 nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
 }

nav.fill ul li a:hover:after {
 z-index: -10;
 animation: fill .1s forwards;
 -webkit-animation: fill .1s forwards;
 -moz-animation: fill .1s forwards;
 opacity: 1;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
 }
 .bm-burger-bars {
   background: #373a47;
  }
 .bm-menu {
  background: #797c88;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  max-width: 80%;
  }
 .bm-morph-shape {
  fill: #797c88;
  max-width: 80%;
 }
 .bm-item {
  display: inline-block;
  margin-bottom: 2%;
  }
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
 }

还有一些问题，例如scaleRotate等动画无法将画布推出（particle.js）。我不确定是否可以做到，但是值得一试。很抱歉问一个愚蠢的问题。我通常不问CSS，但是我很困惑。

谢谢

Answer 1

原来，这与实际库本身有关。在Github上发布了一个问题，然后转到另一个图书馆。

Div问题与React-burger-menu

1 个答案: