>

현재 화면이 너무 작아지면 축소 된 탐색 링크를 표시하는 버튼을 만들려고합니다. 버튼은 구체화되지만 화면이 작아지면 나타나는 것 외에는 아무것도 수행 할 수 없습니다.

토글 버튼은 버튼에 흰색 "-"줄만 있으면 작은 '>'화살표를 만듭니다.

jquery와 bootstrap의 js 파일이 body 태그의 맨 아래에 포함되어야한다는 것을 깨달았지만, 지금까지 추가 된 것에서도 운이 없었습니다. 도움을 주셔서 감사합니다.

https://codepen.io/Tintinator/pen/NvKRvO

<div class="navbar navbar-default navbar-static-top navbar-inverse">
  <div class="container">
    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-
      toggle="collapse" data-target=".navbar-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
        <span class="icon-bar"></span>>
      </button>
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>
    <!-- NAV LINKS -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav" id="navilinks">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
      <div class="medialinks hidden-sm hidden-xs">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>
  </div>
</div>

  • 답변 # 1

    네비게이션 높이 (50px)를 제한하여 데이터가 제대로 확장되지 않는 잘못된 데이터 타겟 속성과 CSS 규칙이 있습니다. 그리고 부모 요소는 div가 아닌 탐색해야한다고 생각합니다.

    대신 사용해보십시오 :

    <!-- NAVIGATION BAR -->
    <nav class="navbar navbar-default navbar-static-top navbar-inverse">
      <div class="container">
        <!-- BRAND, BUTTON -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" aria-expanded="false">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <img src="./newnewfoy.png">
          </a>
        </div>
        <!-- NAV LINKS -->
        <div class="navbar-collapse collapse" id="navilinks">
          <ul class="nav navbar-nav" >
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Event</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Volunteer</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Sponsors</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Contact</a>
            </li>
          </ul>
          <div class="medialinks hidden-sm hidden-xs">
            <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
            <a id="IGcon" class = "mediacon" href="www.google.com"></a>
            <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
            <a id="FBcon"  class="mediacon" href="www.google.com"></a>
          </div>
        </div>
      </div>
    </nav>
    
    

    https://codepen.io/anon/pen/oevYvp

  • 답변 # 2

    이것인지 확실하지 않지만 플러그인을 추가 했습니까? (이미지 참조)

  • 답변 # 3

    코드 펜에서 몇 줄을 수정했습니다. 코드와 트릭을 수행하는 것 같습니다. 데이터 타겟을 클래스에서 #navbar의 ID로 변경 한 다음 #NAV 링크의 초기 div를 #navbar의 ID를 포함하도록 업데이트했습니다. 나는 당신을 위해 당신의 코드 펜을 포크했습니다. https://codepen.io/ckroll17/pen/qXWqbV

    <!--           
          Changed button to data-target to #navbar
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                <img src="./newnewfoy.png">
              </a>
            </div>
            <!-- NAV LINKS -->
            <!-- Added an id of navbar to the class directly below -->
            <div id="navbar" class="navbar-collapse collapse">
    
    

관련 자료

  • 이전 c++ - 포인터에 주소를 리터럴로 할당 하시겠습니까?
  • 다음 .net - 컨트롤러가보기에서 패널의 ID에 액세스 할 수 없습니다