iT邦幫忙

1

嘗試做了RWD選單沒有反應

嘗試做了RWD的選單,
可是點擊MENU時完全沒有反應....
不知道是少了什麼,請大家幫忙,謝謝~

--------------------------HTML-----------------------------

--------------------------CSS-----------------------------
*{
position:relative;
margin: 0 auto;
box-sizing:border-box;
font-family: sans-serif;
}

.wrapper{
width:100%;
margin: 0 auto;
height: 100%;
}

.back{
position:fixed;
width:100%;
height: 100%;
background-color:#fff;
}

.ball{
display:block;
background-color:#FFD700;
width:880px;
height:880px;
top:-15%;
left:-60%;
border-radius:50%;
opacity:0.5;
}

.ball2{
display:inline-block;
background-color:#FF8099;
width:700px;
height:700px;
position:fixed;
top:50%;
left:75%;
border-radius:50%;
opacity:0.5;
}

.ball3{
display:inline-block;
background-color:#73E68C;
width:650px;
height:650px;
position:fixed;
top:90%;
left:50%;
border-radius:50%;
opacity:0.7;
}

.ball4{
background-color:#5686BF;
width:550px;
height:550px;
position:fixed;
top:60%;
left:-30%;
border-radius:50%;
opacity:0.3;

}

.navbar{
border:5px solid #CD5C5C;
width:100%;
height:80px;
position:fixed;
padding-top:0;
top:0;
left:0;
box-shadow:1px 1px 10px #000;

}
.menu{
float:right;
border:5px solid #000;

}
.menu li{
float:right;
width:120px;
list-style-type:none;
height:210px;
padding-top:10px;
border:5px solid #CD5C5C;
}

.menu li a {
border:3px solid #00CED1;
display:block;
height:30px;
width: 100px;
text-align: center;
text-decoration:none;
font-family:arial;
color:#fff;
text-shadow:0.05em 0.03em 0.15em #000;
transition: transform 0.2s ;
font-size:18px;
margin:0 auto;
}

.menu li a:hover {
transform: scale(1.3);
}

.content{
padding: 10px;
line-height: 1.8;
}

.content p{
margin-bottom: 5px;
}

.showmenu{
display: none;
}

@media (max-width: 767px){
.menu {
max-height: 10px;
overflow: hidden;
transition: max-height 1s;
margin-top: 10px;
position: absolute;
z-index: 100;
top: 81px;
left: 0;
right: 0;
background: #0F222B;
}

.menu li{
float: none;
border-bottom: 1px dashed #69CA62;
}

.menu li a{
transition: all 0.3s;
}

.menu li a:hover{
background: #69CA62;
color: #fff;
}

.showmenu{
font-size:25px;
color:#000;
text-decoration:none;
display: block;
float: right;
margin-right:20px;
margin-top:20px;
}

.menu-show .menu{
max-height: 500px;

}

--------------------------JS-----------------------------
$(document).ready(function() {
$('.showmenu').on('click', function(e){
e.preventDefault();
$('body').toggleClass('menu-show');
});
});

dragonH iT邦大師 4 級 ‧ 2019-07-08 18:23:41 檢舉
根據我過人的眼力

應該是少了 html 的 code
vegalou iT邦新手 4 級 ‧ 2019-07-08 19:33:09 檢舉
debugger打開自己去看console.log ERROR
cute32346 iT邦新手 5 級 ‧ 2019-07-08 20:51:20 檢舉
抱歉... 因為是下班前發問的有點手忙腳亂... 回到家才看到html沒貼到 = =
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="4.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

</head>
<body>

<header class ="wrapper">
<div class = "back">
<div class = "ball"></div>
<div class = "ball2"></div>
<div class = "ball3"></div>
<div class = "ball4"></div>
</div>

<header class ="navbar">

<ul class="menu">
<li><a href="#">ME</a></li>
<li><a href="#">ISSUE</a></li>
<li><a href="#">TRAVEL</a></li>
<li><a href="#">LIFE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<a href="#" class="showmenu">MENU</a>

</header>
<section class="main">

</section>

</body>
</html>


我說的是MENU點擊後不是應該要出現選項嗎...
可是好像都沒反應...

2 個回答

1
dragonH
iT邦大師 4 級 ‧ 2019-07-08 20:57:30
最佳解答

codepen

我試是 OK 阿

雖然看起來怪怪的

不過是可以觸發的

然後

<header class ="wrapper">
    <div class = "back">
    <div class = "ball"></div>
    <div class = "ball2"></div>
    <div class = "ball3"></div>
    <div class = "ball4"></div>
</div>

這裡的 header 是打錯嗎

看更多先前的回應...收起先前的回應...
cute32346 iT邦新手 5 級 ‧ 2019-07-08 22:08:46 檢舉

我放在我的codepen沒有作用耶...為什麼.../images/emoticon/emoticon02.gif
https://codepen.io/Maxineuse/pen/wLYjMG

對..我的header那是打錯的..

dragonH iT邦大師 4 級 ‧ 2019-07-08 22:14:02 檢舉
$ is not defined

你沒有引用 jquery

看瀏覽器 f12 console 可以看到錯誤

cute32346 iT邦新手 5 級 ‧ 2019-07-09 09:16:31 檢舉

有了!!!!!!!!!!!!!!!!
雖然真的很怪........
但終於有反應了哈哈哈

冰水 iT邦新手 5 級 ‧ 2019-07-09 10:25:39 檢舉

你的
@media (max-width: 767px){

}
沒包好....

你只有寫
@media (max-width: 767px){

cute32346 iT邦新手 5 級 ‧ 2019-07-09 12:04:56 檢舉

好唷
謝謝提醒~

0
小魚
iT邦高手 1 級 ‧ 2019-07-08 20:14:00

1.CSS應該跟點擊事件無關
2.你已經呼叫了這個

e.preventDefault();

不就是叫他不要反應嗎?

p.s.不過你的問題是問這個嗎?
好像看不大懂.

dragonH iT邦大師 4 級 ‧ 2019-07-08 20:30:15 檢舉

應該不是那個的關係/images/emoticon/emoticon37.gif

codepen

我要發表回答

立即登入回答