ヘッダー・ナビゲーションを固定表示させるアイデア5つ | Web Design DAY
<header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">Works</a></li> <li class="gnav__menu__item"><a href="">Recruit</a></li> <li class="gnav__menu__item"><a href="">News</a></li> <li class="gnav__menu__item"><a h
プラグイン不要！多階層のモバイル向けドロップダウンメニューを作ってみた！| CSS・jQuery | WebLamps
こんにちは、Aroeです！ 「よし、新しいWebサイトを作ろう」と思って、朝からいろんなテーマ(最近はもっぱらWordpressばっかり使ってる)を探し始めて、気がついた時にはもう日が暮れてるってことがよくあるこの頃です。 最近はいっぱいあるんですよねぇ、テーマの種類が。観てるだけでワクワクします。(笑) そんなテーマ選びの中で、僕が最初に見てしまうのが「ナビゲーションメニュー」（グローバルメニュー）です。トップページや個別記事ページ、ほとんどどのページでも共通して表示される箇所ですからね〜、力を入れて作り込みたいところ。（時間があれば） モバイル対応でいい感じのドロップダウンが見つからない メニュー系のプラグインって、けっこう多種多様なのですが、PC表示の場合はよくても、モバイル表示時のデザインや挙動が「うーん・・・」って感じで納得のいかないものが多かったり、片手間なカスタマイズだとスタ
CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー｜I'll be NET
最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。 バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。 スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分（コンテンツ）をスクロールさせないドロワーメニューを作成してみます。 参考にさせていただいたサイトは記事最下部に記載させていただきました。 DEMO ドロワーメニューのHTMLサンプル たとえば下記のようなHTMLでドロワーメニューを実現します。 <div id="wrap"> <header> <h1>タイトル</h1> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input
CSSのhover(マウスオーバー)でサブメニューを表示/非表示させる4つの方法 | KERENOR { ケレンオール }
「メニューの上にカーソルを乗せるとサブメニューが表示される」というよくある動き。 CSSのみ・CSSとjQueryを組み合わせる・jQueryのみなどなど、色々な方法があると思いますが、みなさんはどのように実装していますか？ 対応ブラウザやレスポンシブの有無などによっても変わってくると思いますが、先日、自分がよく使う方法とは違ったCSSのみでの実装方法を目にしたのでまとめてみました。 【この記事を書いた人】 Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細 サンプル 以下のような動きを想定したHTMLとCSSを作成します。 CSSによるhoverのデモはこちら 共通HTML <header class="sample01"> <ul> <l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【コピペ実装!!】スマホのメニュー展開時にスクロール禁止させる方法 - 気まぐれWEBLOG
