검색
검색

내 navbar로이 문제를 해결하는 방법은 무엇입니까?

Sinan Abed 에 게시 Javascript
15
Sinan Abed :

모바일 장치에서 햄버거 아이콘을 만드는 코드 (아래)가 있으며 사용자가 클릭하면 웨이브가 나타나 화면의 모든 것을 덮습니다. 하지만 웨이브가 입력을 덮을 수 없다는 문제가 있습니다.

내 질문은 파도 아래에서 입력을 사라지게 만드는 방법입니다.

이것은 HTML입니다.

<head>
   <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="css.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
 </head>
 <body>
    

   <nav id="nav-bar">
      <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <h3 id="brand">BRAND</h3>
      <ul class="nav-links">
        <li class="menu"><a class="items" href="#">Home</a></li>
        <li class="menu"><a class="items" href="#">Contact</a></li>
        <li class="menu"><a class="items" href="#">Create Account</a></li>
        <li class="menu"><a class="items" href="#">Login</a></li>
      </ul>
    </nav>

<section class="s1">
   <header class="shorten">
      <div class="container">
      <div class="intro-text">
      <div class="intro-lead-in wow zoomIn" data-wow-delay="0.3s">Hello world</div>
      <div class="intro-heading wow pulse" data-wow-delay="2.0s">Hello world</div>
      <div class="row wow rotateInUpLeft" data-wow-delay="0.3s">
      <div class="col-sm-8 col-sm-offset-2">
      <form method="post" accept-charset="utf-8" id="shorten" class="form-inline"><div style="display:none;"><input type="hidden" name="_method" value="POST" /><input type="hidden" name="_csrfToken" autocomplete="off"/></div>
      <div class="form-group">
      <input type="text" name="url" placeholder="Your URL Here" required="required" class="form-control input-lg" id="url" />
      <input type="hidden" name="ad_type" value="2" />
      <button class="btn-captcha" id="invisibleCaptchaShort" type="submit"><img src="Right-Arrow.png" alt="" /></button></div>
      <div style="display:none;"><input type="hidden" name="_Token[fields]" autocomplete="off" /></div>
      </form>
      <div class="shorten add-link-result"></div>
      </div>
      </div>
      </div>
      </div>
      </header>
   
  /section>

다음은 CSS 코드입니다.

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* THIS CSS CODE FOR THE NavBar */
#nav-bar {
    display: flex;
    justify-content: space-between;
    height: 9vh;
    background: #ffd000;
    padding-top: 1rem;
  }
  #brand{
      padding-top: 0.5rem;
      padding-left: 4rem;
      
  }
  
  .nav-links {
    display: flex;
    list-style: none;
    width: 35%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    margin-right: 2rem;
  }
  
  .items {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }
  
  @media screen and (max-width: 950px) {
    .line {
      width: 30px;
      height: 3px;
      background: white;
      margin: 5px;
    }

    .nav-links{
        position: absolute;
    }
    #brand{
        padding-top: 0.5rem;
        padding-left: 0;
    }

    #nav-bar {
      position: relative;
      padding-top: 0;
    }
  
    .hamburger {
      position: absolute;
      cursor: pointer;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
      z-index: 2;
    }
  
    .nav-links {
      background: #5b78c7;
      height: 94.8vh;
      width: 100%;
      margin-right: 0;
      flex-direction: column;
      clip-path: circle(100px at 100% -18%);
      -webkit-clip-path: circle(100px at 100% -18%);
      transition: all 2s ease-out;
      pointer-events: none;
    }
    .nav-links.open {
      clip-path: circle(1000px at 90% -10%);
      -webkit-clip-path: circle(1000px at 90% -10%);
      pointer-events: all;
    }
    .menu {
      opacity: 0;
    }
    .items {
      font-size: 20px;
    }
    .menu:nth-child(1) {
      transition: all 0.5s ease 0.3s;
    }
    .menu:nth-child(2) {
      transition: all 0.5s ease 0.5s;
    }
    .menu:nth-child(3) {
      transition: all 0.5s ease 0.7s;
    }
    .menu:nth-child(4) {
        transition: all 0.5s ease 0.9s;
      }
      .menu:nth-child(5) {
        transition: all 0.5s ease 1.1s;
      }
    .menu.fade {
      opacity: 1;
    }
  }

/* THIS CSS CODE FOR THE FORM */

.s1 {
    height: 90vh;
    width: 100%;
    background: #ffd000;
    overflow: hidden;
}

@media (min-width: 768px){
    header .intro-text {
        padding-top: 200px;
        padding-bottom: 200px;
    }
}

header .intro-text {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
}

@media (min-width: 768px){
    header .intro-text .intro-lead-in {
        font-size: 23px;
        line-height: 23px;
        margin-bottom: 25px;
    }
}

header .intro-text .intro-lead-in {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 22px;
    margin-bottom: 25px;
}

header .intro-text .intro-heading {
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 40px;
}



@media (min-width: 768px){
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
}

@media (min-width: 768px){
    .col-sm-8 {
        width: 66.66666667%;
    }
}



button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

.shorten #shorten .form-group {
    position: relative;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}



@media (min-width: 768px){
    .form-inline .form-group {
        margin-bottom: 0;
        vertical-align: middle;
    }
}

.form-group {
    margin-bottom: 15px;
}

@media (min-width: 992px){
    .shorten #shorten input.input-lg {
        width: 555px;
    }
}

@media (min-width: 768px){
    .shorten #shorten input.input-lg {
        width: 470px;
    }
}

.shorten #shorten input.input-lg {
    background-color: rgba(255,255,255,.35);
    color: #fff;
    border: none;
    border-radius: 19px;
    height: 53px;
    padding-right: 60px;
}
@media (min-width: 768px){
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

@media (min-width: 576px){
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        margin-left: auto;
    }
    
}


.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.form-control {
    display: block;
    width: 60vh;
    height: 60px;
    padding: 6px 12px;
    font-size: 17px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.shorten #shorten button {
    background-color: transparent;
    border: none;
    padding: 0;
    position: absolute;
    right: 7px;
    top: 6px;
}

다음은 JavaScript 코드입니다.

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
  links.forEach(link => {
    link.classList.toggle("fade");
  });
});
이슬람 Elshobokshy :

Z- 색인을 .nav-links.open

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
  links.forEach(link => {
    link.classList.toggle("fade");
  });
});
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* THIS CSS CODE FOR THE NavBar */
#nav-bar {
    display: flex;
    justify-content: space-between;
    height: 9vh;
    background: #ffd000;
    padding-top: 1rem;
  }
  #brand{
      padding-top: 0.5rem;
      padding-left: 4rem;
      
  }
  
  .nav-links {
    display: flex;
    list-style: none;
    width: 35%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    margin-right: 2rem;
  }
  
  .items {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
  }
  
  @media screen and (max-width: 950px) {
    .line {
      width: 30px;
      height: 3px;
      background: white;
      margin: 5px;
    }

    .nav-links{
        position: absolute;
    }
    #brand{
        padding-top: 0.5rem;
        padding-left: 0;
    }

    #nav-bar {
      position: relative;
      padding-top: 0;
    }
  
    .hamburger {
      position: absolute;
      cursor: pointer;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
      z-index: 2;
    }
  
    .nav-links {
      background: #5b78c7;
      height: 94.8vh;
      width: 100%;
      margin-right: 0;
      flex-direction: column;
      clip-path: circle(100px at 100% -18%);
      -webkit-clip-path: circle(100px at 100% -18%);
      transition: all 2s ease-out;
      pointer-events: none;
    }
    .nav-links.open {
z-index:99;
      clip-path: circle(1000px at 90% -10%);
      -webkit-clip-path: circle(1000px at 90% -10%);
      pointer-events: all;
    }
    .menu {
      opacity: 0;
    }
    .items {
      font-size: 20px;
    }
    .menu:nth-child(1) {
      transition: all 0.5s ease 0.3s;
    }
    .menu:nth-child(2) {
      transition: all 0.5s ease 0.5s;
    }
    .menu:nth-child(3) {
      transition: all 0.5s ease 0.7s;
    }
    .menu:nth-child(4) {
        transition: all 0.5s ease 0.9s;
      }
      .menu:nth-child(5) {
        transition: all 0.5s ease 1.1s;
      }
    .menu.fade {
      opacity: 1;
    }
  }

/* THIS CSS CODE FOR THE FORM */

.s1 {
    height: 90vh;
    width: 100%;
    background: #ffd000;
    overflow: hidden;
}

@media (min-width: 768px){
    header .intro-text {
        padding-top: 200px;
        padding-bottom: 200px;
    }
}

header .intro-text {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
}

@media (min-width: 768px){
    header .intro-text .intro-lead-in {
        font-size: 23px;
        line-height: 23px;
        margin-bottom: 25px;
    }
}

header .intro-text .intro-lead-in {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 22px;
    margin-bottom: 25px;
}

header .intro-text .intro-heading {
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 40px;
}



@media (min-width: 768px){
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
}

@media (min-width: 768px){
    .col-sm-8 {
        width: 66.66666667%;
    }
}



button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

.shorten #shorten .form-group {
    position: relative;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}



@media (min-width: 768px){
    .form-inline .form-group {
        margin-bottom: 0;
        vertical-align: middle;
    }
}

.form-group {
    margin-bottom: 15px;
}

@media (min-width: 992px){
    .shorten #shorten input.input-lg {
        width: 555px;
    }
}

@media (min-width: 768px){
    .shorten #shorten input.input-lg {
        width: 470px;
    }
}

.shorten #shorten input.input-lg {
    background-color: rgba(255,255,255,.35);
    color: #fff;
    border: none;
    border-radius: 19px;
    height: 53px;
    padding-right: 60px;
}
@media (min-width: 768px){
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}

@media (min-width: 576px){
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        margin-left: auto;
    }
    
}


.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.form-control {
    display: block;
    width: 60vh;
    height: 60px;
    padding: 6px 12px;
    font-size: 17px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.shorten #shorten button {
    background-color: transparent;
    border: none;
    padding: 0;
    position: absolute;
    right: 7px;
    top: 6px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">


<nav id="nav-bar">
  <div class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <h3 id="brand">BRAND</h3>
  <ul class="nav-links">
    <li class="menu"><a class="items" href="#">Home</a></li>
    <li class="menu"><a class="items" href="#">Contact</a></li>
    <li class="menu"><a class="items" href="#">Create Account</a></li>
    <li class="menu"><a class="items" href="#">Login</a></li>
  </ul>
</nav>

<section class="s1">
  <header class="shorten">
    <div class="container">
      <div class="intro-text">
        <div class="intro-lead-in wow zoomIn" data-wow-delay="0.3s">Hello world</div>
        <div class="intro-heading wow pulse" data-wow-delay="2.0s">Hello world</div>
        <div class="row wow rotateInUpLeft" data-wow-delay="0.3s">
          <div class="col-sm-8 col-sm-offset-2">
            <form method="post" accept-charset="utf-8" id="shorten" class="form-inline">
              <div style="display:none;"><input type="hidden" name="_method" value="POST" /><input type="hidden" name="_csrfToken" autocomplete="off" /></div>
              <div class="form-group">
                <input type="text" name="url" placeholder="Your URL Here" required="required" class="form-control input-lg" id="url" />
                <input type="hidden" name="ad_type" value="2" />
                <button class="btn-captcha" id="invisibleCaptchaShort" type="submit"><img src="Right-Arrow.png" alt="" /></button></div>
              <div style="display:none;"><input type="hidden" name="_Token[fields]" autocomplete="off" /></div>
            </form>
            <div class="shorten add-link-result"></div>
          </div>
        </div>
      </div>
    </div>
  </header>

</section>

https://jsfiddle.net/cf3uz5xm/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

내 프로그램이 멈추고 반복되는 문제를 해결하는 방법은 무엇입니까?

이 문제를 해결하는 방법은 무엇입니까?

배열 내부의 객체,이 문제를 해결하는 방법은 무엇입니까?

python yaml로 내부 변수를 해결하는 방법은 무엇입니까?

이 압축 해제 문제를 해결하는 방법은 무엇입니까?

내 행 항목이 자동으로 삭제된 항목으로 업데이트됩니다. 이 문제를 해결하는 방법은 무엇입니까?

CTE로이 문제를 해결하는 방법은 무엇입니까?

웹 페이지에서 Chrome 확장 프로그램으로 데이터를 보내는 문제를 해결하는 방법은 무엇입니까?

OpenCL이 멈추는 문제를 해결하는 방법은 무엇입니까?

내가 직면 한 C 프로그램 에서이 무한 루프 문제를 해결하는 방법은 무엇입니까?

systemd-resolved로 DNS 문제를 해결하는 방법은 무엇입니까?

JSON 로딩 문제를 해결하는 방법은 무엇입니까?

EOF로 fread txt 문제를 해결하는 방법은 무엇입니까?

ElasticSearch 로그인 문제를 해결하는 방법은 무엇입니까?

Flutter Signing App이 문제를 해결하는 방법은 무엇입니까?

이 ArrayList 문제를 해결하는 방법은 무엇입니까?

이 argparse 고정 문제를 해결하는 방법은 무엇입니까?

이 HTML 간격 문제를 해결하는 방법은 무엇입니까?

이 Binary Tree Deserialize 문제를 해결하는 방법은 무엇입니까?

오버레이 문제를 해결하는 방법은 무엇입니까?

DataGridView에서이 문제를 해결하는 방법은 무엇입니까?

이 "환경 개체" 문제를 해결하는 방법은 무엇입니까?

이 _tkinter.TclError 문제를 해결하는 방법은 무엇입니까?

이 캔버스 fillStyle 문제를 해결하는 방법은 무엇입니까?

내 페이지에 내 이미지가 표시되지 않는 문제를 해결하는 방법은 무엇입니까?

내 phpunit.xml에 KERNEL_DIR을 설정하도록 요청하는 PHPUnit에서이 문제를 해결하는 방법은 무엇입니까?

내가 싫어하지만 간략하게 설명 할 수없는이 사소한 문제를 해결하는 방법은 무엇입니까?

Golang의 "내부 오류 : 중복로드"-이 오류를 해결하는 방법은 무엇입니까?

Jinja2 조건이 표현식 내에서 일치하지 않습니다.이 문제를 해결하는 방법은 무엇입니까?

TOP 리스트

  1. 1

    PrematureCloseException : 연결이 너무 일찍 닫혔습니다.

  2. 2

    MDRotatingPieChart를 회전하면 각도 대신 x / y 위치가 변경됩니다.

  3. 3

    c # 웹 사이트에서 텍스트를 복사하는 방법 (소스 코드 아님)

  4. 4

    jfreecharts에서 x 및 y 축 선을 조정하는 방법

  5. 5

    ArrayBufferLike의 typescript 정의의 깊은 의미

  6. 6

    Ionic 2 로더가 적시에 표시되지 않음

  7. 7

    복사 / 붙여 넣기 비활성화

  8. 8

    Google Play Console에서 '예기치 않은 오류가 발생했습니다. 나중에 다시 시도해주세요. (7100000)'오류를 수정하는 방법은 무엇입니까?

  9. 9

    정점 셰이더에서 카메라에서 개체까지의 XY 거리

  10. 10

    QT Designer를 사용하여 GUI에 이미지 삽입

  11. 11

    java Apache POI Word 기존 테이블 셀 스타일 및 서식이있는 행 삽입

  12. 12

    Kubernetes Horizontal Pod Autoscaler (HPA) 테스트

  13. 13

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

  14. 14

    C # HttpWebRequest 기본 연결이 닫혔습니다. 전송시 예기치 않은 오류가 발생했습니다.

  15. 15

    어떻게 같은 CustomInfoWindow 다른 이벤트를 할 수 있습니다

  16. 16

    rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

  17. 17

    dataSnapShot.getValue () 반환 데이터베이스에 그겁니다 데이터 종료 널 (null)

  18. 18

    ORA-12557 TNS : 프로토콜 어댑터를로드 할 수 없습니다

  19. 19

    JNDI를 사용하여 Spring Boot에서 다중 데이터 소스 구성

  20. 20

    다음 컨트롤이 추가되었지만 사용할 수 없습니다.

  21. 21

    C # Asp.net 웹 API-JSON / XML 변환기 API 만들기

뜨겁다태그

보관