CSSについて勉強中のポイントと実現したいこと

質問

• CSSについて勉強中のポイントとして、以下のサイトのCSSをベースに学んでいます。
• 実現したいことの1つは、スマホサイズ表示での上メニューをPCサイズ時のサイドメニューと同列に入れたいことです。
• また、PCサイズ時に「コンセプト」を「採用情報」の下に配置したいと思っています。

回答No.3

Ogre7077

No.2 の補足に対して

この手の全体的に良くデザインされたテンプレートの場合、
下手な改造を加えるのは良くないので、
素直に提供元に発注するのをオススメします。

それでもやるならば

-- html
<header><nav id="g_navi">
_ <a class="menu">メニュー一覧<span></span></a>
_ <ul class="gl_menu"> ...メニュー... </ul>
</nav></header>
...
<div id="side">
_ <div class="side_box"> ... </div>
_ <h3 class="menu">Site Menu<span></span></h3>
_ <div class="side_box gl_menu"> ...メニュー... </div>
_ <div class="side_box"> ... </div>
</div>

-- css
@media screen and (min-width: 760px){
#side h3.menu span { ... }
#side h3.menu span:after { content: "表示する ▼"; }
#side h3.menuOpen span:after { content: "閉じる ×"; }
}

-- js
$(function(){
$(".gl_menu").hide();
$(".menu").click(function(){
$(this).toggleClass("menuOpen").next('.gl_menu').slideToggle();
});
});

お礼

ご連絡が遅くなり大変申し分かりません。
お返事ありがとうございます。

実現したかったことが分かりづらかったので、画像を用意してみました。
http://dandy.nusutto.jp/sample_menu.jpg

今、少々時間が取りづらい状況のため連絡が遅れてしまう可能性がありますがご了承ください。

よろしくお願い致します。

補足

※済みません。以下のお礼を書く相手を間違えました。

ご連絡が遅くなり大変申し分けありません。
お返事ありがとうございます。

ご教授頂いたもので概ね実現できたのですが、あまり時間が取れておらず詰めきれていませんので、もう少し自分で考えてみます。

今、少々時間が取りづらい状況のため連絡が遅れてしまう可能性がありますがご了承ください。

よろしくお願い致します。