집 > 지침 > 웹용 풀아웃 메뉴 만들기. 풀아웃 사이드 메뉴. 아이콘이 있는 세로 메뉴


웹용 풀아웃 메뉴 만들기. 풀아웃 사이드 메뉴. 아이콘이 있는 세로 메뉴




사이트 탐색 메뉴, 사용자 프로필 메뉴 등과 마찬가지로 숨길 수 있으며 클릭하고 마우스를 올리면 표시됩니다. 어떤 사람들은 이것이 페이지의 유용성에 영향을 미친다고 말할 수도 있습니다. 페이지가 더 깔끔해져서 탐색하기가 더 쉬워지기 때문에 그렇게 생각하지 않습니다. 사람은 산더미 같은 링크 속에서도 혼란스러워하지 않습니다.
오늘은 기본적으로 페이지에 숨겨져 있는 슬라이드 패널 모음을 준비했습니다. 메뉴를 호출하려면 해당 아이콘을 클릭하거나 마우스를 올려야 합니다. 이 기술은 한 화면에 많은 요소를 배치하는 것이 불가능한 모바일 애플리케이션에서 웹 디자인에 도입되었습니다. 시간이 지나면서 이러한 패널은 웹사이트로 이전되었습니다. 이 컬렉션은 무엇보다도 모바일 개발자에게 유용할 것입니다. 화면 해상도가 작으면 바로 이런 팝업 내비게이션이 나오겠지만, 보통의 대형 모니터에서는 누구나 익숙한 일반적인 메뉴를 만들 수 있습니다. 이렇게 하면 모바일 장치를 사용하는 사람이 오랫동안 슬라이드 패널을 사용하는 데 익숙해졌기 때문에 사이트에서 혼란을 겪지 않을 것입니다. 왜냐하면 스마트폰의 모든 응용 프로그램이 동일한 원리로 작동하기 때문입니다.
이 컬렉션에는 모바일 사이트 전용으로 설계된 플러그인이 포함되어 있어 와이드 모니터에서 사용하는 것은 부적절하다는 점을 알려드리고 싶습니다. 모든 웹 사이트에 적합한 범용 패널도 있지만. 데모를 시청하고 필요에 맞는 것을 선택하세요.
드롭다운 패널은 에서 작동합니다. 웹사이트에 이러한 메뉴를 구현하는 것은 어렵지 않으며 개발자의 웹사이트에는 제품 사용 방법에 대한 자세한 지침이 포함되어 있습니다.
곧 우리는 Postovoy 웹사이트의 재설계를 계획하고 있으며 레이아웃에 아래 제시된 jquery 플러그인 중 하나를 사용할 것입니다.
그래서. 귀하의 웹사이트를 위한 20개의 jquery 드롭다운 슬라이드 패널 플러그인 컬렉션을 소개합니다. 댓글을 남기는 것을 잊지 마세요.

스와이프 가능한 사이드 메뉴 슬라이드 패널 형태의 jquery에 있는 귀여운 슬라이딩 탐색 메뉴입니다. 모바일 사이트와 일반 사이트 모두에 이상적입니다.

캔버스 외부 탐색을 위한 전환 3D를 포함한 다양한 애니메이션 효과와 함께 표시되는 슬라이드 패널을 구성할 수 있는 매우 강력한 플러그인입니다. 플러그인에는 14개의 애니메이션 효과가 포함되어 있습니다.

jPanelMenu탐색 패널은 iOS 애플리케이션 스타일로 디자인되었습니다. 모바일 사이트 개발을 용이하게 해주는 쉽고 빠른 메뉴입니다.

Google Nexus 메뉴 다시 만들기 슬라이딩 패널은 Google Nexus 메뉴와 유사하게 디자인되었습니다.

bigSlide - Jquery의 슬라이드 탐색 패널 슬라이드 패널은 모바일 사이트와 일반 사이트 모두에 적합합니다. 호출하려면 세 개의 줄무늬가 표시된 아이콘을 클릭해야 합니다.

Multi-Level Push MenuJqutry 플러그인은 bigSlide와 유사하게 작동합니다. 아이콘을 클릭하면 패널이 호출됩니다. 이 메뉴의 장점은 다단계 구조를 지원한다는 것입니다.

상자 뚜껑 메뉴 3D 효과가 있는 매우 아름다운 탐색 슬라이드 바입니다.

애니메이션 테두리 메뉴 화면 모서리에 있는 더하기 기호를 클릭하면 아이콘이 있는 작은 사이드바가 나타납니다. 숨기려면 "-" 기호가 있는 아이콘을 클릭해야 합니다.

Snap.js 슬라이드 패널은 모바일 장치용으로 설계되었습니다. 메뉴는 마우스 커서로 화면을 드래그하거나, 모바일 장치의 경우 손가락으로 드래그하면 호출됩니다.

슬라이드 및 푸시 메뉴 |

MenyJquery 플러그인을 사용하면 웹 사이트에 3D 효과가 있는 멋진 탐색 슬라이드 바를 구현할 수 있습니다.

mb.jquery 다른 패널과 달리 이동하지 않고 화면 위에 나타납니다. HTML, 텍스트 또는 원하는 것을 블록에 넣을 수 있습니다.

Android Dock패널은 모바일 사이트용으로 설계되었으며 화면 하단에 있습니다. 클릭하면 링크를 배치할 수 있는 아이콘이 나타납니다.

콘텐츠가 포함된 슬라이드 패널 멋진 슬라이드 패널은 두 가지 레벨로 디자인되었습니다. 첫 번째는 메뉴입니다. 두 번째는 콘텐츠입니다. 이제 이 효과는 디자이너와 웹 개발자들 사이에서 매우 인기가 있습니다. 많은 응용 프로그램을 찾을 수 있습니다. Microsoft의 메일러도 비슷한 원리로 작동합니다.

이 튜토리얼에서는 사이트를 더욱 쉽게 탐색할 수 있도록 사이드바 드롭다운 메뉴를 만드는 방법을 보여 드리겠습니다. 이러한 유형의 메뉴는 현대 웹 디자인에서 인기 있는 트렌드입니다. 많은 웹사이트에서 이러한 유형의 메뉴를 사용합니다. 도움을 받으면 프로젝트 페이지의 혼란을 없애고 읽기 쉽게 만들어 사용자의 관심을 주요 콘텐츠에 집중시킬 수 있습니다.

이는 산만함 없이 미니멀리즘을 달성할 수 있는 좋은 방법입니다. 오늘 우리는 그런 메뉴를 직접 만들어 보겠습니다.

탐색 메뉴를 만들려면 먼저 설정을 살펴보겠습니다.

애니메이션 메뉴 데모

먼저 Normalize.css를 다운로드하고 기본 브라우저 스타일을 구성하여 메뉴가 모든 브라우저에서 동일하게 표시되는지 확인해야 합니다. 하위 항목이 있는 메뉴 항목 앞에 화살표를 표시하기 위해 FontAwesome 을 사용합니다. 메뉴에서 클래스를 전환하려면 jQuery를 로드하고 모든 사용자 정의 jQuery 코드를 script.js로 이동하세요. 마지막 링크는 웹 프로젝트의 기본 테이블입니다.

햄버거 아이콘

햄버거 아이콘은 사이트 탐색의 일반적인 속성입니다. FontAwesome과 같은 아이콘 글꼴을 사용하여 생성되는 경우가 많지만, 이 튜토리얼에서는 애니메이션을 추가하여 처음부터 생성해 보겠습니다. 햄버거 아이콘은 가로 줄무늬로 렌더링된 세 개의 div 클래스를 포함하는 스팬 태그입니다.

스타일은 다음과 같습니다.

토글 버튼( 위치: 고정; 너비: 44px; 높이: 40px; 패딩: 4px; 전환: .25s; z-인덱스: 15; ) .toggle-button:hover ( 커서: 포인터; ) .toggle-button .menu -bar ( 위치: 절대; 테두리 반경: 2px; 너비: 80%; 전환: .5s; ) .toggle-button .menu-bar-top ( 테두리: 4px solid #555; border-bottom: 없음; 상단: 0; .toggle-button .menu-bar-middle (높이: 4px; 배경색: #555; margin-top: 7px; margin-bottom: 7px; top: 4px; ) .toggle-button .menu-bar - 하단( 테두리: 4px 솔리드 #555; 테두리 상단: 없음; 상단: 22px; ) .button-open .menu-bar-top ( 변환: 회전(45deg) 변환(8px, 8px); 전환: .5s; ) .button-open .menu-bar-middle ( 변환: 번역(230px); 전환: .1s 완화; 불투명도: 0; ) .button-open .menu-bar-bottom ( 변환: 회전(-45deg) 번역 (8px, -7px); 전환: .5s )

아이콘은 고정된 위치를 가지며 페이지를 스크롤할 때 변경되지 않습니다. 또한 z-index가 15이므로 항상 다른 요소 위에 위치합니다. 세 개의 막대로 구성되며 각 막대는 다른 스타일을 공유합니다. 따라서 각 막대를 class.menu-bar로 이동하겠습니다. 나머지 스타일을 별도의 클래스로 옮깁니다. 공개된 스팬 태그에 다른 클래스를 추가하면 마법 같은 일이 일어납니다. 다음과 같이 jQuery를 사용하여 추가합니다.

$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open") ) ) );

jQuery에 익숙하지 않은 분들을 위해 아이콘이 포함된 $toggleButton으로 변수를 초기화합니다. JavaScript가 필요 없이 변수에 저장합니다. 그런 다음 아이콘 클릭을 수신하는 이벤트 리스너를 만듭니다. 사용자가 햄버거 아이콘을 클릭할 때마다 이벤트 리스너는 class.button-open을 전환하는ggleClass() 함수를 실행합니다.

.button-open 클래스가 추가되면 이를 사용하여 요소가 표시되는 방식을 변경할 수 있습니다. CSS3 Translate() 및 Rotate() 함수를 사용하여 상단 및 하단 막대를 45도 회전시키고 가운데 막대를 오른쪽으로 이동하여 사라지게 합니다. 사용자 정의할 수 있는 애니메이션은 다음과 같습니다.

드롭다운 탐색 메뉴

이제 햄버거 아이콘이 생겼으니 이를 유용하게 만들고 이를 클릭할 때 드롭다운 메뉴를 만들어 보겠습니다. 메뉴 레이아웃은 다음과 같습니다.

  • 집
  • 에 대한
  • 블로그
  • 화살표를 클릭하세요
    • 조정
    • 마크업
    • 코멘트
  • 과정
  • 연락하기

이제 이 메뉴의 각 스타일에 대해 자세히 설명하지 않고 대신 몇 가지 중요한 사항에 중점을 둘 것입니다. 우선 div와 .menu-wrap 클래스가 있습니다. 그의 스타일을 보세요:

메뉴 줄 바꿈( 배경색: #6968AB; 위치: 고정; 위쪽: 0; 높이: 100%; 너비: 280px; 왼쪽 여백: -280px; 글꼴 크기: 1em; 글꼴 무게: 700; 오버플로: 자동 ; 전환: .25s; z-인덱스: 10;

위치가 고정되어 페이지를 스크롤할 때 메뉴는 항상 같은 위치에 유지됩니다. 높이가 100%이면 메뉴가 페이지의 세로 공간을 모두 차지할 수 있습니다. 왼쪽 여백 필드는 메뉴 너비와 동일한 음수로 설정되어 있습니다. 이는 메뉴가 뷰포트에서 사라짐을 의미합니다. 다시 표시하려면 jQuery를 사용하여 또 다른 토글러 클래스를 만듭니다. JavaScript 파일은 다음과 같습니다.

$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ) );

메뉴 래퍼를 포함하는 또 다른 변수 $menuWrap을 추가합니다. 이전에 만든 것과 동일한 이벤트 핸들러를 사용합니다. 이번에는 두 개의 클래스를 전환합니다. 하나는 버튼용이고 다른 하나는 메뉴 셸용입니다. class.menu-show의 왼쪽 여백 값은 0이며 그림자 효과가 추가됩니다.

메뉴 표시( 여백 왼쪽: 0; 상자 그림자: 4px 2px 15px 1px #B9ADAD; )

하위 메뉴 및 링크

목록 항목 중 하나에 하위 메뉴가 포함된 class.menu-item-has-children이 있음을 알 수 있습니다. 또한 링크 바로 아래에는 클래스가 .sidebar-menu-arrow인 범위 태그가 있습니다.

  • 화살표를 클릭하세요

    • 스팬에는 ::after 의사 요소가 있고 FontAwesome 화살표가 포함되어 있습니다. 기본적으로 하위 메뉴는 숨겨져 있으며 화살표를 클릭할 때만 표시됩니다. jQuery를 사용하여 이를 수행하는 방법은 다음과 같습니다.

    $(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ) );

    화살표를 클릭하면 범위 바로 뒤의 다음 요소(이 경우 하위 메뉴)를 대상으로 하는 함수를 호출하여 표시합니다. 우리가 사용하는 기능은 SlideToggle입니다. 요소를 나타나게 하고 사라지게 합니다. 이 예의 함수에는 애니메이션 지속 시간이라는 하나의 매개변수가 있습니다.

    예제의 메뉴 항목에는 호버 효과가 있습니다. ::after 의사 요소를 사용하여 생성됩니다. 코드는 다음과 같습니다:

    메뉴 사이드바 li > a::after ( 내용: ""; 디스플레이: 블록; 높이: 0.15em; 위치: 절대; 상단: 100%; 너비: 102%; 왼쪽: 50%; 변환: 번역(-50% ); 배경 이미지: 선형 그라데이션(오른쪽으로, 투명 50.3%, #FFFA3B 50.3%); 전환: 배경 위치 .2s .1s 완화 배경 크기: 200% 자동 ) > a:hover:: 이후( 배경 위치: -100% 0; )

    ::after 의사 요소에는 각 링크 하단에 전체 너비와 높이가 0.15em인 블록 수준 요소가 포함되어 있습니다. 모두 밑줄처럼 보입니다. 특별한 점은 선에 배경색을 적용하는 것이 아니라 배경 이미지에 선형 그라데이션() 함수를 사용한다는 것입니다. 이 기능은 색상 그라데이션을 생성하도록 설계되었지만 원하는 백분율을 지정하여 색상을 변경할 수 있습니다.

    메뉴 사이드바 li > a::after ( 배경 이미지: 선형 그라데이션(오른쪽으로, 투명 50.3%, #FFFA3B 50.3%; )

    여기 선의 절반은 투명하고 나머지 절반은 노란색입니다. 배경 크기를 200%로 만들어 블록 너비를 두 배로 늘립니다. 이제 투명한 부분이 링크의 전체 너비를 차지하고 노란색 부분이 왼쪽으로 이동하여 보이지 않게 됩니다. 마우스 오버 시 배경 위치를 -100%로 변경합니다. 이제 노란색 부분이 보이고 투명한 부분이 숨겨집니다.

    투명한 부분 대신 다른 색상을 사용해도 됩니다. 그라데이션을 실험해 볼 수도 있습니다.

    우리가 고려한 각 요소는 하나의 전체로 작동합니다. TemplateMonster 컬렉션의 웹사이트 디자인을 사용하여 이러한 메뉴를 만들 수 있습니다. 보시다시피 이것은 상상하는 것보다 쉽습니다. 전문적이고 사용자 친화적인 웹사이트를 만드는 데 행운이 있기를 바랍니다!

    이제 버튼을 눌러 호출할 때 측면에서 애니메이션으로 이동하는 수직 메뉴를 빠르고 쉽게 만들어 보겠습니다.

    STEP 1. HTML 파일에 메뉴 추가하기

    아래 코드를 html 파일에 붙여넣습니다.

    메뉴

    메뉴 버튼 자체를 포함한 모든 메뉴 버튼에 대해 openButton 클래스가 추가된 것을 볼 수 있습니다. 이는 우리가 연결할 스크립트가 이러한 버튼의 클릭을 메뉴 열기 및 닫기 동작에 바인딩할 수 있도록 수행됩니다.

    2단계. 스타일 추가

    이제 메뉴와 모든 버튼을 약간 스타일화하겠습니다. 아래 코드를 CSS 파일에 붙여넣으세요.

    버튼( 배경: 투명; 테두리: 투명; 윤곽선: 없음; 커서: 포인터; 여백: 50px 90px; 글꼴 두께: 굵게; 글꼴 크기: 24px; 색상: #6c7d96; 전환: 0.2s; ) 버튼:호버( 전환: 0.2초; 불투명도: 0.7; ) 버튼:활성(전환: 0.2초; 불투명도: 0.4; ) 탐색(배경색: #6c7d96; 너비: 250px; 위치: 상대; 왼쪽: -999px; 전환: 0.5초 용이함; ) nav ul li ( 패딩: 20px 0; 텍스트 정렬: 중앙; 전환: 0.2s; ) nav ul li:hover ( 커서: 포인터; 배경색: #454954; 전환: 0.2s; ) nav ul li :active ( 배경색: #23252b; 전환: 0.2s; ) nav ul li a ( 색상: 흰색; 텍스트 장식: 없음; 글꼴 두께: 굵게; 글꼴 크기: 21px; )

    코드의 가장 중요한 부분은 탐색 선택기에 작성됩니다. 상대 위치 지정을 사용하여 left 에 음수 값을 할당하여 페이지의 보이는 부분 너머로 메뉴를 숨깁니다.

    메모: 스크롤하는 동안 메뉴를 화면에 고정해야 하는 경우 고정 위치 지정을 사용할 수도 있습니다. 이는 우리 버전과 동일하게 작동합니다.

    STEP 3. 스크립트 연결하기

    js 파일에 다음 코드를 삽입해야 합니다.

    $(document).ready(function() ( $(".openButton").click(function() ( if(!$(".openButton").hasClass("openDone")) ( $(".openButton" ).addClass("openDone"); $("nav").css("left", "0px"); else ( $(".openButton").removeClass("openDone"); $("nav" ) .css("left", "-999px"); /* 처음에 특정 화면 크기 이후에 메뉴를 적응적으로 만들고 싶을 때 연결합니다. 이 코드는 브라우저 화면 크기를 변경할 때 메뉴가 무작위로 사라지는 문제를 해결합니다. 너비는 메뉴의 적응형 디자인을 활성화하는 경우 $(window).resize(function() ( if ($(window).width() > 1200) ( $("nav ul li").removeAttr("style" ); ) )) */ ));

    스크립트는 이전에 제공한 openButton 클래스를 사용하여 버튼의 클릭 이벤트를 확인합니다. 즉시 openDone 클래스가 있는지 확인합니다. 버튼에 이 클래스가 있는지에 따라 이 스크립트는 메뉴를 닫을지 열지 여부를 결정합니다.

    그런데 우리는 이 클래스를 어디에도 등록하지 않았습니다. 일종의 스위치 역할을 합니다. 이는 “MENU” 버튼을 클릭하면 openButton 클래스가 있는 모든 버튼이 openDone 클래스에 추가되는 방식으로 작동합니다. 그리고 사용자가 메뉴 버튼 중 하나를 다시 클릭하면 스크립트는 해당 버튼에서 openDone 클래스를 제거합니다.

    따라서 이 클래스는 스크립트에만 필요하므로 메뉴가 표시되어야 하는 순간과 닫혀야 하는 시간을 이해합니다. openDone 클래스를 추가하지 않았다면 스크립트가 올바르게 작동하지 않을 것이며 열기 버튼을 클릭하면 메뉴가 즉시 열리고 닫힐 것입니다.

    메모: 이 스크립트를 사용하여 가로 메뉴의 적응형 버전에 애니메이션을 적용하려면 아래에 설명된 코드를 포함해야 합니다. 화면 크기가 커지면 메뉴가 사라지는 문제를 해결합니다.

    요약

    버튼을 누르면 측면에 나타나는 가장 간단한 애니메이션 메뉴를 만들었습니다. 보시다시피 여기에는 복잡한 것이 전혀 없습니다. 이 코드를 개선하고 원하는 대로 수정할 수 있습니다.

    수직 메뉴는 글머리 기호 또는 번호가 매겨진 목록을 기반으로 만들어집니다. 기본적으로 모든 목록 요소는 수직으로 정렬되어 컨테이너 요소의 전체 너비를 차지하고 컨테이너 요소의 전체 너비를 차지합니다.

    목록 요소에는 링크뿐만 아니라 제목, 아이콘, 그림도 포함될 수 있습니다. 세로 메뉴를 사용하면 사이트에 대한 댓글, 카테고리 목록 등을 만들 수 있습니다.

    1. 헤더가 있는 세로 메뉴

    심플하고 우아한 디자인 옵션. 웹사이트의 카테고리 스타일링에 적합합니다. 마우스를 올리면 목록 항목의 링크 색상이 변경됩니다.

    카테고리

    * (box-sizing: border-box; margin: 0;).widget ( 패딩: 20px 30px; 배경: 흰색; 글꼴 계열: "Roboto", sans-serif; ) .widget-title ( 텍스트 변환: 대문자 ; 글자 간격: 2px; 글꼴 크기: 16px; 테두리 왼쪽: 2px #b99d61; -style: 없음; ) .widget-list a:before ( 내용: "\2014"; -right: 14px; ) .widget-list a ( 텍스트 장식: 없음; 개요: 없음; 디스플레이: 블록; 패딩: 6px 0; 문자 간격: 1px; 색상: #444; 전환: .3s 선형; .widget -list a:hover (색상: #b99d61;)

    2. 지하철 노선도 스타일의 세로 메뉴

    수직 메뉴를 디자인하기 위한 흥미로운 솔루션은 중첩된 메뉴를 추가하는 것입니다. "지하철 노선"은 목록의 왼쪽 경계선이며 각 링크 앞에 마커가 생성됩니다.

    .metro ( 목록 스타일: 없음; 패딩: 0; 여백: 30px 0 0 50px; 테두리 왼쪽: 5px 솔리드 #DAE4F1; ) .metro li (라인 높이: 2em;) .metro ul ( 여백: 20px 0 20px 15px; 테두리: 없음; 목록 스타일: 없음; .metro ul:before, .metro ul:after (content: ""; 너비: 5px; 높이: 28px; 배경: #DAE4F1; 위치: 상대 ; 디스플레이: 블록; 왼쪽: -9px; ) .metro ul:before ( 변환: 회전(-45deg); margin-top: -15px; ) .metro ul:after ( 변환: 회전(45deg); 하단: -20px ; ) .metro ul li (왼쪽 테두리: 5px 단색 #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( 텍스트 장식: 없음; 디스플레이: 블록; 글꼴 계열: "Noto Sans", sans-serif; 색상: #4A4B4D; ) .metro a: 이전 ( 내용: " "; 디스플레이: 인라인 블록; 배경: #CA682D; 너비: 12px; 높이: 12px; 왼쪽: -9px; 위치: 상대; 테두리 반경: 50%; 여백 오른쪽: .5em; )

    3. 호버 효과가 있는 수직 메뉴

    목록 항목 위로 마우스를 가져갈 때 나타나는 아이콘과 배경 채우기는 수직 메뉴 요소의 디자인을 다양화하는 데 도움이 됩니다.

    카테고리

    .category-wrap ( 패딩: 15px; 배경: 흰색; 너비: 200px; 상자 그림자: 2px 2px 8px rgba(0,0,0,.1); 글꼴 계열: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( 글꼴 크기: 16px; 색상: rgba(0,0,0,.6); 여백: 0 0 10px; 패딩: 0 5px; 위치: 상대; ) .category-wrap h3:after( 내용: ""; 너비: 6px; 높이: 6px; 배경: #80C8A0; 위치: 절대; 오른쪽: 5px; 하단: 2px; 상자 그림자: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( 목록 스타일: 없음; 여백: 0; 패딩: 0; 테두리 상단: 1px 솔리드 rgba(0,0,0,.3); ) .category- Wrap li (여백: 12px 0 0 0px;) .category-wrap a ( 텍스트 장식: 없음; 디스플레이: 블록; 글꼴 크기: 13px; 색상: rgba(0,0,0,.6); 패딩: 5px ; 위치: 상대; 전환: .3s 선형; ) .category-wrap a:after ( 내용: "\f18e"; 글꼴 계열: FontAwesome; 위치: 절대; 오른쪽: 5px; 색상: 흰색; 전환: .2s 선형 ; ) .category-wrap a:hover ( 배경: #80C8A0; 색상: 흰색; )

    4. 아이콘이 있는 수직 메뉴

    메뉴 아이콘은 각 카테고리의 구두 설명을 보완하는 시각적 기준을 만듭니다. 아이콘을 표시하려면 연결이 필요합니다. 다른 아이콘 글꼴이나 그림 아이콘을 사용할 수도 있습니다.

    카테고리

    * (box-sizing: border-box; margin: 0;).widget ( padding: 20px; border: 5px solid #f1f1f1; 배경: #fff; border-radius: 5px; 글꼴 계열: "Roboto", sans- serif; ) .widget h3 ( 여백: 하단: 20px; 텍스트 정렬: 센터; 글꼴 크기: 24px; 글꼴 무게: 일반; 색상: #424949; ) .widget ul ( 여백: 0; 패딩: 0; 목록 -style: 없음; 너비: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li: 마지막 하위 ( border-bottom: 없음; 여백 하단: 0; 패딩 하단: 0; ) .widget a ( 텍스트 장식: 없음; 색상: #616a6b; 디스플레이: 인라인 블록; ) .widget li:before ( 글꼴 계열: FontAwesome; 글꼴 크기 : 20px; 수직 정렬:하단; 색상: #dd3333; 오른쪽 여백: 14px; 2):앞 (content:"\f0d0";) .widget li:nth-child(3):앞 (content:"\ f0cd";) .widget li:nth-child(4):before (content:" \f028";).widget li:nth-child(5):before (content:"\f03d";)

    5. 사진이 포함된 세로 메뉴

    이 예는 신제품, 유사제품 등으로 블록을 설계하는 데 사용될 수 있습니다. 온라인 상점 웹사이트.

    JPEG">제품 1 ₽ 2000 제품 2 ₽ 2500 제품 3 ₽ 2070 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col ( 너비: 300px; 배경: 흰색; 패딩: 20px; 테두리: 1px 단색 #eeeeee; 글꼴 계열: "Open Sans", sans-serif; ) .col * (여백: 0;).widget-title ( 여백: 0 0 30px; 텍스트 변환: 대문자; 글꼴 크기: 20px; 오버플로: 숨김); "; 위치: 상대; 디스플레이: 인라인 블록; 너비: 100%; 수직 정렬: 중간; 오른쪽: -15px ; 여백 오른쪽: -100%; 테두리 상단: 2px 솔리드 #cca86d; ) .price-line (margin-bottom: 20px;).price-line:last-child (margin-bottom: 0;).price- line:after ( 내용: ""; 디스플레이: 테이블; 지우기: 둘 다; ) .product-image ( 너비: 80px; float: 왼쪽; .product-image a ( 디스플레이: 블록; 개요: 없음; ) .product-image img ( 디스플레이: 블록; 너비: 100%; ) .product-content ( float: 왼쪽; margin -left: 20px; ) .product-title ( 글꼴 크기: 18px; margin-bottom: 10px; 줄 높이: 1 ; ) .product-title a ( 텍스트 장식: 없음; 색상: #242424; ) .price -box ( 색상: #666; 글꼴 크기: 18px; 줄 높이: 1; ) .star-rated ( margin-bottom: 10px; 글꼴 크기: 13px; 위치: 상대; 글꼴 계열: "FontAwesome"; ) .star-rated:before ( content: "\f005 \f005 \f005 \f005 \ f005"; 위치: 절대; 위쪽: 0; 왼쪽: 0; 색상: #FF9919; )

    이번 포스팅에서는 고정된 부가정보 메뉴를 만들어 보겠습니다. 아이콘을 구현하기 위해 폰트를 연결하겠습니다.

    Step 1. 아이콘과 폰트를 연결하고, 빈 문서를 생성하세요

    내 게시물에서 FontAwesome 글꼴 작업에 대한 자세한 정보와 프로젝트 자체에 대한 링크를 찾을 수 있습니다.

    첨부된 파일이 있는 페이지의 코드는 다음과 같습니다.

    사이드 메뉴 고정

    2단계: 고정 메뉴에 대한 HTML 마크업 추가

    고정 메뉴의 마크업 코드는 다음과 같습니다.

    아시다시피 저는 태그를 사용했습니다. 이것은 html5 마크업 요소입니다. html4를 사용하는 경우 이 태그를 일반 태그로 바꾸거나 완전히 제거하고 다음과 같이 식별자를 목록으로 이동할 수 있습니다.