アコーディオンメニューがかくれてしまう。

締切済

質問者：jbc198
質問日時：2016/10/06 23:44
回答数：2件

はじめまして。大変困っていたので教えていただけると助かります。
スマホアコーディオンメニューを作成中だったのですが、アコーディオンメニューをアクティブにすると下のメニューがかくれてしまい困っています。
宜しくお願いします。

----------------------------
ｈｔｍｌ
----------------------------
<nav>
<div id="menubg">
<div id="headnav">

<ul class="main-nav clearfix">
<li><a href="/">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li>
<a class="toggle">〇〇〇〇〇〇</a>
<ul>
<li><a href="/">〇〇〇〇〇〇</a></li>
<li><a href="/">〇〇〇〇〇〇</a></li>
<li><a href="/">〇〇〇〇〇〇</a></li>
<li><a href="/">〇〇〇〇〇〇</a></li>
</ul>
</li>

<li><a class="toggle">〇〇〇〇〇〇</a>
<ul>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
</ul>
</li>
<li><a href="//">〇〇〇〇〇〇</a></li>
<li><a href="/">〇〇〇〇〇〇</a></li>
<li><a href="//">〇〇〇〇〇〇</a></li>
</ul>
</div>
</div>
</nav>

-----------------------
ｃｓｓ
-----------------------

@media screen and (max-width: 800px) {

#menubg {

}
.menubtn {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 60px;
background: #336699;
cursor: pointer;
z-index: 999;

}
.menubtn:after {
content: 'メニュー';
position: absolute;
left: 3px;
bottom: 2px;
color: #fff;
font-size: 11px;
white-space: nowrap;
}
.menubtn-inner {
padding: 10px 0 0 10px;
}
.button {
width: 30px;
height: 24px;
background: url(../img/base/btn.png) no-repeat top;
}

#headnav {
position: fixed;
display: block;
left: auto;
top: 0;
right: -200px;
width: 200px;
overflow-y: auto;
padding: 5px 5px;
box-sizing: border-box;
height: 100%;
-webkit-overflow-scrolling: touch;
-webkit-transition: right .2s;
transition: right .2s;
background-color: rgba(255, 255,255, 0.8);
z-index: 10000;
will-change: transform;
}
#headnav.sliding-menu {
right: 0;
}
.menubtn {
display: block;
}
/* main-nav */
.main-nav {
position: absolute;
margin: 0;
padding: 0;
width: auto;
z-index:9999;
}
.main-nav ul{
list-style-type: none;

}

.main-nav li{
padding:7px 0;
opacity:1;
display: inline;
float:none;
width:auto;
margin-bottom:3px;
border:none;

}
.main-nav li:first-child{
display: inline;
float:none;
width:auto;
margin:0;
padding:7px 0;
border:none;
}
.main-nav li+ li {
border-left: 0;
border-right:0;

}
.main-nav li a{
display: block;
padding:15px 20px;
width:160px;
background-color:#488a8a;
color:#fff;
font-size:1.2em;
text-align:center;
text-decoration:none;
border-bottom:1px solid #fff;
font-family:
"ヒラギノ明朝 ProN W3",
"HiraMinProN-W3",
"HG明朝E",
"ＭＳＰ明朝",
"MS PMincho",
"MS 明朝",
serif;
}

.main-nav li ul{
list-style: none;
top:auto;
left:auto;
margin: 0 auto;
padding: 0 auto;
}

.main-nav li ul li{
width:50%;
}
.main-nav li ul li a{
padding: 17px 20px;
border-top: 1px solid #fff;
background: #99ccff;
text-align: center;
}

.main-nav ul li a:after, .main-nav ul li a.active:after{
font-size: 12px;
right: 12px;
top: 0;
color: #fff;

}

}

------------------------------------
ｊｓ
------------------------------------
<script type="text/javascript">
// ACCORDION
$(function() {
function accordion() {
$(this).toggleClass("active").next().slideToggle(300);
}
$(".main-nav .toggle").click(accordion);
});
</script>

回答ありがとうございます。
頼まれて修正していたのですが、この書き方で書かれていたので、かなり戸惑っていました…
確かに一から書き直したほうが早いと思うのですが…
詳しい回答ありがとうございます。
サンプル楽しみにしております。

No.2の回答に寄せられた補足コメントです。補足日時：2016/10/10 19:52
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： pikopa
回答日時：2016/10/06 23:49

アコーディオンで開くリストの位置をずらせばいいんです。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
具体的にはどの部分になるか教えていただけると助かります。
宜しくお願いします。

通報する

お礼日時：2016/10/06 23:54

No.2

回答者： ORUKA1951
回答日時：2016/10/10 14:32

なんでそんな酷いHTMLやCSS書くのですか？他人は無論、自分でもメンテナンスできないのでは？？？

　そのままコピペしたけど動作しないし、どうアコーディオンさせたいかもわからないのですが、
HTMLには、文書構造をマークアップするだけで、デザインは考慮しない。
プレゼンテーションは、その文書構造に基づいてセレクタで指定してデザインしていくのですよ。
<div id="menubg">
<div id="headnav">
<ul class="main-nav clearfix">
なんて、idやclassどころか、div要素も一切不要です。

HTMLには、これだけしか書かない!!
<body>
　<header>
　　<nav>
　　　<ul>
　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　<li><a href="/profile">〇〇〇〇〇〇</a></li>
　　　　<li><a href="#products">〇〇〇〇〇〇</a>
　　　　　<ul id="products">
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　</ul>
　　　　</li>
　　　　<li><a href="#books">〇〇〇〇〇〇</a>
　　　　　<ul id="books">
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　</ul>
　　　　</li>
　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　</ul>
　　</nav>
　</header>
これで、.main-nav ul{}なんて書かなくてもheader nav ul{}とCSSからも分かりやすくなるし、詳細度も 003 と低く抑えられる。

HTMLには、文書構造をマークアップするだけで、デザインは考慮しない。
プレゼンテーションは、その文書構造に基づいてセレクタで指定してデザインしていくのですよ。
<div id="menubg"><-- 文書構造上意味ない!!、
<div id="headnav"><-- 文書構造からわかる
<ul class="main-nav clearfix"><--- クリアフィクスしなくなったときはどうするの(^^)
なんて、idやclassどころか、div要素も一切不要です。

HTMLには、これだけしか書かない!!
<body>
　<header>
　　<nav>
　　　<ul>
　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　<li><a href="/profile">〇〇〇〇〇〇</a></li>
　　　　<li><a href="#products">〇〇〇〇〇〇</a>
　　　　　<ul id="products">
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　　</ul>
　　　　</li>
　　　　<li><a href="#books">〇〇〇〇〇〇</a>
　　　　　<ul id="books">
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　　</ul>
　　　　</li>
　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　　<li><a href="/">〇〇〇〇〇〇</a></li>
　　　　<li><a href="//">〇〇〇〇〇〇</a></li>
　　　</ul>
　　</nav>
　</header>
これで、.main-nav ul{}なんて書かなくてもheader nav ul{}と、HTMLは無論、CSSからも分かりやすくなるし、詳細度も 003 と低く抑えられる。

これをどうデザインするかのサンプルは後で・・・