단일 행 탐색 오버플로

나는 하나의 탐색 항목 행이있는 사이트가 있습니다. 페이지 폭을 줄이면 항목이 두 번째 줄로 떨어집니다. 페이지가 너무 좁아서 목록 항목을 모두 저장할 수 없을 때 '더 많은'드롭 다운을 만드는 BBC의 매우 영리한 솔루션을 보았습니다. 누구도 jquery에 대한 자습서 또는 플러그인을 발견했는지 궁금합니다.단일 행 탐색 오버플로

편집

예 :`

<nav> 
    <ul> 
     <li><a href="">Lorem ipsum.</a></li> 
     <li><a href="">Reprehenderit, similique.</a></li> 
     <li><a href="">Est, nobis.</a></li> 
     <li><a href="">Incidunt, sequi.</a></li> 
     <li><a href="">Nulla, ducimus.</a></li> 
     <li><a href="">Nulla, nobis.</a></li> 
     <li><a href="">Deserunt, aspernatur?</a></li> 
     <li><a href="">Minima, tempore.</a></li> 
    </ul> 
</nav>`

페이지가 내가 찾고 좁은 얻기 시작하면`

<nav> 
    <ul> 
     <li><a href="">Lorem ipsum.</a></li> 
     <li><a href="">Reprehenderit, similique.</a></li> 
     <li><a href="">Est, nobis.</a></li> 
     <li><a href="">Incidunt, sequi.</a></li> 
     <li><a href="">Nulla, ducimus.</a></li> 
     <li><a href="">Nulla, nobis.</a></li> 
     <li><a href="#">More</a> 
      <ul> 
       <li><a href="">Deserunt, aspernatur?</a></li> 
       <li><a href="">Minima, tempore.</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

` 즉. 바깥 ul보다 더 넓은 것은 드롭 다운으로 스타일을 지정할 수있는 'More'로 옮겨집니다.

감사합니다.

제이미

출처

2014-03-29 Jamie

CSS의 @media 쿼리는, 어쩌면 조금 jQuery를 당신이 필요합니다. 먼저 몇 가지 코드 샘플을 제공하지 않아도 작업 솔루션을 제공 할 수는 없습니다.

출처

2014-03-30 00:00:25 Mark

저는 Wordpress Theme에 대한 CSS를 유지하고 싶기 때문에 '@ media'를 사용하지 않고 상대적으로 잘릴 수 있어야합니다. – Jamie

왜 CSS에서 물건을 지키고 싶습니까 ?? 이 일을 어떻게 계획하고 있습니까? – Mark

미디어 쿼리가 무엇인지 알고 계십니까? 그들은 꽤 졸졸하며, 실제로 유연하게 만들어졌습니다. ... – Mark

반응 형 디자인 및 미디어 쿼리를 사용하여 만들 수 있습니다. 시작하려면 Bootstrap 또는 similars와 같은 일부 CSS 프레임 워크를 사용하는 것이 좋습니다.

출처

2014-03-30 00:03:15

단일 행 탐색 오버플로

답변

관련 문제