1
私は学校向けのアプリを作ろうとしています。私はVS内でCordovaを使用しています。 UIについては、MDL（Material Design Lite）を使用したいと考えています。 1つの問題がありますが...ナビゲーションメニューを開くことができません。私はこれを（親ではなく）動作させるために複数の方法を試しました。メニューアイコンが表示されないか、メニューアイコンがクリックされたときにメニューが開きません。私は以下のindex.htmlとindex.cssの内容を含めました。私がこの作業をするのを助けるためにそれらを見てください。ありがとう。Visual Studio用CordovaのMDL
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
\t background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;
\t
background-color:#32383d;
font-family: 'RobotoRegular', 'Droid Sans', 'Segoe UI', Segoe, 'San Francisco', 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif;
font-size:12px;
}
.app {
background: url(../images/cordova.png) no-repeat center top;
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 225px;
text-align: center;
padding: 180px 0px 0px 0px;
margin: -115px 0px 0px -112px;
}
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px;
margin:-90px 0px 0px -198px;
}
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script type="stylesheet" src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<title>PHSRadio</title>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__drawer-button"><i class="material-icons">menu</i></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">PHS Radio</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">PHS Radio</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">Requests</a>
<a class="mdl-navigation__link" href="">Settings</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<!--Page Content-->
</main>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript" src="scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="stylesheet" src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
これはうまくいきました。 –
ようこそ。 –