レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」 – bl6.jp
DropDownMenuは、レスポンシブに対応した多階層なドロップダウンメニューを実装することができます。jQueryとLESSが使われているとのこと。レスポンシブ対応のドロップダウンメニューを自サイトに取り入れたい人にはピッタリですね。 以下、DropDownMenuの実際のデモになります。 デモ デモでは画面上部に、Menu 1、Menu 2、Menu 3というナビゲーションが表示されており、各メニュー項目にマウスオーバーすると、その下にある階層のメニューが表示されます。 マウスオーバーしていくことで、次々に下にある階層のメニューが現れてくるので、効率よく目的のメニュー項目へアクセスできます。 複雑なアニメーションもなく、シンプルにメニュー項目が表示されていくのがいいですね。 また、DropDownMenuはレスポンシブにも対応しているのが特徴です。デモページの画面の横幅を縮小していく
よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる – bl6.jp
blockquoteのデザインって色んなパターンがあって面白いですよね。比較的よく見られるパターンの一つとしては、左上と右下にダブルクォーテーションをつけているのなんかが結構あります。で、画像とか作るのが面倒くさかったりしちゃう人はCSSだけでそれなりのものを作ってみるっていうのもアリなのかなと思ったりもします。なので、今回はそれを作ってみました。 [ads_center] CSSでblockquoteをデザイン ダブルクォーテーションは疑似要素の :before、:afterを使用してcontentで挿入しています。配置に関してはpositionやline-heightで調整していけばなんとか目的の場所に収まるんじゃないかなーと思います。以下サンプルです。 サンプル sampletext sampletext sampletext sampletext sampletext sample
jQueryのif文を使ってタグやクラス名によって条件分岐するやり方 – bl6.jp
jQueryで普通にif文を使った条件分岐のやり方です。指定したタグやクラス名があった場合や、子要素にそれがあったりした時の処理の振り分けなんかをやりたかったんですが、思ったようにならなかったので調べてみました。で、いくつか見つかったのでメモがてら記事にしてみることにします。 条件分岐の時に使えそうなメソッド 条件によって処理を振り分けることはプログラムを書く上でとても重要な感じがするので、使う頻度も結構ありそうな感じです。 hasClassを使ってクラス名を指定する hasClassメソッドを使えばクラス名を取得することができます。これを使ってsampleというid名の中にtextというクラス名がある時とない時の処理の振り分けてみます。 JavaScript $(function(){ if($('#sample').children().hasClass('text')) { $('p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
