수직 하위 메뉴 탐색의 스타일을 지정하는 3가지 창의적인 방법
게시 됨: 2017-08-17오늘의 게시물에서는 세로 탐색의 하위 메뉴 스타일을 지정하는 세 가지 방법을 제공합니다. 이전 게시물 중 하나에서 데스크탑에서 볼 때 웹 사이트와 겹치는 투명한 수직 탐색을 만드는 방법을 이미 보여주었습니다.
우리가 공유할 예제는 투명한 수직 탐색 위에 만들어질 것입니다. 그렇게 하면 A부터 Z까지 수직 투명 탐색을 즉시 만들 수 있습니다. 이 게시물 전체에서 수직 하위 메뉴에 생명을 불어넣을 수 있는 다양한 스타일 설정을 경험하게 될 것입니다.
예제를 보여주기 전에 변경 사항이 없는 하위 메뉴를 보는 것이 흥미로울 수 있습니다. 평소와 같이 수직 하위 메뉴가 주 메뉴 항목의 설정을 대신합니다. 추가 수정 없이 하위 메뉴는 다음과 같습니다.
이제 다시 만드는 방법을 보여 줄 세 가지 예를 살펴보겠습니다.
첫 번째 예:
두 번째 예:
세 번째 예:
수직 하위 메뉴를 구현하는 일반적인 단계
YouTube 채널 구독
우리가 제공한 다양한 예를 살펴보기 전에 시작하기 전에 필요한 두 가지 일반적인 단계를 처리할 것입니다. 필요에 따라 하위 메뉴 항목을 디자인하기 전에 두 가지 작업을 수행해야 합니다. 하위 메뉴 항목을 메뉴에 추가하고 하위 메뉴 항목의 다른 CSS ID를 찾습니다. 이러한 단계를 거친 후 예제 결과를 얻는 데 필요한 CSS 코드를 공유합니다.
Divi 웹사이트에 CSS 코드를 추가하는 방법에는 세 가지가 있으므로 각 방법을 개별적으로 처리합니다. 그러나 선호하는 방법을 사용하여 각 예제에 대해 CSS 코드를 추가할 수 있습니다.
하위 메뉴 항목 추가
아직 수행하지 않은 경우 가장 먼저 할 일은 하위 메뉴 항목을 추가하는 것입니다. 이 예에서는 '모델' 메뉴 항목에 일부 하위 메뉴 항목만 추가하여 수행 방법을 보여줍니다. 그러나 변경 사항을 다른 메뉴 항목에도 적용할 수 있습니다.
WordPress 대시보드 에 있는 경우 모양 > 메뉴 로 이동합니다 . 이미 메뉴를 만든 경우 해당 메뉴를 사용합니다. 그렇지 않은 경우 새 메뉴를 만드는 것으로 시작하십시오. 그런 다음 메뉴에 기본 메뉴 항목을 추가합니다. 완료되면 하위 메뉴 항목을 추가할 수 있습니다. 하위 메뉴 항목을 추가하고 기본 메뉴 항목 바로 아래에 놓기만 하면 됩니다. 수직 탐색에 추가하려는 모든 하위 메뉴 항목에 대해 이 작업을 수행합니다.
하위 메뉴 항목의 개별 CSS ID 찾기
이 예에서는 각 하위 메뉴 항목에 대해 CSS를 개별적으로 수정해야 합니다. 이것이 우리가 소스에서 CSS ID를 찾아야 하는 이유입니다. 모든 항목에는 다른 ID가 있습니다. 웹사이트에서 특별히 사용되는 CSS ID에 따라 CSS 코드를 수정해야 합니다. 이들은 이 예에서 사용된 것과 다를 수 있습니다. 그렇기 때문에 특히 항목을 수정할 수 있도록 ID를 얻을 수 있는 위치를 간략하게 보여드리겠습니다.
홈페이지로 이동하여 메뉴에 마우스를 놓고 코드 검사를 시작합니다. 선택한 메뉴 항목에 CSS ID가 표시됩니다. 하위 메뉴 목록에 있는 각 CSS ID를 복사하여 나중에 사용할 수 있도록 저장합니다.
두 단계를 완료했으므로 이제 우리가 만든 예제를 생성할 수 있습니다.
첫 번째 예제 만들기
게시물의 이 부분에서는 수직 하위 메뉴의 첫 번째 예를 다시 만드는 방법을 정확히 보여 드리겠습니다. 보시다시피 구조는 정말 간단하지만 웹사이트에 추가 색상을 추가합니다. 기본 메뉴 항목은 단순하며 투명한 배경색을 사용합니다. 물론 하위 메뉴에서 동일한 단순성을 유지할 수 있습니다. 또는 조금 더 주의를 끌도록 선택할 수 있습니다.
사용 중인 색상은 그라데이션 오버레이가 있는 배경 이미지와 일치합니다. 단순하고 겸손한 결과를 얻으려면 하위 메뉴에서 이러한 종류의 색상 일관성을 유지하는 것이 좋습니다.
테마 옵션을 통해 CSS 코드 추가
페이지에 CSS 코드를 추가하는 방법에는 여러 가지가 있습니다. 예를 들어, 특히 한 페이지에 CSS 코드를 추가할 수 있습니다. 테마 옵션이나 테마 커스터마이저를 통해 전체 웹사이트에 추가할 수도 있습니다. 이 예에서는 테마 옵션을 통해 코드를 추가하기만 하면 됩니다. WordPress 대시보드를 사용 중인 경우 Divi > 테마 옵션 > 일반 탭으로 이동하여 다음 코드를 사용자 정의 CSS 상자에 붙여넣습니다.
.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}
코드에서 다음 CSS ID를 하위 메뉴에 적용되는 것으로 바꾸십시오. 이 게시물의 이전 단계에서 이러한 항목을 찾을 수 있는 위치를 알려 드렸습니다.
두 번째 예제 만들기
다음 예에서는 특정 그라디언트 효과를 만드는 방법을 보여줍니다. 사용 중인 다른 색상은 사용 중인 배경 이미지와 일치합니다. 전체 하위 메뉴에 그라데이션 배경을 추가하고 하위 메뉴 항목 각각에 개별 투명 색상을 추가했습니다.
특히 한 페이지에 대한 CSS 코드 추가
이 코드를 전체 웹사이트에 추가하고 싶을 수도 있지만 이 예제를 특히 한 페이지에 적용하는 방법을 보여드리겠습니다. 특히 한 페이지에 CSS 코드 라인을 추가하고 싶지 않다면 테마 옵션(첫 번째 예와 같이) 또는 테마 사용자 지정 프로그램(다음 예와 같이)을 통해 자유롭게 추가할 수 있습니다.
하위 메뉴 디자인을 추가할 페이지를 열거나 생성하여 시작합니다. 이제 Divi 빌더의 오른쪽 모서리에 있는 다음 버튼을 클릭합니다.
표시되는 화면에서 사용자 정의 CSS 필드에 다음 CSS 코드 행을 복사하여 붙여넣습니다.
.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 
CSS 코드에서 다음 하위 메뉴 항목을 자신의 것으로 교체합니다.
세 번째 예제 만들기
만드는 방법을 공유할 마지막 예는 호버 효과가 있습니다. 이 호버 효과를 하위 메뉴에 추가하면 주 메뉴를 너무 바쁘게 만들지 않고도 청중과 좋은 방식으로 소통할 수 있습니다. 하위 메뉴는 주 메뉴 항목 위로 이동할 때만 나타납니다. 따라서 방문자는 효과에 지속적으로 직면하지 않습니다.
테마 커스터마이저를 통해 한 페이지에 대한 CSS 코드 추가
마지막 예제에서는 Theme Customizer를 통해 CSS 코드를 추가하는 방법을 보여드리겠습니다. WordPress 대시보드 에 있는 경우 모양 > 사용자 정의 > 추가 CSS >로 이동하여 다음 코드 줄을 복사하여 붙여넣습니다.
.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}하위 메뉴 항목의 CSS ID를 가져오고 예제의 ID를 귀하의 것으로 교체합니다.
그게 다야! 이제 디자인이 위에 표시된 예와 같아야 합니다.
마지막 생각들
이 게시물에서는 수직 탐색을 창의적으로 활용하는 방법에 대한 몇 가지 가능성을 보여주었습니다. 더 구체적으로; 수직 하위 메뉴를 멋지게 만드는 방법을 보여 드렸습니다. 이 포스트를 차근차근 따라하시면 수직 서브 메뉴를 완벽하게 재현하실 수 있을 것입니다. 질문이나 제안 사항이 있는 경우 아래의 의견 섹션에서 알려주십시오!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!