HTML Material Design Button

Question

Ich möchte eine Website für die GCSE-Optionen einer Organisation erstellen und ich erstelle derzeit mit Notepad ++. Ich bin teilweise ein Neuling in diesem Bereich.

Ich möchte ein erweiterbares Dropdown erstellen, wo es alle Optionen auflistet und wenn es angeklickt wird, öffnet es eine Karte alles über das Thema. Ich mag das Material Design-Konzept und hier ist ein Teil des Codes:

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

Dann möchte ich auch jedes Thema auf diese Art von Karte verlinken: https://getmdl.io/components/index.html#cards-section

ich gemacht Beispielkarte:

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

Wie kann ich die Karte mit einer der Dropdown-Optionen verknüpfen, so dass sie geöffnet wird und wie kann ich auch die Schaltfläche "Fertig" auf der Karte verknüpfen, um die Karte zu schließen?

Bitte helfen Sie mir dabei.

Answer 1

Durch die Verknüpfung der Karte, ich glaube, Sie wollten sagen, Sie wollen die Karten Popup, wenn die Links geklickt werden. Dies kann leicht mit Javascript/Jquery erreicht werden. Eine reine "Hacky" -Css-Lösung ist ebenfalls möglich, wird aber NICHT empfohlen.

Die folgende Lösung verwendet 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:

Verwenden Datenattribute relevanten Inhalt zu den Verbindungen hinzuzufügen, die in den Karten eingeschoben werden können. In diesem Fall habe ich hinzugefügt folgende:

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