/ / Foundation 5 - zurb-foundation에서 최상위 막대와 탭 막대를 결합하는 방법

Foundation 5 - zurb-foundation에서 최상위 막대와 탭 모음을 결합하는 방법

결합이 가능한가요? 탑 바탭 바 캔버스 벗어난가요?

이: 여기에 이미지 설명을 입력하십시오.

모바일 크기로 크기를 조정하면 다음과 같이됩니다.

여기에 이미지 설명을 입력하십시오.

하지만 탭바 (오프 캔버스)도 포함 시켜서 이렇게됩니다.

여기에 이미지 설명을 입력하십시오.

어떻게 할 수 있을지 상상할 수 없었습니다.내 사용자 정의 메뉴 아이콘을 만들어 상단 바 안에 넣으려고했지만 요소가 사라지고, 여백 / 패딩이 작동하지 않았고 상대적인 위치가 엉망이었습니다. 그래서 여기에 물어 보았습니다. 너는 더 좋은 생각이있어.

답변:

답변 № 1 3

당신이 그것을 할 수있는 두 가지 방법이 있습니다. 미디어 쿼리 또는 다른 방법은 가시성 클래스를 사용하는 것입니다. 예를 들어 상단 바 코드에서 class = "show-for-medium-up"을 추가하면 중간 화면에서 상단 표시가 보이지만 작게는 숨겨집니다.

<nav class="top-bar show-for-medium-up" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">........................

그런 다음 offcanvas 코드를 추가하고 class = "hide-for-medium-up"클래스를 추가합니다.

<div class="off-canvas-wrap hide-for-medium-up">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>

<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>

이렇게하면 화면 크기에 따라 다른 스타일을 구현할 수 있습니다. 더 자세한 정보는 가시성 클래스


관련 질문


댓글 (0)

의견을 추가하다