はじめまして。大変困っていたので教えていただけると助かります。
スマホアコーディオンメニューを作成中だったのですが、アコーディオンメニューをアクティブにすると下のメニューがかくれてしまい困っています。
宜しくお願いします。
----------------------------
html
----------------------------
<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>
-----------------------
css
-----------------------
@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 P明朝",
"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;
}
}
------------------------------------
js
------------------------------------
<script type="text/javascript">
// ACCORDION
$(function() {
function accordion() {
$(this).toggleClass("active").next().slideToggle(300);
}
$(".main-nav .toggle").click(accordion);
});
</script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
なんでそんな酷い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 と低く抑えられる。
これをどうデザインするかのサンプルは後で・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
あるあるbotに投稿したけど採用されなかったあるある募集
あるあるbotに投稿したけど採用されなかったあるあるをこちらに投稿してください
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
アコーディオンメニューにすると下部がずれます。
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Dreamweaverで、ul要素の下に写...
-
CSSでulとliを指定し横に並...
-
「CSS」リストの2段組どのよう...
-
css <li>タグについて
-
html/cssの、navを2段にする...
-
メニューの横スクロールバーを...
-
html <ul></ul>の並びで一行空...
-
htmlの<ol>タグで、数字などを...
-
クリッカブルマップ(イメージマ...
-
ulタグやliタグの中でbrタグ...
-
cssの display: flex;で横並び...
-
htmlで行頭を下げる方法
-
list-style-type部分だけ大きく...
-
自社Webページ内の階層リンクへ...
-
CSS li float 2列組み
-
横並びのリストで左端がはみ出る
-
ナビゲーションバーを端まで伸...
-
li 3列表示
-
プルダウンメニューの背景色を...
-
CSS 横並びリストの書き方はど...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報
回答ありがとうございます。
頼まれて修正していたのですが、この書き方で書かれていたので、かなり戸惑っていました…
確かに一から書き直したほうが早いと思うのですが…
詳しい回答ありがとうございます。
サンプル楽しみにしております。