HTML 재질 디자인 버튼

Question

조직의 GCSE 옵션을위한 웹 사이트를 만들고 싶습니다. 현재 메모장을 사용하여 초안을 만들고 있습니다. 나는 부분적으로 초보자이다.

모든 옵션을 나열하고 내가 클릭하면 제목에 관한 모든 카드를 열 수있는 호버 블 드롭 다운을 만들고 싶습니다. 내가 만든 https://getmdl.io/components/index.html#cards-section

: 나는 또한 카드의 종류에 각 과목을 연결하려면, 다음

/* 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>

: 나는 재료 설계 개념을 좋아하고 여기에 코드의 일부 샘플 카드 :

.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>

카드를 드롭 다운 옵션 중 하나에 연결하면 카드가 열리 며 어떻게 카드를 닫으려면 '완료'버튼을 연결해야합니까?

도와주세요.

Answer 1

카드를 연결하면 내가 링크를 클릭했을 때 카드를 팝업으로 표시한다고 말한 것 같습니다. 이것은 javascript/jquery를 사용하여 쉽게 얻을 수 있습니다. 순수한 "해킹"CSS 솔루션도 가능하지만 권장하지는 않습니다.

다음 솔루션

는 jQuery를

$(document).ready(function() { 
 
    $(".dropdown-content a").click(function() { 
 
    $(".background-mask").show(); 
 
    $(".demo-card-wide.mdl-card").show(); 
 

 
    $(".mdl-card__supporting-text").text(
 
     $(this).attr("data-content") 
 
    ); 
 

 
    $(".demo-card-wide>.mdl-card__title").css('background', 'url(' + $(this).attr("data-img") + ') center/cover') 
 
    }); 
 

 
    $(".mdl-button").click(function() { 
 
    $(".demo-card-wide.mdl-card").hide(); 
 
    $(".background-mask").hide(); 
 
    }); 
 

 
});

/* Style The Dropdown Button */ 
 

 
body { 
 
    position: relative; 
 
} 
 

 
.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; 
 
    z-index: 0; 
 
} 
 

 

 
/* 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; 
 
} 
 

 
.demo-card-wide.mdl-card { 
 
    width: 512px; 
 
    display: none; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.demo-card-wide>.mdl-card__title { 
 
    color: #fff; 
 
    height: 176px; 
 
} 
 

 
.demo-card-wide>.mdl-card__menu { 
 
    color: #fff; 
 
} 
 

 
.background-mask { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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="#" data-content="English Language Content" data-img="https://www.tes.com/sites/default/files/maths_blackboard.jpg">English Language</a> 
 
    <a href="#" data-content="English Literature Content" data-img="https://images7.content-hcs.com/commimg/myhotcourses/blog/post/myhc_24232.jpg">English Literature</a> 
 
    <a href="#" data-content="Mathematics Content" data-img="https://c.tadst.com/gfx/750w/english-language-day.jpg">Mathematics</a> 
 
    </div> 
 
</div> 
 

 
<div class="background-mask"></div> 
 

 
<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>

를 사용

UPDATE : 카드에 삽입 할 수있는 링크에 관련 콘텐츠를 추가 할 데이터가-속성

사용. 이 경우 다음을 추가했습니다.