사이드 바는 기본적으로 데스크톱에서 열리고 모바일에서 닫힙니다.

9

사이드 바 / 탐색 컨텐츠 (부트 스트랩 사용)를 데스크탑에서 기본적으로 표시 (확장)하고 모바일에서 기본적으로 닫히고 모바일에서만 아이콘이 표시되도록하는 데 어려움을 겪고 있습니다. 나는 이것을 작동시키지 않는 것 같습니다.

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

이 자바 스크립트 코드를 사용해 보았지만 아무 소용이 없습니다.

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
javascript  html  css  bootstrap-4  responsive-design 
— 프랭크도
소스
안녕하세요, 귀하의 질문에 정확한 해결책으로 의견을 추가했습니다. 코드와 출력을 확인할 수 있도록 코드 펜을 만들었습니다. 봐주세요
— Priyanka
다른 CSS가 있습니까?
— Codeply-er
class미디어 쿼리에서 간단한 추가 및 스타일 지정width:600
— Awais

답변:

0

여기 axactly 필요한 링크가 있습니다. 나는 당신을 위해 펜을 만들었습니다. 아래 링크를 살펴보십시오.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" 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="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
  </div>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— 프리 얀카
소스
0

외부 컨텐츠에 관한 bs4 문서를 기반으로 예제를 작성했습니다.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

이 예제에서 코드는 오른쪽 대신 상단에서 축소됩니다. 실제로 나는 휴가 중이며 귀하의 필요에 맞게 예제를 완성하려고 노력합니다.

추가 자바 스크립트 :

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

나는 바이올린 바이올린 을 만들었습니다. 작동 중임을 보려면 jsfiddle에서 내부 창 크기를 조정하십시오.

— MattOpen
소스
0

장치와 상관없이 항상 현재 Javascript 코드가 실행됩니다. 필요한 것은 장치가 컴퓨터인지 휴대폰인지 확인하는 방법입니다.

한 가지 방법은 브라우저를 사용하는 것입니다 UserAgent.

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

또는 단순히 창의 너비에 의존 할 수도 있습니다 (그러나 작은 데스크탑 창은 모바일 버전처럼 취급됩니다).

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— 아니스 R.
소스
사용자 에이전트 문자열을 스니핑하면 유지하기 어려운 코드가 생성됩니다. 미디어 쿼리가 훨씬 좋습니다.
— kmoser
하나의 문자열에 대해 "유지하기 어려운"것이 무엇입니까? 어쨌든이 검사를 함수로 묶을 수 있으므로 문자열을 업데이트해야 할 때마다 한 줄의 코드 만 편집 할 수 있습니다.
— Anis R.
또한 CSS 미디어 쿼리를 사용하여 OP가 원하는 클래스 이름을 전환 할 수 없습니다.
— Anis R.
새 장치가 생성되면 장치의 사용자 에이전트 문자열이 시간이 지남에 따라 변경됩니다. 결과적으로 새로운 장치가 도입 될 때마다 코드가 깨집니다. 물론, 당신은 그것을 기능으로 포장 할 수는 있지만 새로운 장치가 도입 될 때마다 변경해야합니다. 사용자 에이전트 문자열이 아닌 크기 (CSS 미디어 쿼리 사용)로 장치를 타겟팅하는 것이 좋습니다. 새 장치가 도입 될 때 업데이트가 필요하지 않습니다. OP는 클래스 이름을 토글하고 싶지는 않았습니다. 그것은 최선의 시도였으며 미디어 쿼리보다 열등하다고 생각했습니다.
— kmoser
0

먼저 몇 가지 사항 만 :

  1. 사이드 바를 말했지만 마크 업은 실제로 사이드 바처럼 보이지 않습니다. 반응 형 상단 탐색 메뉴처럼 보입니다. 나는 최선을 다해 그것을 이해하려고 노력할 것이고, 그것이 당신이 정말로 원하는 것이라면, 작동하는 사이드 바를 보여줄 것이다.

  2. 메뉴 항목은 (목록 항목) <ul>없이 (정렬되지 않은 목록 <li>)에 있습니다. bootsrap js / css는 <li>제대로 작동하기 위해 s가 필요할 것입니다. 기술적으로 는 html이 <ul>없는 <li>유효한 HTML이지만 a 안에 허용되는 유일한 내용 <ul>은 <li>s 내에 앵커 (또는 다른 것)가 s <ul>내에 포함 <li>되어 있어야 유효합니다.

  3. 소셜 아이콘으로 정확히 무엇을하려고하는지 확실하지 않으므로 합리적인 것처럼 약간 조정했습니다.

  4. 나는 추가 overflow-y: scroll;온 <html>당신은 작은 화면에서 메뉴를 열 때 스크롤이 추가됩니다 경우가 원인이 이동하지 않도록 요소입니다. 사이트 디자인 및 콘텐츠 레이아웃에 따라 필요하지 않을 수 있습니다.

매우 기본적인 반응 형 메뉴부터 시작하겠습니다.

기본 부트 스트랩 응답 메뉴

코드 스 니펫 표시

좋아요, 괜찮아 보이지만 메뉴에 이미지가 있습니다. 메뉴에 이미지를 넣고 스타일을 지정할 약간의 CSS를 줄 것입니다. 그런 다음 이미지와 함께 메뉴 요소를 멋지게 배치하려면 약간의 추가 CSS가 필요합니다.

  1. 햄버거 버튼을 탐색 표시 줄의 맨 아래에 놓으십시오. 200 픽셀의 그림을 사용하고 몇 렘을 빼겠습니다. 햄버거를 맨 위에 놓도록 또는 버튼을 열었을 때도 햄버거가 내비의 맨 아래에 달라 붙 도록 top: calc(100px - 1rem);하려면 top: 1rem;을 변경할 수 있습니다 bottom: 1rem;. 또는 햄버거를 수직 가운데에 놓는 부트 스트랩 기본값을 사용하려면 전체 규칙을 삭제하십시오.

  2. 축소되지 않은 경우 메뉴 항목을 메뉴 막대의 맨 아래에 놓으십시오.

  3. 하단에 소셜 아이콘을 배치하고 오른쪽으로 밀어 넣습니다.

  4. 위의 숫자 2와 3은 메뉴가 축소되지 않은 경우 중간 중단 점 위에 만 적용되어야하므로 768px (부트 스트랩의 중간 중단 점)을 대상으로 미디어 쿼리에 배치합니다. 부트 스트랩 sass breakpoint mixin으로도 가능하지만 여기서는 일반 CSS를 사용합니다. CSS의 @media 쿼리 규칙 내에서 이러한 요소의 위치를 ​​볼 수 있습니다.이 요소를 변경하여 막대의 맨 위로 옮길 수 있습니다. 또는 해당 규칙을 제거하여 메뉴 요소를 세로로 가운데에 놓고 소셜 아이콘을 그 아래에 배치하는 부트 스트랩 기본값으로 되돌립니다. 아이콘 이 다른 메뉴 항목과 같이 메뉴에 바로 들어가도록하려면 메뉴의 <li>요소에 소셜 아이콘을 넣을 수도 <ul>있습니다.

메뉴에 이미지가있는 경우

코드 스 니펫 표시

좋아,하지만 당신은 그것이 사이드 바라고 말했다. 나는 부트 스트랩에 익숙하지 않지만 v3이나 v4가 기본적으로 사이드 바 탐색을 제공하지 않는다는 것을 수집합니다. 여기에서 몇 가지 부트 스트랩 사이드 바 자습서를 찾을 수 있습니다 . 위에서 링크 된 자습서에서 가장 기본적인 버전을 사용하여 예제를 작성했습니다.

접을 수있는 사이드 바

코드 스 니펫 표시

— Veneseme Tyras
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.