忍者ブログ
音楽制作、Webデザイン(HTML,CSS,JavaScript)、プログラミング(Java,C,PHP)、日常の話題を集める「情報ターミナル」
ブログ内検索
アンケート実施中です
Creative Commons
クリエイティブ・コモンズ・ライセンス
当ブログのすべての コンテンツは クリエイティブ・コモンズ 表示 - 非営利 - 継承 2.1 日本 ライセンスの下に利用可能です。 他サイトからの引用につきましては、引用元サイトの権利に準拠します。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

この記事は役に立ちましたか?あなたの1クリックに励まされます!              



CSS3で動的でスタイリッシュなwebページを実現しよう。
Webデザイン・ビギナーでも大丈夫な、20分で作れる簡単ドロップダウン・メニューのチュートリアルを紹介するよ。



Step1. HTMLファイルにタグを記述するよ
下図のようにHTMLファイル(のbody内)に記述しよう。

<ul>
     <li><a href="#">My Dashbord</a></li>
     <li><a href="#">Likes</a></li>
     <li><a href="#">Views</a>

            <ul>
                    <li><a href="#" class="documents">Documents</a></li>
                    <li><a href="#" class="messages">Messages</a></li>
                    <li><a href="#" class="signout">Sign Out</a></li>
            </ul>

     </li>
     <li><a href="#">Uploads</a></li>
     <li><a href="#">Videos</a></li>
     <li><a href="#">Documents</a>
</ul>
 

これはブラウザではこのように表示されるよ。

黒点がメニューの大まかなカテゴリ(メインメニュー)で、白点がさらに大カテゴリの中の細かいカテゴリ(サブメニュー)になっているね。ここからメインメニューを横に並べ、はじめ見えているのはメインのみで、マウスが重なるとサブメニューが開くようにしていくのだ。


Step2. メインメニューのレイアウトとデザインをするよ
HTMLファイルから呼び出すCSSファイルに、下図のように記述しよう。
 
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.menu {
    height: 40px;
    width: 505px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.menu ul{
   display: none;
}

 
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
 
色や大きさ、余白取りなどの設定をしてあるね。さらにリストスタイル(黒点)を無くし、block要素としてfloat: left;で横に並ぶようにすることで、メニューらしい外観に近づけているよ。
あと、とりあえず、作業しやすいようにサブメニューは今は見えない状態にしておきたいので、緑の箇所を一時的に記述してあるよ。

ここまで記述すると、ブラウザの表示は下のようになる。

メニューバーはそれらしいけど、メインメニュー項目がくっついちゃっているね。
表記もまだ、ただの文字リンクっぽい。なので、ここをこれからさらにデザインして行くよ。


Step3. メインメニューのリンクのデザインをするよ


.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
 
paddingをとって、さらにborder-leftとborder-rightで各メニュー項目の間に仕切りを作っている。文字色も、よりメニューバーに合う白系の色(#f3f3f3)に変更して太字(bold)にし、文字リンクっぽさを解消すべく下線を無くして(text-decoration:none;)いる。そうすることでよりメニューっぽい外観になった。
マウスポインタがメニューリンク項目上に乗る(a:hover)と、文字色が黄緑になる(#8fde62)ように設定。
transition:colorというのは、色が入れ替わるときにパッと変わるのか、じわーっと変わるのかという時間変化の設定だね。

ここまでをブラウザで確認。下のようになっていればOK。




Step4. サブメニューをデザインするよ

まずは、さっき一時的に書いたこの行を削除しよう。

.menu ul{
   display: none;
}
 

で、新しく下を書いて行くよ。

.menu ul {
     position: absolute;
     top: 40px;
     left: 0;
 
     opacity: 0;
     background: #1f2024;
 
     -webkit-border-radius: 0 0 5px 5px;
     -moz-border-radius: 0 0 5px 5px;
     border-radius: 0 0 5px 5px;
 
     -webkit-transition: opacity .25s ease .1s;
     -moz-transition: opacity .25s ease .1s;
     -o-transition: opacity .25s ease .1s;
     -ms-transition: opacity .25s ease .1s;
     transition: opacity .25s ease .1s;
}
 
.menu li:hover > ul {
     opacity: 1;
}
 
.menu ul li {
     height: 0;
     overflow: hidden;
     padding: 0;
 
     -webkit-transition: height .25s ease .1s;
     -moz-transition: height .25s ease .1s;
     -o-transition: height .25s ease .1s;
     -ms-transition: height .25s ease .1s;
     transition: height .25s ease .1s;
}
 
.menu li:hover > ul li {
     height: 36px;
     overflow: visible;
     padding: 0;
}
 
緑の部分に注目しよう。通常ではサブメニューは不透明度(opacity)が0、つまり透明で見えないようになっているね。でもその後、メインメニューにマウスポインタが上に乗ったとき(:hover)の記述のところでは、不透明度(opacity)は1に設定されているので、メインにマウスが乗っかったときサブメニューが見えるようになる。
ここではサブメニューがパッと出るんじゃなく、にょろっと出るように、transition:opacityとtransition:heightで調節してあるよ。


Step5. サブメニューのリンクのデザインをするよ


.menu ul li a {
 
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539;
}
 
.menu ul li:last-child a { border: none; }
サブメニューの各項目の幅は100pxに統一。



Additional Code
次のように記述すると、サブメニュー内に背景を表示させることもできるよ。
urlには背景に使う画像の居場所をちゃんと指定しよう。

.menu a.documents { 
     background: url(../img/docs.png) no-repeat 6px center; 
}
.menu a.messages { 
     background: url(../img/bubble.png) no-repeat 6px center; 
}
.menu a.signout { 
     background: url(../img/arrow.png) no-repeat 6px center; 
}



Step6. 完成!
こういう感じになるよ。




◆プレビュー・ファイルダウンロード
記事掲載元サイト(英語)でプレビュー、ファイルダウンロードができるよ。

プレビューを見る
ファイルをダウンロード
※Twitterでツイートするのがアンロックの条件。

(オリジナル記事:「How to Create a CSS3 Dropdown Menu [Tutorial]」
PR

この記事は役に立ちましたか?あなたの1クリックに励まされます!              

この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
[37]  [36]  [35]  [34]  [33]  [30]  [29]  [28]  [27]  [26]  [24
  • :
  • :


お役に立てました?
よろしければ応援の1clickをお願いします(*^^*)




blogramのブログランキング

にほんブログ村 デザインブログ Webデザインへ


ブログランキング・にほんブログ村へ
順位はこちら。
いつもありがとうございます。
忍者AdMax

ローテックな最先端 Produced by たんたん      Designed by ninja-blog.com
忍者ブログ [PR]
Related Posts Plugin for WordPress, Blogger...