CSS로 바이오 드롭 다운 상자를 만드는 방법

내가 출시 후 가장 최근의 테마 랩 재 설계, 내 탐색 표시 줄에있는 “바이오 드롭 다운”상자에 대해 여러 의견이있었습니다. 배경 이미지와 함께 몇 줄의 CSS로 코딩했습니다..


이 CSS 팁 게시물에서는 자신의 사이트에 유사한 호버 효과를주는 방법에 대해 살펴 보겠습니다..

이 예에서는 텍스트 위젯을 스물 일레븐 테마, WordPress 3.2의 새로운 기본값.

기본적으로 위젯이 포함 된 div 위에 마우스를 올리면 ‘숨겨진’div가 나타나고이 드롭 다운 상자가 나타납니다..

왼쪽 그림에서“Bio Hover”제목이 포함 된 div를 가리 키지 않으면 회색 바이오 상자가 나타나지 않습니다..

선택기

bio 드롭 다운 상자를 넣을 div의 스타일을 지정하기 위해 고유 한 CSS 선택기를 갖는 것은 중요하지 않습니다. 기본적으로 이것은 해당 div에 수반되는 마크 업이 없으면 어쨌든 아무 것도 나타나지 않기 때문입니다. 호버 상태.

스물 일레븐의 경우,“옆으로”클래스를 꾸미는 것만으로도 벗어날 수 있지만, 어쨌든 귀하의 div 중 하나에 바이오 드롭 다운 상자 만 원할 가능성이 높으므로 더 구체적으로 얻을 것입니다.

운 좋게도 WordPress를 사용하면 사용할 수있는 고유 한 CSS 선택기가 많이 나옵니다. 이 예에서는 앞으로 사용할 # test-3을 추출합니다..

노트 : WordPress 설치에 따라 다를 수 있습니다. Chrome 개발자 도구와 같은 도구를 사용하여 선택기를 쉽게 찾을 수 있습니다..

HTML 마크 업

이 예에서 HTML 마크 업은 WordPress 텍스트 위젯에 직접 배치 할 수 있습니다. 이것이 당신이 넣은 것입니다 :

릴랜드!

안녕하세요. 저는 Leland Fiegel이고 Theme Lab의 창립자이자 창립자입니다. 코드, 특히 HTML, CSS 및 WordPress를 작성하는 것을 좋아합니다..

내 정체성을 도용하고 싶지 않다면 사진을 자신의 사진으로 바꾸고 싶을 것입니다. 선택적으로 제거 할 수도 있습니다.

우리는 워드 프레스 위젯을 사용하고 있기 때문에 외부 마크 업이 이미 생성되었습니다. 이것이 전부입니다.

바이오 호버

릴랜드!

안녕하세요. 저는 Leland Fiegel이고 Theme Lab의 창립자이자 창립자입니다. 코드, 특히 HTML, CSS 및 WordPress를 작성하는 것을 좋아합니다..

원시 HTML 사이트에서이 작업을 수행하는 경우 다른 항목이 포함 된 바이오 드롭 다운을위한 일종의 래퍼 (예 : 옆에있는 것)가 필요합니다. 그렇지 않으면 드롭 다운을하기 위해 마우스를 갖다 대지 않아도됩니다..

실제 예 : 내 바이오 드롭 다운 div가 내 탐색 메뉴의 li 태그 안에 있습니다..

CSS의 첫 두 줄

처음 두 줄은 실제로 나머지 부분을 설정 하므로이 섹션을 자체 섹션에 넣습니다..

# text-3 {위치 : 상대; }
.바이오 드롭 다운 {표시 : 없음; }

설명

  • 첫 줄: 바이오 드롭 다운의 래퍼를 상대적 위치로 설정했습니다. 이렇게하면 바이오 드롭 다운 상자를 원래 포장지에 더 가깝게 배치 할 수 있습니다.
  • 두 번째 줄 : 이렇게하면 기본적으로 바이오 드롭 다운 상자가 보이지 않게됩니다. 무언가 위에 마우스를 올려 놓을 때만 표시됩니다.?

노트 : 디스플레이 팬이 아닌 경우 : none; 또는 그것이 당신의 SEO 또는 무언가를 아프다고 생각한다면, 당신은 또한 위치에 따라 무언가를 사용할 수 있습니다. 왼쪽 : -100000em; 기본적으로 페이지에서 멀리 이동하므로 아무도 볼 수 없습니다..

CSS의 나머지

다음 CSS 코드는 바이오 드롭 다운 상자의 모양과 느낌을 처리합니다..

# text-3 : 호버 .bio-dropdown {
디스플레이 : 블록; z- 지수 : 99;
위치 : 절대; 상단 : 25px;
배경 : #ccc; 패딩 : 10px 10px 0 10px;
글꼴 크기 : 11px; 줄 높이 : 18px; 색깔 : # 666;
}

설명

여기서는 텍스트 위젯 위로 마우스를 가져갈 때만 바이오 드롭 다운 상자가 표시되도록 # text-3 선택기를 : hover 의사 클래스와 함께 사용합니다..

  • 첫 줄: 디스플레이 : 블록; 바이오 드롭 다운 상자를 표시합니다. z- 지수 : 99; 상자가 방해받지 않고 다른 모든 것 위에 표시되도록합니다..
  • 두 번째 줄 : 상자를 옆에 약 25 픽셀 정도 배치합니다..
  • 세 번째 줄 : 이것들은 일부 패셔너블 한 스타일이며 배경을 알맞은 패딩으로 밝은 회색으로 설정합니다..
  • 넷째 줄 : 이것은 모두 자명 한 타이포그래피입니다..

노트 : 첫 번째 줄에 대해 위치를 사용하는 경우 : absolute; 왼쪽 : -100000em; 디스플레이 대신 기술 : 없음; 위에서 설명한 것처럼 display : block을 사용하면 필요하지 않습니다 (div는 이미 블록 레벨 요소로 간주되기 때문에). 대신 왼쪽을 사용해야합니다. 0; div를 다시 페이지로 이동.

이미지의 경우 간단한 플로트와 오른쪽 여백.

.바이오 드롭 다운 .photo {float : 왼쪽; 오른쪽 여백 : 10px; }

워드 프레스 통합

쓰레기를 걸러 내지 않고 이것을 동적 WordPress 메뉴 (wp_nav_menu)에 통합하는 좋은 방법을 생각할 수 없습니다. 가장 쉬운 방법은 내비게이션 하드 코딩 및 극복 (내 모든 사이트에서 수행).

이 작업에 필요한 WordPress 메뉴 항목에 마크 업을 삽입하는 방법에 대한 기술이 있다면 의견에서 의견을 듣고 싶습니다. 가능하지만이 CSS 팁 게시물의 범위를 벗어납니다..

결론

예, 사이드 바에 바이오 드롭 다운을 넣고 싶지 않다는 것을 알고 있습니다. 공간이 부족한 공간 (비좁은 내비게이션 바처럼)이 표시 될 공간이없는 곳에 두십시오..

다행히도이 teqhnique를 어디에서나 사용할 수 있습니다. 방금 호버에 전체 div를 표시하는 방법에 대한 기본 기술을 살펴보고 싶었습니다..

너무 복잡하지 않고 멋진 자바 스크립트가 필요하지 않습니다. 첨단 페이딩 효과를 원한다면 자바 스크립트를 사용해야 할 것입니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map