WordPress에서 끈적 끈적한 메뉴를 만드는 방법

웹 사이트 내비게이션 메뉴는 중요한 디자인 요소입니다. 신중하게 고려하지 않고 메뉴를 추가하는 대신 메뉴 디자인, 페이지 공간 할당 및 사용자 상호 작용을 우선 순위로 삼아야합니다. 스크롤 중에 지속적인 브라우저 배치에 인기있는 끈적 끈적한 메뉴는 페이지 위치에 관계없이 지속적인 접근성을 제공합니다. 이것은 사이트 내비게이션을 향상시킵니다.

끈적 끈적한 메뉴를 사용하는시기

스티커 메뉴는 보편적으로 적합하지 않습니다. 그들은 페이지 상단에 작은 단일 라인 메뉴와 함께 가장 잘 작동하며 하위 메뉴가 없습니다. 효과적인 끈적 끈적한 메뉴 예제는 다음과 같습니다

Apple의 웹 사이트 : 간단하고 공간 효율적인 상단 메뉴는 끈적 끈적한 구현에 이상적입니다.

테드 베이커의 사이트 :

싱글 라인 메뉴는 호버에서 메가 메뉴를 확장하여 성공적인 끈적 끈적한 메가 메뉴 통합을 보여줍니다.

• 그러나 끈적 끈적한 메뉴가 항상 적절한 것은 아닙니다. 예를 들어 : Guardian 웹 사이트 :
대형 헤더와 하위 배치 메뉴는 스티커가 만들어지면 과도한 화면 직업을 생성합니다.

IBM 사이트 :
• 드롭 다운이있는 상단 메뉴는 끈적 거리지 않습니다. 끈적 끈적한 맥락에서 잠재적 인 드롭 다운 기능이 충돌하기 때문일 수 있습니다.
최적의 스티커 메뉴 사용에는 단순하고 상위가 높은 단일 라인 메뉴가 포함됩니다. 메가 메뉴는 작동 할 수 있지만, 신중한 구현은 사용자 경험이 좋지 않은 경우 (예 : 스크롤 중 예상치 못한 메가 메뉴 모양)를 피하기 위해 중요합니다.

끈적 끈적한 메뉴 추가 : 실용 가이드

끈적 끈적한 내비게이션 메뉴를 만들기위한 코드를 탐색합시다.

요구 사항 :

편집 가능한 테마 (아래 참조) WordPress 개발 환경 (라이브 사이트 수정을 피하십시오) <.> 코드 편집기. 테마 파일에 대한 액세스

이 예에서는 사용자 정의 테마가 사용됩니다. 타사 테마의 경우 업데이트 중에 편집을 보존하기 위해 어린이 테마를 만들어냅니다. 초기 코드 예

이 웹 사이트를 고려하십시오. 예 :
• 스크롤하면 메뉴가 사라집니다
스크롤 중에 메뉴의 상단 위치를 유지하도록 CSS가 수정됩니다. 파일에는 메뉴 코드가 포함되어 있습니다

<: :>이 코드에는 다음이 포함됩니다 header.php 탐색 및 헤더 배경 (전폭) 헤더 요소 (너비 CSS 포함) 사이트 제목 및 설명. <.> 탐색 메뉴.

테마 CSS는 레이아웃, 플로트 및 색상을 처리합니다.

<div class="header-bg"><br></br><br></br><br></br><br></br><hgroup class="site-name one-third left"><br></br><br></br><h1 id="br-br-php-if-is-singular-array-rmcc-landing-rmcc-signup-is-page-template-page-tripwire-php-br-bloginfo-name-br-br-br-br-else-br-br-a-href-https-www-php-cn-link-c-cf-f-df-d-d-bf-rel-home-title-php-echo-esc-attr-get-bloginfo-name-display-php-bloginfo-name-a-br-br-php-br-br"><br></br><?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {<br?>                       bloginfo( 'name' );<br></br>                 } <br></br>                  else { ?><br></br><a href="https://www.php.cn/link/0783683c446cf52f9df7d90d92bf5239'/' ); ?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ??></a><br></br><?php } ??><br></br></h1><br></br><h2 id="site-description"><?php bloginfo( 'description' ); ??></h2><br></br></hgroup><br></br><br></br><div class="right two-thirds"><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><a class="toggle-nav" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">☰</a><br></br><?php } ??><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><nav class="menu main right"><br></br><div class="skip-link screen-reader-text"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bcontent" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ??></a></div><br></br><?php wp_nav_menu( array( 'container_class' =?> 'main-nav', 'theme_location' => 'primary' ) ); ?><br></br></nav><br></br><?php } ??><br></br><br></br></div> <br></br><br></br><br></br><br></br></div><br></br>

CSS는 끈적 끈적한 효과를 만드는 데 사용됩니다. 이렇게하면 요소가 오프셋 임계 값에 도달 할 때까지 요소가 정상적으로 작동하게됩니다. Codepen 데모는 이것을 실제로 보여줍니다. [CodePen Imbed -Dere -Real Real Codepen Embed Code로 바꾸십시오] 스티커 포지셔닝을 사용하면 초기 (스크롤되지 않은) 상태의 메뉴 위의 배너가 스크롤시 자동으로 사라질 수 있습니다. 이것에 대한 기본 마크 업 :

관련 CSS :

이것은 뷰포트 상단에서 제로 픽셀에서 헤더 (탐색을 포함하는)를 수정합니다. 결론
• 단순하고 상위 배치 메뉴가있는 사이트의 경우 스티커 메뉴는 사용자 탐색을 향상시킵니다. 그러나 헤더 요소 아래의 큰 메뉴 또는 메뉴는 과도한 화면 직업을 유발하여 사용자 경험에 부정적인 영향을 줄 수 있습니다. 결정은 특정 웹 사이트 디자인에 따라 다르지만 끈적 끈적한 메뉴를 추가하는 것은 기대하는 것보다 간단합니다.

위 내용은 WordPress에서 끈적 끈적한 메뉴를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!