現在ruby on railsでhtmlとcssでビュー部分を作っております。
railsと言ってもこのviewのコードには軽いlink_toヘルパーメソッドがあるだけなのでほとんど、htmlとcssの質問です。
//html <div class="container"> <h1>テスト</h1> <div class="menu"> <div class="menu1"> <label for="Panel1">・メニュー1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><%= link_to 'サブメニュー1','/men1/index' %></li> <li><%= link_to 'サブメニュー2','/men2/index' %></li> </ul> </div> <div class="menu1"> <label for="Panel2">・メニュー2</label> <input type="checkbox" id="Panel2" class="on-off" /> <ul> <li><%= link_to 'サブメニュー1','/men1/index2' %></li> <li><%= link_to 'サブメニュー2','/men2/index2' %></li> </ul> </div> </div> </div>
//css #panel1 { background: green; color: #81DAF5; padding: 12px; display: block; margin: 0; border: 1px solid #fff; } #panel2 { background: green; color: #fff; padding: 12px; display: block; margin: 0; border: 1px solid #fff; } .menu1{ position:relative; background: white; color: #0040FF; padding: 12px; display: inline-block; margin: 0; border: 1px solid #fff; } .menu2{ position:absolute; bottom:10; color: #0040FF; margin: 0; border: 1px solid #fff; } input[type="checkbox"].on-off{ display: none; } .menu ul { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; margin: 0; padding: 0; list-style: none; } .menu li { padding: 5px; } input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; }
今このhtml、cssファイルをブラウジングすると
メニュー1 メニュー2 ・サブメニュー1 ・サブメニュー1 ・サブメニュー2 ・サブメニュー2
以上の様な形でメニューをクリックするとツリー(アコーディオン型)のサブメニューが出てくるというコードを書いております。
ここに加えて
メニュー1 メニュー2 ・サブメニュー1 ・サブメニュー1 ・サブメニュー2 ・サブメニュー2 メニュー3 メニュー4 ・サブメニュー1 ・サブメニュー1 ・サブメニュー2 ・サブメニュー2
メニュー1とメニュー2のすぐ下にメニュー3とメニュー4というツリーメニューの要素を下に回り込ませたい(配置したい)場合どうすれば良いでしょうか?
メニュー1のdiv要素のpositionをrelativeとして、その中にメニュー3のdiv要素のpositionをabsoluteとしてもダメでした。
見よう見まねで書いたCSSですのでごちゃごちゃしており申し訳ございませんがよろしくお願い致します。
#再修正
リンク内容
メニューツリーで参考にしたCSSの記事はこちらです
この縦型のツリーにdisplay: inline-block;を書き加え、横並びにしてます。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー