jQuery＋CSS3で全画面表示するハンバーガーメニュー
Posted: 2019.01.31 / Category: HTML&CSS, javascript jQuery＋CSS3を使用して、ハンバーガーボタンをクリックすると全画面メニューが表示するやつをやってみます！ フェードで表示されるナビゲーション 一つ目はフェードで表示されるナビゲーションです。 See the Pen Full Screen Hamburger Menu 01 by webopixel (@webopixel) on CodePen. html <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> <div id="gloval-nav"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
Posted: 2015.10.28 / Category: javascript / Tag: jQuery ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。 HTML HTMLの構造です。どこにでもあるシンプルなヘッダーって感じです。 今回はこのheader部分を固定します。 HTML <header id="top-head"> <div class="inner"> <h1 class="logo">Fixed Navi</h1> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a hre
脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編
脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編 脱jQueryの道の第二弾です。プラグインを使うまでもない小さな機能はjQuery使わない場合どう書くんだろう。ということでやてってみたいと思います。 投稿日2019年04月18日 更新日2019年04月19日 アニメーションはJavaScriptで制御する方法もありますが、極力CSSでおこないます。 ちなみに脱jQueryの道 第一弾はこちら。 脱jQueryの道 初級編 タブメニュー ディスプレイnoneとblockをフェードインで切り替えたいときはキーフレームアニメーション使うと簡単です。 JavaScript (() => { document.querySelectorAll('.tab-block').forEach((tabContents) => { let activeIndex = 0; c
jQueryのサイドバー固定サブメニュー実装パターン
jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基本構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l
PHPの基本機能で更新しやすいサイトをつくろう
読み込みが完了できないと致命的な場合はrequire、問題ない場合はincludeを、ページで一つだけ表示する場合はonceを付ける、複数表示の場合は付けないという使い分けになるかと思います。 指定日にコンテンツを切り替える クライアントワークだと何日の0時に更新したいといった要望は結構ありますね。 その場合、日付機能を使えば指定した日にコンテンツを切り替えることができます。 <?php date_default_timezone_set('Asia/Tokyo'); $date_now = strtotime(date('Y-m-d H:i')); if ($date_now < strtotime('2018-03-15 00:00')) : ?> <p>2018年3月16日 0時まで表示</p> <?php else: ?> <p>2018年3月16日 0時以降に表示</p> <?p
レスポンシブでハンバーガーメニューになる固定サイドバー
レスポンシブでハンバーガーメニューになる固定サイドバー 近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。 そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。 投稿日2017年09月21日 更新日2017年09月21日 ロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。 HTML 幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。 html <header id="global-head"> <h1 id="brand-logo">Logo</h1> </header> <div id="nav-toggle"> <div> <span></span>
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル（base.scss）を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ
jQueryで作るボタンでスライドするローテーションバナー
Posted: 2010.12.27 / Category: javascript / Tag: jQuery 以前に「jQueryで作るスライドするローテーションバナー」というのを作成したのですが、結構シンプルな作りでちょっと今の時代のあれじゃないよね。ということでボタンをクリックすると次の画像に進んだり戻ったり、ページネーション的なボタンを追加することで、ちょっとだけ実用的なものにしたいと思います。 html+cssを制作する まずはhtmlとcssですね。 「id=banner」divにはメインとなるローテーションさせる画像をリストで配置。 その下の「id=btn-prev」「id=btn-next」は次へ進むボタンと戻るボタンです。 「id=pagenation」にはページネーションボタンが配置されています。 divがちょっと余分じゃね？ って感じがしますが、横並びでセンター揃えに
jQueryでHTML5の独自データ属性（data Attributes）を扱う
Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッ
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた
ライブラリのダウンロード 下記公式サイトからダウンロードしてください。 Raphael_JavaScript Library 解凍したフォルダの中にある「raphael-min.js」を読み込みます。 簡単な図形を描いてみる 最初に簡単な丸を描いてみます。 SVGを描画するための「div」を用意します。 html <div id="svg"></div> cssで適当な大きさに設定します。 css #svg { width: 590px; height: 300px; background: #eee; } 最後にjsです。 JavaScript <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript"> window.onload = function () {
jQueryで作るスライドするローテーションバナー
Posted: 2010.09.15 / Category: javascript / Tag: jQuery ちょっと前まではコーポレートサイトのトップページによくあるローテーションバナー（というかスライドショー？）はFlashで作るのが当たり前でしたが、最近ではjavascriptで作成しているものが増えてきましたね。 ということでjQueryを使用してシンプルなスライドタイプのローテーションバナーを作成します。 html+cssの作成 bannerというidを付けたdivにリストでマークアップした表示する画像を入れます。 画像は全て同じサイズの方が良いでしょう。ここでは320×213の画像を4枚用意しました。 html <div id="banner"> <ul> <li><a href="img/01.jpg"><img src="img/01.jpg" width="320" h
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
