[B! responsive][nav] tytoのブックマーク

8 Ways to Add a Responsive Navigation Menu on Your Site

President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. There are plenty of techniques for imp

tyto 2014/02/20

リンク

[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav

jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクトタッチイベントをサポートクリックとタップの違いを調整スクリプトがオフでも機能 MITライセンス対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+

tyto 2013/04/12

リンク

CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える

Posted: 2012.11.09 / Category: HTML&CSS, javascript / Tag: jQuery, レスポンシブグローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。 html & css 画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述してます。 html <nav> <ul> <li><a href="#" data-label="ホーム"><img src="img/nav01.png" alt="ホーム" width="108" height="58" /></a></li> <li><a href="#" data-label="サ

tyto 2012/11/11

リンク

[JS]レスポンシブデザインもOK、水平タイプのナビゲーションをいい感じにするスクリプト -HorizontalNav

リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 HorizontalNav [ad#ad-2] HorizontalNavのデモ HorizontalNavの使い方 HorizontalNavのデモ水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。デモ：480pxで表示上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。 HorizontalNavの使い方実装は4ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//aja

tyto 2012/06/25