이 글의 내용은 부트스트랩 사이드 내비게이션 바의 구현 방법(코드)에 관한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.
머리말
부트스트랩과 함께 제공되는 반응형 탐색 표시줄이 아래로 슬라이드되는 경우가 있습니다. 때로는 Android 서랍 레이아웃과 유사한 측면 슬라이딩 메뉴를 만들어야 합니다. . 사용자 정의 측면 슬라이딩 메뉴는 많은 공식 웹사이트의 측면 슬라이딩을 의미하며 구현 방법이 다르며 일부 공식 웹사이트의 홈 페이지에서만 측면 슬라이딩 효과를 얻기 위해서는 장점과 단점도 매우 분명합니다. 그들은 owl.carousel 슬라이딩 스크린 플러그인을 사용합니다. 개인적으로 저는 이 플러그인이 엄청난 성과를 거두고 있다고 느낍니다. 이 부트스트랩 사이드 슬라이딩 메뉴의 좀 더 전문적인 이름은 모바일 네비게이션 바입니다. 또한 부트스트랩의 특성에 더 부합하는 이 이름을 비교해보겠습니다. 따라서 이 기사에서는 초보자가 더 쉽게 받아들일 수 있는 더 쉬운 방법을 소개합니다.
부트스트랩 측면 탐색 표시줄 구현 원리
측면 슬라이딩 바는 고정된 위치 지정을 사용합니다.
부트스트랩 응답 도구 클래스 visible-sm visible-xs Hidden-xs Hidden-sm을 사용하여 다양한 화면에 적응합니다.
사이드 슬라이딩 바의 사이드 슬라이딩 효과는 jquery 방식을 사용하지 않습니다. css3 변환 속성을 사용하여 p를 이동합니다. 사이드 슬라이딩 애니메이션 효과는 CSS 속성 전환을 사용합니다.
단점: 두 세트의 메뉴를 사용합니다. 하나는 PC 화면에 표시되는 메뉴이고, 다른 하나는 모바일 단말기에 표시되는 모바일 내비게이션 메뉴입니다. 이러한 단점은 상대적으로 명확하며, 관련 없는 태그가 생성된다는 장점이 있습니다.
부트스트랩 탐색 모음 레이아웃
<!--手机导航栏-->
<p id="mobile-menu" class="mobile-nav visible-xs visible-sm">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
</ul>
</p>
<!--pc导航栏-->
<nav class="navbar-inverse visible-lg visible-md" role="navigation">
<p class="container">
<p class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</p>
<p>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
</ul>
</p>
</p>
</nav>
<!--手机导航栏侧滑-->
<p class="nav-btn visible-xs visible-sm">
<a href="#" class="mobile-nav-taggle" id="mobile-nav-taggle">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
</p> 탐색 모음의 레이아웃은 PC용과 휴대폰용의 두 가지 탐색 메뉴를 사용하며 부트스트랩 응답성을 사용하고 도구 클래스 visible-xs visible-sm을 사용하여 PC에서 토글 버튼을 숨깁니다. visible-lg visible-md PC 측에 탐색 표시줄 표시를 구현합니다. visible-xs visible-sm 은 휴대폰 측에 모바일 탐색 표시줄 표시를 구현합니다.
css는 레이아웃 및 측면 슬라이딩 효과를 구현합니다(주요 CSS3 특성 측면 슬라이딩을 위한 변환 및 전환)
코드가 많지 않고 단 10줄만
* {margin:0;padding:0;}
#mobile-menu {position:fixed;top:0;left:0;
width:220px;height:100%;
background-color:#373737;z-index:9999;}
a:hover ,a:focus{text-decoration:none}
.mobile-nav ul li a {color:gray;display:block;padding:1em 5%;
border-top:1px solid #4f4f4f;
border-bottom:1px solid #292929;
transition:all 0.2s ease-out;
cursor:pointer;
#mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;
background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}
.mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}
.show-nav {transform:translateX(0);}
.hide-nav {transform:translateX(-220px);}
/*侧滑关键*/
.mobile-nav-taggle {height:35px;line-height:35px;
width:35px;background-color:#23A1F6;color:#ffffff;
display:inline-block;text-align:center;cursor:pointer}
.nav.avbar-inverse{position:relative;}
.nav-btn {position:absolute;right:20px;top:20px;}css3에는 두 가지 속성이 있다는 점에 주목할 가치가 있습니다.
transform: 회전 div, 요소의 2D 또는 3D 회전을 지원합니다. 속성 값인translateX(X)는 함수 지연 시 Xpx가 이동한 거리입니다.
측면 슬라이딩을 전환하려면 이벤트를 클릭하세요.
$("#mobile-nav-taggle").click(function () {
var mobileMenu = $("#mobile-menu");
if (mobileMenu.hasClass("show-nav")) {
setTimeout(function () {
mobileMenu.addClass("hide-nav").removeClass("show-nav");
}, 100)
} else {
setTimeout(function (){
mobileMenu.addClass("show-nav").removeClass("hide-nav");
}, 100)
}
})요약
사용을 권장하지 않습니다. 두 개의 메뉴 탐색 막대는 단점이 분명합니다. 실제로는 하나의 메뉴 탐색 막대로도 달성할 수 있습니다.
관련 권장 사항:
부트스트랩을 사용하여 접을 수 있는 측면 탐색을 구현하는 방법위 내용은 부트스트랩 사이드 네비게이션 바 구현 방법(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
