0
スライドアウトメニューを作成しようとしていますが、netbeansは構文が正しくないと判断し続けます。スライドアウトメニューが機能しない、NetBeansで構文エラーが表示され続ける
コンソールが表示されますにReferenceError:jQueryのが定義されていない[ミーア情報] navbar.js:16:1
上記のファイルは、私はすべてのページに含まれているメニューのPHPファイルです。
エラーの原因を特定できません。
$(document).ready(function(){
$(".fa-times").click(funtion(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(funtion(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/* menu 2 */
.toggle_menu{
position:fixed;
padding: 15px 20px 15px 15px;
margin-top: 70px;
color:white;
cursor: pointer;
background-color:#648b79;
z-index:1000000;
font-size:2em;
opacity:0;
}
.sidebar_menu{
position:fixed;
width:250px;
margin-left:0px;
overflow:hidden;
height:100vh;
max-height:100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity:0.9;
transition: all 0.3s ease-in-out;
}
.fa-times{
right:10px;
top:10px;
opacity:0.7;
cursor: pointer;
position:absolute;
color:white;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity:1;
}
.boxed_item{
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display:inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color:white;
text-align:center;
margin-top:70px;
}
.logo_bold{
font-weight: 800;
}
.logo_title{
color:white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0;
}
.navigation_selection{
margin: 20px 0;
display:block;
width:200px;
margin-left: 25px;
}
.navigation_item{
font-weight: 200;
font-family: 'Open Sans';
color:white;
padding: 12px 0;
box-sizing:border-box;
font-size: 14px;
color:#D8D8D8;
border-bottom: solid 1px #d8d8d8;
transition: all 0.3s ease-in-out;
cursor:pointer;
}
.boxed_item_smaller{
font-size: 12px;
color:#D8D8D8;
width:200px;
transition: all 0.3s ease-in-out;
cursor: pointer;
border-width:1px;
margin:0 0 20px 0;
}
.boxed_item_smaller:hover{
background-color:white;
color:#111;
transition: all 0.3s ease-in-out;
}
.hide_menu{
margin-left:-250px;
}
.opacity_one{
opacity:1;
transition: all 0.3s ease-in-out;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="scriptsm.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<i class="fa fa-bars toggle_menu"></i>
<div class="sidebar_menu">
<i class="fa fa-times"></i>
\t \t \t <center>
\t \t \t \t <a href="#"><h1 class="boxed_item">robby<span class="logo_bold">test</span></h1></a>
\t \t \t \t <h2 class="logo_title">test</h2>
\t \t \t </center>
<ul class="navigation_selection">
<li class="navigation_item"> ? </li>
<li class="navigation_item"> ? </li>
<li class="navigation_item"> ? </li>
<li class="navigation_item"> ? </li>
<li class="navigation_item"> ? </li>
<li class="navigation_item"> ? </li>
</ul>
\t \t \t <center>
\t \t \t \t <a href="#"><h1 class="boxed_item boxed_item_smaller">
<i class="fa fa-user"></i>??</h1></a>
\t \t \t </center>
</div>
</body>
</html>
コピー貼り付けの必要がありますが、まだ動作していないことを確認してください。 –
@RobbyMoralesはアップデートをチェックします。クリック事象機能が綴られていなかった。この修正後は完全に動作します。 – Deep
@RobbyMoralesは解決された問題ですか? – Deep