[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
Top Drawer - A smooth dropdown menu for responsive web design | Experiment #5
Aim To demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript. Ingredients CSS Transforms Modernizr FT Labs Fast Click (optional - for speedy tap events) JavaScript (I used jQuery, but you could easily do this with VanillaJS) Method Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters
Pure CSS transition effects for off-canvas views
Pure CSS transition effects for off-canvas views You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. Demo Download v1.0.2 Documentation
CSS3：CSSだけで作るドロワーメニューver2 – ハック｜オープンソース高速化AMI「kousoku AWS」
サンプルはこちら。 See the Pen CSS only drawer menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以前作ったものをソース的により合理的に、かつ見た目もそれっぽく直したものです。 HTML <input type="checkbox" class="check" id="check" /> <div class="menu"> <label for="check" class="btn"><i class="fa fa-bars"></i></label> <ul> <li><a href="#"><i class="fa fa-globe"></i>About</a></li> <li><a href="#"><i class="fa fa-desktop"></i>Product</a></li> <li>
Mouth-Watering Restaurant Menu Designs | EntheosWeb
An array of delicious food menu template designs to tickle your imagination! Check out these creative menus and flyer template designs for restaurants, cafe’s, bistro’s, coffee shops, ice cream shops, fast food, bakeries and more! These are read-made, print-ready design templates that you can buy and customize with your own details.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プラグインやチュートリアル 25
めしおのアフィリエイト教材レビューブログ