[英]Can't get these scripts to work together
我是應用程序開發人員的二年級學生,在一家IT公司實習,我的主管要求我制作一個下拉菜單,其外觀和功能與頂部http://www.veermanict.nl/上的菜單完全相同。在移動模式下(您必須將窗口大小調整為移動分辨率才能查看我在說什么)。
我是一個新手,我已經為此苦苦掙扎了兩天。 我的學業甚至沒有涵蓋JavaScript,因此我基本上在這里介紹所有內容,包括搜索知識。 我發現可以在CSS中進行更改的模板,使其看起來更像我的主管想要的,但是問題是我似乎無法使其正常工作。
我正在談論這個腳本: http : //codepen.io/pedronauck/pen/fcaDw
我嘗試制作一個HTML文檔,並將CSS和JavaScript鏈接到HTML頁面,如下所示:
<head> <meta charset="utf-8"> <title>Menu Test 2</title> <link rel="stylesheet" type="text/css" href="style2.css"> <script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script> <script language="javascript" type="text/javascript" src="dropdown.js"></script> </head>
...但是它只會顯示為:prntscr(點)com / 8dxk4s(不允許我使用多個鏈接,對不起)
因此,這意味着CSS確實可以工作。 但是Javascript不是嗎? 據我所知,Dreamweaver中的CSS內部也存在錯誤。 JavaScript是否在規則25中缺少分號?
請幫幫我。 我不想讓我的主管認為我沒用。 但是我一直堅持下去,他太忙了,無法幫助我。 我嘗試了許多其他選擇,但他並不滿足於平庸。
從SCSS
轉換的CSS
使用此CSS
的CSS
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #2c89c6;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
transform: rotate(-180deg);
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
transform: rotate(0deg);
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
transform-origin: 50%, 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
transition: max-height 0.6s ease-out;
}
@keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
}
}
您正在使用SCSS(Sass)代碼,就像原始CSS一樣。 在您提供的Codepen中,通過將CSS更改為SCSS,它可以立即開始工作。
script標簽的language屬性已棄用。 使用類型,不能同時使用。 或者根本不使用它。 在所有現代網絡瀏覽器上,類型的默認值為text / javascript。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.