Side Navigation Tooltip / Popup Bubble
I’ve had quite a few questions regarding the tooltip on my side navigation so I figured I would write a tutorial on it. The tooltip used on my blog was actually from www.jQueryForDesigners.com, but I decided to write my own with some simple jQuery. View Demo Step1 - Create Wireframe We will first start by creating the wireframe of the side navigation. HTML <ul class="sidenav"> <li> <a href="#">Hom
【CSS】孫メニューまでオッケーなCSSのプルダウンメニュー | バシャログ。
以前にご紹介した「CSSで実現するプルダウンメニュー」のコメントで、孫メニューまでプルダウンする方法のリクエストをいただきましたので、ご紹介します。 確認ブラウザは IE7、IE8、Firefox3、Chrome2、Opera9、Safari3 です。 CSS のみでは IE6 対応が不可能ですが、前回同様 IE の独自機能（DHTML）を併用することで IE6 でも孫メニューまでのプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 バシャログ。 バシャログ.biz マニュアル制作 Document_blog ペンペケペン ローカライズ 今日のIT英語 検索エンジン Yahoo! Japan Google 画像検索 動画検索 マップ ニュース グループ Goo excite Biglobe 週刊少年漫画 少年ジャンプ
[CSS]幅指定をしないで中央配置するナビゲーションを実装するスタイルシート
各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Anywidth dropdown with centered top and sub levels demo ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。 IE用に条件付コメントでテーブル要素を使用しています。 ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。 また、同じくドロップライン型のものも公開されています。
Sexy Drop Down Menu w/ jQuery & CSS - noupe
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
Stu Nicholls | CSS PLAY | Professional variable width menu #4
CSS MENUS › Professional variable width dropdown menu #4 Date : 15th October 2008 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Pull Down Menu Also called a "drop-down menu" or "pop-down menu," the common type of menu used with a graphical user interface (GUI). Clicking a menu title causes the menu items to appear to drop down from that positi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
リンクをデザインするCSSいろいろ - DesignWalker