単純なドロップダウン アコーディオン ボタンに反応して変換するサイドバー リストがあります。問題は、ウィンドウのサイズを小さく変更すると、リストを開いてから閉じてから、ウィンドウのサイズを大きく変更することです。リストは「デスクトップ」形式で再表示されません。
デモ: http://iamalecschmidt.com/newblog/
簡単な Javascript を使用してメニューを切り替え、サイドバーをメニューに切り替えています。
HTML:
<aside class="left-sidebar">
<p class="intro">Hey! I’m Alec.</p>
<p class="bio">
I <a href="#">design</a> interfaces for websites & apps, I also
<a href="#">cook</a> and I am an aspiring front-end
<a href="#">developer</a>.
</p>
<div class="leftNavWrap">
<ul class="leftNav">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a class="topicsButton" href="#">Topics <span>▼</span></a>
<a class="dribbbleIcon" href="#">Dribbble</a>
<a class="twitterIcon" href="#">Twitter</a>
</div>
</aside>
ジャバスクリプト:
<script type="text/javascript"> // responsive menu
jQuery(document).ready(function($){
/* prepend menu icon */
$('p.bio').append('<div id="menu-button"><p>Menu</p></div>');
/* toggle nav */
$("#menu-button").on("click", function(){
$('div.leftNavWrap').slideToggle();
$(this).toggleClass("active");
});
});
</script>