タグ

CSSとメニューに関するkashi57moveのブックマーク (2)

  • 使いやすくなった!UI素材とテクニック集/CSS jQuery版

    作成:2013/12/9 更新:2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー 1.円形 2.タブ 3.ナビゲーション 4.アコーディオン ウィンドウ 5.モーダルウィンドウ 6.フローティングウィンドウ 7.Dialog(ダイアログ) 8.フォーム+バリデーション ボタン 9.Toggle (トグルボタン) 10.Switch (スイッチボタン) 11.Scrubbe

    使いやすくなった!UI素材とテクニック集/CSS jQuery版
  • CSSだけで作る「多階層」なドロップダウンメニュー

    以前書いた「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>

    CSSだけで作る「多階層」なドロップダウンメニュー
  • 1