ar0のブックマーク - はてなブックマーク

【マウスオーバー】ヘッダーのグローバルナビゲーション展開【PCサイト用】
PCサイトでヘッダーのグローバルナビゲーションをマウスオーバーするとサブナビゲーションが展開します。透過の背景色の上にナビゲーションを配置して見やすくしています。サンプルデモはこちら htmlのコードは下記になります。メインビジュアルは背景画像で表示するため、空のdivタグを用意しclass=”mv-block”を付与します。 <header> <div id="header"> <ul class="menu-list"> <li><a href="#">メインメニュー01</a></li> <li><a href="#">メインメニュー02</a></li> <li><a href="#">メインメニュー03</a></li> <li><a href="#">メインメニュー04</a></li> </ul> <ul class="sub-menu-list sub01"> <li>
ar0 2023/01/30
リンク
【マップ】Googleマップのマイマップでルート表示する際の縮尺指定
Googleマップのマイマップでルートを表示します。マイマップで地図埋め込み用のiframeタグのソースには縮尺の指定がありません。マップのURLにパラメータを追加することで縮尺が指定できます。ページ表示時非表示・縮尺指定ありページ表示時非表示・縮尺指定なしページ表示時表示・縮尺指定なし htmlのコードです。外側のクラス名map_wrapのdivタブはレスポンシブ用です。ポイントはiframeタグのsrc属性の最後に追加した「&z=15」の部分です。これが縮尺指定のパラメータです。zには0から23までの整数を指定して、地図の拡大率を設定できます。マイマップで地図埋め込み用のiframeタグのソースにはデフォルトで縮尺の指定がありませんので、縮尺を指定したい場合はこのようにパラメータを追加する必要があります。なおiframeタグはデフォルトでborderが付くため、style=”bo
ar0 2022/09/20
リンク
【ムービー】ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生【レスポンシブ編】
Youtube IFrame Player APIを使ってhtmlに埋め込んだ動画を、ページ表示時にモーダルウィンドウで表示します。モーダルウィンドウはjQueryプラグインのjquery.magnific-popup.jsを使用します。動画はレスポンシブ対応にします。サンプルデモはこちら htmlのコードは下記になります。 id名movie-content01を付与したdivタグが、指定したyoutubeの動画を読み込んだiframeタグに置き換わります。クラス名movie-content-wrapのdivタグはレスポンシブ対応用です。またmagnific-popupで表示する対象ソースの指定用にid名movie01を付与します。 <div id="movie01" class="movie-content-wrap mfp-hide"> <div id="movie-content
ar0 2022/03/24
リンク
1