[B! menu] web_designerのブックマーク

知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ

作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。エンジニア速報は Twitter の@commteで配信しています。もくじスライドショー１．カルーセル（横）２．フェードアウト３．画像と文字をスライド４．文字が遅れて移動する効果５．異なるタイミングを設定できるナビゲーション・メニュー６．多階層ドロップダウンメニュー７．多階層効果つき８．スマホではドロップダウン９．スマホではセレクトメニューに１０．Amazon風メガドロップダウンメニュー１１．横スライド１

web_designer 2014/04/08

リンク

Horizontal Drop-Down Menu | Codrops

A responsive horizontal drop-down menu inspired by the Microsoft.com menu. This large horizontal drop-down menu simply shows the sub-menu when an it em gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens. The HTML <nav id="cbp-hrmenu" class="cbp-hrmenu"> <ul> <li> <a href="#">Products</a> <div class="cbp-hrsub">

web_designer 2013/03/15

リンク

jQueryを使った一定以上スクロールすると上に固定される横メニュー

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。今回はそんな横メニューをできるだけ親切に解説してみます。今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l

web_designer 2013/03/06

リンク

アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ

デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。

web_designer 2013/03/04

リンク

サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

web_designer 2012/12/26

リンク

jQueryでカレントページの要素にclass=”current”を付加する方法 – creamu

web_designer 2012/08/20

リンク

美しい横メニューの作り方

<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:

web_designer 2012/05/09

リンク

もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ

2013年11月22日 Webサイト制作, ユーザビリティどのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ナビゲーションメニューの設置ポイントすべてのページに基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン

web_designer 2011/10/20

リンク

http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/

web_designer 2011/08/17

リンク

[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー

IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。デモページ：IE6での表示下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi