홈>
조직의 GCSE 옵션을위한 웹 사이트를 만들고 싶습니다. 현재 메모장 ++를 사용하여 웹 사이트를 작성하고 있습니다. 나는 이것에 부분적으로 초보자입니다.
이동식 드롭 다운을 만들고 싶습니다. 여기에는 모든 옵션이 나열되어 있으며 클릭하면 주제에 관한 모든 카드가 열립니다. 머티리얼 디자인 컨셉이 마음에 들고 코드의 일부입니다 :
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Compulsary</button>
<div class="dropdown-content">
<a href="#">English Language</a>
<a href="#">English Literature</a>
<a href="#">Mathematics</a>
</div>
</div>
그런 다음 각 주제를 이러한 종류의 카드에 연결하려고합니다. https://getmdl.io/components/index.html#cards-section
샘플 카드를 만들었습니다 :
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 176px;
background: url('https://www.tes.com/sites/default/files/maths_blackboard.jpg') center / cover;
}
.demo-card-wide>.mdl-card__menu {
color: #fff;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Mathematics</h2>
</div>
<div class="mdl-card__supporting-text">
This is one of the compulsary subjects and is crucial. It involves geometry, algebra, data, and numbers.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Done
</a>
</div>
</div>
카드를 드롭 다운 옵션 중 하나에 연결하려면 어떻게합니까? 카드를 열고 카드의 '완료'버튼을 연결하여 카드를 닫으려면 어떻게해야합니까?
이 문제를 도와주세요.
-
답변 # 1
관련 자료
- html - 입력 버튼에서 Material Design Lite를 사용하는 방법
- c# - 버튼에 머티리얼 디자인 아이콘 추가
- WPF 머티리얼 디자인 아이콘을 버튼에 적용 할 수 없습니다
- wpf - C # Code Behind를 사용하여 XAML 툴킷의 머티리얼 디자인에서 팔레트 브러시 중 하나를 어떻게 검색합니까?
- python - Pyside2 및 재료 설계
- angular - 머티리얼 디자인 테이블이 UserDataSource에 매핑되지 않습니다
- gwt 머티리얼 디자인 - 클래식 개발자 모드에서 작동하지 않는 materialslider
- 앵귤러 머티리얼 입력을 버튼과 비슷하게 만드는 방법은 무엇입니까?
- xml - 안드로이드 응용 프로그램에서 소재 디자인 테마 - 메뉴 항목 아이콘이 테마에서 상속되지 않습니다
- Material Design Icon - 머티리얼 디자인 아이콘 - 지원되는 업스트림
- react-admin - 머티리얼 디자인 업데이트
- reactjs - 오류없이 URL 객체를 머티리얼 UI 버튼에 전달하는 방법은 무엇입니까?
- javascript - 머티리얼 디자인의 탭 바 html/css/js 사용
- android - 머티리얼 디자인 테마 색상 속성이 표시되지 않음
- 안드로이드에서 머티리얼 아이콘 버튼을 얻는 방법?
- Flutter에서 입력 된 색상이 표시되지 않는 색상
- 앵귤러 재질 다이내믹 라디오 버튼은 여러 개를 선택할 수 있지만 그룹에서 한 번만 허용해야합니다
- reactjs - Material UI 아코디언으로 버튼 축소를 사용하는 방법은 무엇입니까?
- Flutter Material '탭하여 업데이트'버튼
- javascript - 머티리얼 UI 팝 오버가 버튼 기능을 차단합니다Reactjs
관련 질문
- html - 규칙을 생성 한 후에 만 자식 요소에 적용하는 방법 (CSS)?
- css - 버튼 안에 텍스트가 너무 긴 경우 HTML 버튼이 본문에서 아래로 이동합니다
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- html - 부트 스트랩 - 모바일보기에서 버튼을 텍스트 상자와 같은 너비로 만드는 방법은 무엇입니까?
- javascript - 여백을 통해 마우스 오버
- javascript - JS 생성 버튼을 본문 대신 div에 추가하는 방법
- html - 간단한 css 그리드 질문 - col이 전체 너비를 차지하지 않음
- html - 본문 태그의 배경 이미지가 표시되지 않습니까?
- javascript - 난수로 버튼을 클릭하면 div의 너비를 줄입니다
- html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치
카드를 연결함으로써 링크를 클릭 할 때 카드가 팝업되기를 원한다고 생각합니다. 이것은 javascript/jquery를 사용하여 쉽게 달성 할 수 있습니다. 순수한 "해키"CSS 솔루션도 가능하지만 권장하지 않습니다.
다음 솔루션은 jQuery를 사용합니다
업데이트 :
데이터 속성을 사용하여 카드에 삽입 할 수있는 링크에 관련 내용을 추가하십시오. 이 경우 다음을 추가했습니다.