css - 拡張navbarが入力をクリックするのを防ぐ

Question

クリックすると拡張するnavbarがありますが、入力とボタンと対話しようとすると、クリックできません。私はそれを取り除こうとしたため、ウェブサイトは完璧に正常に動作したので、これはnavbarの問題を知っています。 addNoteのページに行くと最後の入力ボックスは正常に動作しますが、半分しかクリック可能ではないので、どのように拡張しているかに問題があると思います。

https://postnote.herokuapp.com/addNote

これは、メニューのCSSです：

.menu{ 
    background: red; 
    width:100%; 
    min-height:10vh; 
    position: fixed; 
    left:0px; 
    top:0px; 
    z-index: 10; 
    border-bottom: 0.4px solid #C0C5CD; 
    transition: 0.3s ease-in-out; 
    cursor: pointer; 
} 
.menu-item{ 
    font-size:0em; 
    color:black; 
    margin-top: 1.2vh; 
    display:block; 
    opacity:0; 
    height: 0px; 
    transition: 0.3s ease-in-out; 
    border-bottom: 0.7px solid #C0C5CD; 
    background:red; 
    display: none; 
} 
.menu-item-extend{ 
    opacity:1; 
    height: 5.5vh; 
    font-size: 1.6em; 
    display: block; 
} 
.noStyle{ 
    border: none; 
} 

、これは（反応V4で）メニューのHTMLです：

import { Meteor } from "meteor/meteor" 
import React from "react"; 
import { withRouter, Link } from "react-router-dom"; 

import { SubjectRoutes } from "../subjectRoutes/subjectRoutes"; 
import "../../../client/stylesheets/authentication.css" 

class Menu extends React.Component{ 
    extendMenu(){ 
    let menuItems = document.querySelectorAll(".menu-item"); 
    for(let i = 0; i <= menuItems.length; i++){ 
     menuItems[i].classList.toggle("menu-item-extend") 
    } 
    console.log(menuItems) 
    } 
    render(){ 
    return(
     <div className="center center-v-outer"> 
     <div className="menu center-v-inner" ref="menu" onClick={this.extendMenu.bind(this)}> 
      <h1 className="menu-header">PostNote</h1> 
      <p className="menu-item"><Link to="/">Home</Link></p> 
      <p className="menu-item"><Link to="/searchNotes">Notes</Link></p> 
      <p className="menu-item"><Link to="/addNote">Add a Note</Link></p> 
      <p className="menu-item noStyle"><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></p> 
     </div> 
     </div> 
    ); 
    } 
} 
export default withRouter(Menu) 

Answer 1

あなたのラッパーdiv.center .center-v-outerは'center-v-outer 'の' height：50vh 'のためにフォームを隠しています。これを削除すると、すべて正常に動作するはずです。

さらに、フォームからメニューを移動する必要があります;