【CSS】CSSだけで作るドロップダウンメニュー（多階層）
【CSS】CSSだけで作るドロップダウンメニュー（多階層） 公開日:2019/06/13 /最終更新日:2019/06/30 CSS Technique 今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードになります。 「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。細かく分けて解説入れながらやっていきますので、「うんちくなんいかいらない！」という方は、最後までジャンプしてください。最後に全てのコードを記載します。 親階層 まずは親階層です。 HTML <ul class="gnav"> <li><a href="">Menu1</a></li> <li><a href="">Menu2</a></li> <li><a href="">Menu3</a
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法 | 田舎フリーエンジニアのワークログ
Last-Modified: 2019/02/26 【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法 javascript ボタンを押すとナビメニューがアニメーション表示されるシンプルなハンバーガーメニューを作成します。レスポンシブ化するときにおすすめです。 デモ htmlでメニュー部分を作成 CSSでスタイリング jQueryで動きをつける 実際に動きを出すのはCSS部分です。jQueryはクラスを付与するために使います。 スポンサードサーチ HTML <!-- ナビメニュー部分 --> <nav class="NavMenu"> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4<
detailsタグでクリックで開閉するFAQコンテンツ
Result detailsタグでFAQコンテンツっぽいやつを作るサンプルです JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね 例によってIEでは使えないHTMLタグですが、便利には違いないですね summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。 csssummary { display: block; outline: none; } summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease; } /*答え部分が開いている場合の処理*/ details[open] summa
ホームページのパーツ作成【無料】
ブラウザ操作だけで、文字や画像のデザインや動きを自動生成することが出来ます。 HTML,JavaScript,CSS(STYLE)が自動で作成されますので、コピー＆ペーストだけでホームページに反映することが出来ます。 JavaScriptは「jquery」を使用していませんので、「jquery」が利用できない環境でも利用可能です。 文字のデザインと動きを自動作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
