WordPress에서 드롭 다운 메뉴를 만드는 방법

WordPress에서 드롭 다운 메뉴를 만들고 싶습니까? 당신은 올바른 장소에 왔습니다! 이 튜토리얼에서는 전문 드롭 다운 메뉴 디자인을 만드는 방법을 알려 드리겠습니다.

내비게이션 메뉴는 약간의 순간에 스포트라이트가 있습니다. 버거 메뉴에서 메가 메뉴를위한 버거 메뉴에서 스티커 메뉴에 이르기까지 향상된 사용자 경험을위한 스티커 메뉴에 이르기까지, WordPress 사이트에서 내비게이션 메뉴를 제시 할 수있는 방법이 있습니다. 그러나 몇 가지 최상위 항목으로 WordPress에 대한 간단한 드롭 다운 메뉴를 만들려면 어떻게해야합니까? 메가 메뉴 및 버거 메뉴, 드롭 다운 메뉴를 만드는 방법을 배우는 것이 좋습니다. 이것은 당신이 상상할 수있는 것보다 더 많은 사이트에서 유용하게 만들어 질 것이며 (멋진 메뉴가 필요하지는 않습니다), 더 많은 고급 메뉴를 구축하기 시작하는 기초를 제공 할 것입니다.

WordPress를 위해 HTML에서 드롭 다운 메뉴를 만드는 것에 대한 비디오를 시청하려면 PERS PILL PLAY를 시작하고 시작하십시오. WordPress 메뉴 함수에 의해 출력되는 HTML을 대상으로합니다. 이것은 이미 자체 메뉴가있는 타사 테마가 아닌 자신을 코딩하는 테마에서 사용하도록 설계되었습니다. 그러나 메뉴가 드롭이 아닌 타사 테마로 작업하고 있다면이를 추가하려면 자식 테마를 만들고 메뉴 코드를 추가해야합니다. 이 드롭 다운 메뉴 디자인

• HTML. 
드롭 다운 메뉴를 모바일 친화적으로 디자인하십시오. 
• WordPress의 HTML에서 드롭 다운 내비게이션 메뉴를 만들려면
• 이 튜토리얼과 함께 따라야 할 것입니다. 편집기

1. WordPress의 내장 메뉴 기능

가장 먼저 이해해야 할 것은 WordPress 드롭 다운 메뉴가 작동하는 방법입니다. 정적 사이트와 달리 메뉴는 사이트에 하드 코딩되지 않습니다. 대신, WordPress는 PHP 기능을 사용하여 데이터베이스를 쿼리하고 내비게이션 메뉴 항목을 가져온 다음 올바른 구조로 표시합니다.

탐색 메뉴의 각 항목은 실제로 데이터베이스의 WP_Posts 테이블에있는 게시물입니다. 일반 게시물이 아니라 자체 메타 데이터를 포함하여 링크와 링크를 포함하여 텍스트를 포함하여 특수 종류의 게시물입니다.테마에서

header.php 파일을 엽니 다. 이 줄을 찾을 수 있어야합니다. 는 매개 변수에 따라 기능이 약간 다르게 보일 수 있지만 위의 예제를 세분화하고 각 요소가 무엇을하는지 보자. 이 경우 Main-Nav입니다. 그것이 우리가 CSS와 함께 목표로 삼는 것입니다. 1 차 . 하나의 메뉴에만 사용할 수 있습니다. 그러나 추가 매개 변수를 사용하고 싶을 수도 있습니다. WP_NAV_MENU () function

의 WordPress 핸드북 페이지에서 찾을 수있는 추가 매개 변수를 사용할 수 있습니다. 드롭 다운 메뉴에 CSS를 추가하기 전에 WordPress가 메뉴에 대해 생성하는 코드에 익숙해지는 데 도움이됩니다.

wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );<br>

MEMUSIANT AIMINE의 예제입니다. 화면 :

이제 html의 드롭 다운 내비게이션 메뉴가 있습니다.

html에서 드롭 다운 메뉴를 만드는 일부 코드로 구성됩니다. Wordpress의 드롭 다운 메뉴로 시작하기 전에 이해해야 할 코드가 있습니다. Menu-Navbar

및 클래스 li
• 요소는 각각 li 요소가있는 클래스는 내부의 또 다른 li
요소-두 번째 레벨 메뉴 항목입니다. 사용자가 최상위 메뉴 항목을 가리킬 때 드롭 다운하고자하는 것입니다. 드롭 다운 메뉴에 대한 CSS를 코딩하는 이제 우리는 하차 메뉴를 위해 CSS로 대상으로 원하는 요소를 결정할 수 있습니다. 물건 :
페이지가 열리면 두 번째 레벨 메뉴 항목이 숨겨져 있습니다.

사용자가 최상위 항목을 가리킬 때 아래의 두 번째 레벨 항목이 나타납니다.

두 번째 레벨 항목을 기본적으로 숨어

<div class="main-nav"><br>    <ul id="menu-navbar" class="menu"><br>        <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li><br>        <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li><br>        <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a><br>            <ul class="sub-menu"><br>                <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li><br>                <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li><br>                <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li><br>            </ul><br>        </li><br>        <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li><br>        <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li><br>        <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li><br>        <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li><br>        <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li><br>    </ul><br></div><!-- #main-nav --><br>

ret a ever e ever in the hinging the the 기본적으로.

추가 :

이렇게하면 메뉴 내부에 하나의 ul

가 필요하기 때문에 UL 요소 내부에 ul 요소를 숨길 것입니다. 이제 페이지를 열고 두 번째 레벨 항목을 보려고 시도하면 가능하지 않을 것입니다.
• 드롭 다운 메뉴 디자인 : hover에 나타나는 제 2 레벨 항목 생성 이제 우리는 최상위 ul ul 요소 일 때 li 가 표시되도록해야합니다.

  두 번째 레벨 목록에 레이아웃 스타일을 추가하는 스타일 시트를 열고 위치가있는 선을 찾으십시오. 절대

  는 두 번째 레벨 목록 절대 포지셔닝을 제공하여 페이지의 요소 흐름에서 벗어납니다. 상위 레벨 항목의 경우 상단 : 3em

  는 내부의 요소 상단, 즉 상단 레벨 목록 항목의 상단에 대한 목록 상단을 배치합니다. 이 왼쪽 : 0 는 위의 항목에 비해 목록을 왼쪽에 배치합니다. 는 다른 모든 것의 상단에 표시되도록합니다. 나머지 코드는 목록을 포함하여 디스플레이 스타일을 추가하여 그림에 표시를 추가하여 페이지 상단에 표시되도록 표시합니다. 우리는 우리가 최상위 항목을 가리키면

• 작동합니다! 최상위 항목을 가리지면 드롭 다운 메뉴가 표시됩니다. 드롭 다운 메뉴 모바일 친화적 인
위의 간단한 드롭 다운 메뉴 코드는 사이트의 데스크톱 버전에 적합하지만 실제로는 대부분의 사람들이 휴대 전화로 사이트를 방문 할 것입니다.
여기 메뉴는 작은 화면에 맞지 않기 때문에 작은 화면에 CS를 편집하기위한 것입니다. 메뉴.

다음 방법은 다음과 같습니다.

WordPress의 드롭 다운 메뉴 배너에 메뉴 아이콘 추가 먼저, 작은 화면에서 메뉴에 액세스하기 위해 사람들이 탭하는 데 필요한 아이콘을 추가합니다. 파일에 추가하십시오. go :

는 버거 기호를 출력하여 심볼의 HTML 코드를 사용하여 더 큰 화면에서 숨기는 데 사용할 수있는 클래스 내부에 사용됩니다.

버거 메뉴의 CSS를 추가하여 CSS를 스타일에 추가해야합니다. 먼저, 더 큰 화면에서 아이콘을 숨기십시오 :

이제 미디어 쿼리 내부에 메뉴의 CSS를 추가하십시오.

테마에서 다른 클래스와 ID를 사용하는 경우 이것을 편집해야한다는 점에 유의하십시오. 아이콘. 테마에서 라는 새 파일을 추가하고 다음에 추가하십시오 :

이제 스크립트가 테마로 호출되었는지 확인하십시오. 테마의 functions.php

파일에서 스크립트를 수용하는 함수를 추가하십시오 :

이제 모든 파일을 저장하면 작은 화면에 버거 메뉴가 있습니다.

. 드롭 다운 메뉴는 소형의 다중 레벨 메뉴에 유용합니다.

사이트에 여러 레벨이있는 ​​메뉴가 필요하지만 최상위 메뉴 외부에 링크가 많이 필요하지 않으면 드롭 다운 메뉴가 가장 간단한 방법입니다. 내가 이것을 보여주기 위해 사용했던 사이트에는 메뉴에 다른 항목이 아래에있는 하나의 항목 만 가지고 있으며 그 중 세 개만 있습니다. 메가 메뉴를 사용하면 오버 킬링이 있으며 단일 레벨 메뉴는 내가 원하는 모든 것을 표시 할 수 없습니다.

그게 다야! 이것은 html

에서 드롭 다운 메뉴를 만드는 방법입니다. 테마에 이와 같은 메뉴를 추가 할 수 있으면 메뉴에 더 많은 유연성을 제공하고 사용자 경험을 향상시킵니다. 그리고 당신은 몇 줄의 CSS로 그것을 할 수 있습니다.

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