웹 사이트를 탐색 한 적이 있으며 탐색 메뉴가 항상 상단에 표시된다는 사실을 알고 있습니까?

원칙적으로 탐색 메뉴는 페이지를 스크롤 할 때 사라지는 방식으로 표시됩니다. 항상 표시되는 내비게이션 메뉴는 사용자가 아래로 스크롤하는 방식과 상관없이 플로팅됩니다.

이 자습서에서는 WordPress 블로그에서 플로팅 메뉴를 쉽게 만드는 방법을 보여줍니다.

아직 WordPress에서 웹사이트나 블로그를 만들지 않았다면 다음 7단계로 WordPress 블로그 설치 방법을 참조하시기 바랍니다. 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면

완료 되었다면 오늘 우리가 무엇을 염려하는지 살펴 보겠습니다.

1 방법 : 플러그인을 사용하여 WordPress에 플로팅 메뉴를 추가하는 방법

이 방법은 더 쉽고 빠릅니다. 탐색 메뉴를 아직 설정하지 않은 경우 그것을하는 방법을 배우다.

가장 먼저해야 할 일은 플러그인을 설치하고 활성화하는 것입니다. " 스티커 메뉴 (또는 아무것도!) 우리는 스크롤을 ". 플러그인 설치 방법을 모른다면 우리의 튜토리얼을 읽을 수있다..

활성화 후 " 설정»스티키 메뉴 이 플러그인의 설정을 구성합니다.

먼저 플로팅하려는 탐색 메뉴의 CSS ID를 입력해야합니다.

사용 된 CSS를 찾으려면 브라우저의 "검사"도구를 사용해야합니다.

웹 사이트로 이동하여 마우스를 탐색 메뉴로 이동하십시오. 그런 다음 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택해야합니다.

발견하여 더 나아가십시오 노란색 연필로 워드 프레스 테마를 사용자 지정하는 방법

기본적으로 브라우저 화면이 분할되고 탐색 메뉴의 소스 코드가 표시됩니다. 다음과 비슷한 줄을 찾아야합니다.

이 예에서 탐색 메뉴의 CSS ID는 " 사이트 탐색 ".

계속해서“# site-navigation”과 같이 플러그인 설정에서 메뉴의 CSS ID를 입력합니다.

플러그인 설정의 다음 옵션은 화면 상단과 플로팅 탐색 메뉴 사이의 공간을 설정하는 것입니다. 메뉴가 숨기고 싶지 않은 항목과 겹치는 경우이 설정을 사용할 수 있습니다. 그렇지 않으면이 설정을 무시하십시오.

그런 다음 "Check Bar Admin"옵션 옆에있는 상자를 클릭해야합니다. 이렇게하면 플러그인이 로그인 한 사용자를 위해 추가되는 WordPress 도구 모음을위한 공간을 추가 할 수 있습니다.

설정 페이지의 다음 옵션을 사용하면 사용자가 모바일 장치와 같은 작은 화면을 사용하여 웹 사이트를 방문하는 경우 탐색 메뉴를 숨길 수 있습니다.

이 메뉴가 모바일 및 태블릿 장치에서 어떻게 표시되는지 테스트 할 수 있습니다. 마음에 들지 않으면이 옵션에 780px를 추가 할 수 있습니다.

너무 발견 모바일 워드 프레스에 대한 응답 메뉴를 만드는 방법

"를 클릭하는 것을 잊지 마십시오 설정 저장 변경 사항을 저장합니다.

이제 웹 사이트를 방문하여 플로팅 탐색 메뉴가 실제로 작동하는지 확인할 수 있습니다.

방법 2 : 탐색 메뉴를 수동으로 추가하는 방법

이 방법을 사용하려면 사용자 정의 CSS 코드를 워드 프레스 테마.

먼저 방문해야합니다 " 외관> 사용자 정의 워드 프레스 커 스터 마이저를 시작합니다.

클릭 추가 CSS 왼쪽 창에서이 CSS 코드를 추가하십시오.

# 사이트 탐색 {배경 : #fff; 높이 : 60px; Z- 색인 : 170; 마진 : 0 자동; 국경 - 하단 : 고체 #dadada를 1px; 폭 : 100 %; 위치 : 고정; 상단 : 0; 왼쪽 : 0; 오른쪽 : 0; 텍스트 정렬 : 센터; }

"교체 # 사이트 탐색 탐색 메뉴의 식별자로«버튼을 클릭하십시오. 레지스터 ".

이제 웹 사이트를 방문하여 플로팅 탐색 메뉴가 실제로 작동하는지 확인할 수 있습니다.

탐색 메뉴가 일반적으로 웹 사이트 헤더 뒤에 표시되는 경우이 CSS 코드가 웹 사이트 제목 및 헤더와 겹칠 수 있습니다.

다음 코드를 사용하여 머리글 영역에 여백을 추가하여 쉽게 조정할 수 있습니다.

.site 브랜딩 {마진 - 맨 : 60px; }

여기에서 튜토리얼이 끝나면 웹 사이트에 플로팅 메뉴를 만들거나 추가 할 수 있습니다.

다른 것을 찾고 계시다면 워드 프레스 플러그인 메뉴를 관리할 수 있는 몇 가지 워드 프레스 플러그인 이 작업에 전념하는 프리미엄. 

1. 메뉴 영웅

이 플러그인을 사용하면 몇 가지 매우 쉬운 단계를 통해 나만의 맞춤형 WordPress 메뉴를 만들 수 있습니다. 특히 우아하고 전문적인 워드프레스 메뉴를 쉽고 직관적으로 만들 수 있습니다. 가장 복잡한 기능이 풍부한 메가 메뉴부터 가장 단순한 드롭다운 메뉴까지, 워드 프레스 플러그인 HeroMenu 모든 유형의 메뉴를 설정하고 몇 분만에 실행합니다.

PC, 태블릿 및 스마트 폰에서 완벽하게 작동하는 기능, 사용하기 쉽고 사용자 정의 가능한 컨텐츠, 고유 한 메뉴 스타일을 추가하기위한 사용자 정의 CSS, 메가 메뉴 디자이너, 지원되는 브라우저 : Chrome, Firefox, Safari , Opera, IE9 등이 있습니다.

다운로드 | 데모 | 웹 호스팅

2. 매끄러운 메뉴

매끄러운 메뉴 WordPress 용 메뉴 플러그인이 아닙니다. 풍부한 콘텐츠, 다양한 스타일 옵션 및 애니메이션 효과가있는 사이드 바는 물론 무제한으로 여러 메뉴 레벨을 만드는 데 사용할 수 있습니다.

각 메뉴 레벨은 배경색, 이미지, 비디오, 사용자 정의 글꼴 등으로 사용자 정의 할 수 있습니다. 이 플러그인은 완벽하게 반응하며 메뉴 항목에 대해 45 개 이상의 애니메이션이 있습니다.

다운로드 | 데모 | 웹 호스팅

3. 8Degree Fly 메뉴

8도 플라이 메뉴는 워드 프레스 플러그인 귀하의 웹사이트에 캔버스 메뉴를 추가하여 귀하의 정보를 간단하게 강조 표시할 수 있는 프리미엄입니다. 기본 WordPress 메뉴 기능을 사용하여 메뉴를 만듭니다.

아이콘, 메뉴 슬로건, 의사 그룹화 헤더 및 긴 설명과 같은 추가 요소를 기본 메뉴 항목에 추가 할 수 있습니다. 또한 WYSIWYG 편집기가 제공되어 사용자에게 친숙한 방식으로 자세한 설명을 이해하는 데 도움이되며이 편집기를 사용하면 짧은 코드도 사용할 수 있습니다.

다운로드 | 데모 | 웹 호스팅

다른 추천 자료

블로그 나 웹 사이트의 메뉴를 만들거나 사용자 정의하는 데 더 나아가려면 아래 링크를 참조하십시오.

• 탐색 메뉴에 스타일을 추가하는 방법
•  어떻게 워드 프레스 메뉴에서 타이틀 속성을 추가하려면
• 블로그에 메가 메뉴를 만들기위한 8 WordPress 플러그인

결론

여기 ! 이것으로이 튜토리얼을 마치겠습니다. WordPress 블로그에 플로팅 메뉴를 추가 할 수 있기를 바랍니다. 우리는 당신을 초대합니다 이 기사를 소셜 네트워크에서 친구들과 공유하십시오.

제안이나 의견이 있으면 언제든지 환영합니다. 그리고 WordPress를 처음 사용한다면 이것을 상담하십시오 자원.

...