일반 CSS로 드롭다운 메뉴 만들기
9420 단어 dropdowncsscodenewbiehtml
코드를 가능한 한 짧고 간단하게 유지하기 위해 최선을 다했습니다. 이것은 일반 CSS 및 HTML로만 제작되었습니다. 나는 어떤 라이브러리도 사용하지 않았습니다.
시작하기 전에 우리가 만들려는 것을 살짝 보여드리겠습니다.
![](https://s1.md5.ltd/image/13ad077bed221a4bde5145ba464dfa93.gif)
HTML 부분 만들기
구성 요소 분해:
![](https://s1.md5.ltd/image/eb8b44aabc42a57aa317a28b92ba223e.png)
이제 HTML 요소를 만들 수 있습니다.
<nav id="nav-element">
<button id="button-dropdown">Dropdown </button>
<div id="div-products">
<a href="">Product 1 </a>
<a href="">Product 2 </a>
<a href="">Product 3 </a>
<a href="">Product 4 </a>
<a href="">Product 5 </a>
</div>
</nav>
CSS 추가:
먼저 "nav"태그에 CSS를 추가해 보겠습니다.
/* <nav> element */
#nav-element {
position: relative;
display: inline-block;
}
참고: 디스플레이에서 마우스를 인라인으로 가져갈 때만 인라인 차단을 사용하면 드롭다운이 나타납니다. 블록 요소를 사용하지 마십시오. 블록 주위를 마우스로 가리키면 드롭다운이 나타납니다.
"버튼"태그에 CSS를 추가합니다.
/* <button> element */
#button-dropdown {
width: 10rem;
margin: auto;
padding: 0.5rem 0rem;
background-color: #3b70ff;
color: white;
border: 1px solid #3b70ff;
}
"div"태그에 CSS를 추가합니다.
/* <div> element */
#div-products {
display: none;
width: 10rem;
margin: auto;
color: #3b70ff;
border: 1px solid #3b70ff;
}
참고: 처음에 이러한 구성 요소를 생성할 때 "디스플레이: 블록"을 설정하십시오. 그렇지 않으면 출력을 볼 수 없습니다.
"a"태그에 CSS를 추가합니다.
/* <a> element */
#div-products a {
display: block;
text-decoration: none;
padding: 0.5rem 0rem;
}
참고: "a"태그는 인라인 요소이므로 "block"을 사용합니다. 모든 "a"태그의 출력은 같은 줄에 있습니다.
만세! 이제 작업이 95% 완료되었습니다. 남은 것은 호버 기능뿐입니다. 바로 시작합시다!
호버 기능 추가:
"nav"요소 위로 마우스를 가져가면 "div"태그 표시가 나타납니다. 드롭다운 메뉴가 나타납니다.
#nav-element:hover #div-products {
display: block;
}
또 다른 기능:
예를 들어 "a"요소 위로 마우스를 가져가면. 제품 1, 제품 2 등 배경색 및 텍스트 색상을 변경하고 싶습니다.
#div-products a:hover {
background-color: #3b70ff;
color: white;
}
Aaaanddd, 끝났습니다. 코드를 사용해 보고 유용하다고 생각되면 알려주세요.
다음은 라이브 데모 링크입니다: https://71cqf.csb.app/
면책 조항: 이것은 기술 공간에 대한 나의 첫 번째 블로그입니다. 저는 웹 개발 세계의 완전한 초보자이므로 모범 사례를 연습하지 않은 경우 알려주십시오. 그러면 기꺼이 수정하겠습니다. :디
나는 여행과 경험을 와 에 기록합니다.
Reference
이 문제에 관하여(일반 CSS로 드롭다운 메뉴 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/themohammadsa/create-drop-down-menus-with-plain-css-86텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)