부트 스트랩 : 모바일 버전

의 자식으로 최상위 탐색 버튼을 추가하는 방법

나는 부트 스트랩을 사용하여 Wordpress 사이트에 대한 반응이 빠른 테마를 만드는 작업을하고 있습니다. 클릭 이벤트 대신 하위 항목 onhover을 확장하도록 기본 탐색을 설정했습니다. 이를 수행하려면 plugin I am using입니다. 그게 모두 모바일 & 모바일에서 잘 작동합니다. 나는 &이 클릭 이벤트가 필요하다고 생각하는 개발자를 읽었지만 hover 기능을 유지하기를 바랬다.부트 스트랩 : 모바일 버전

내 남은 문제 중 하나는 페이지이며 모바일에서 클릭 할 수없는 최상위 수준의 문제입니다. 휴대 기기에서는 최상위 수준의 탐색을 클릭하면 &이 제대로 접히지 만 상위 항목을 클릭 할 수 없습니다. 그래서 제가하고 싶은 것은 화면 해상도가 태블릿이나 스마트 폰이 될만큼 작고, 상위 항목을 어린이로 포함 할 수 있기 때문에 클릭 할 수있는 것입니다.

그래서 예를 들어 탐색 항목은 바탕 화면이 같을 것이다 태블릿/전화와 같은 낮은 해상도에

CLASSES 
- HISTORY 
- MATH

에 같이 있다면 :

CLASSES 
- CLASSES 
- HISTORY 
- MATH

가 어떻게이를 수, 또는 무엇이야 최고의 대안? 여기 내 탐색 현재 워드 프레스의 모습입니다 :

<div class="navbar navbar-inverse"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a> 
     <div class="nav-collapse"> 
      <ul class="nav"> 
       <?php 
       if (function_exists('wp_nav_menu')) { 
        wp_nav_menu(array(
          'menu'  => 'top_menu', 
          'depth'  => 2, 
          'container' => false, 
          'menu_class' => 'nav', 
          'fallback_cb' => 'wp_page_menu', 
          //Process nav menu using our custom nav walker 
          'walker' => new twitter_bootstrap_nav_walker()) 
        ); 
       } 
       ?> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 
</div>

twitter_bootstrap_nav_walker는 워드 프레스의 Walker_Nav_Menu 클래스를 확장합니다. 부트 스트랩에 필요한 DB에서로드 된 페이지에 적절한 속성을 추가합니다.

다음은 어린이가있는 nav 항목에서 HTML이 어떻게 보이는지를 보여줍니다. data-hover="dropdown"은 마우스를 올려 놓으면 트리가 자동 확장됩니다.

<a href="http://localhost/classes" data-toggle="dropdown" data-hover="dropdown" data-target="#" class="dropdown-toggle js-activated">CLASSES <span class="caret"></span></a>

출처

2013-05-30 Nathan

부트 스트랩을 사용 중이므로 Responsive Utility classes을 빠르고 간단하게 사용할 수 있습니다. "CLASSES"메뉴 항목을 .visible-phone 및 .visible-tablet 클래스로 설정할 수 있습니다.

출처

2013-05-30 18:02:19 ikumen

이것은 꼭 필요한 것 같습니다. 고맙습니다. – Nathan

부트 스트랩 : 모바일 버전

답변

관련 문제