スマートフォンサイトを作ろう!(5)スライドメニューを整える

0
    JUGEMテーマ:wordpress

    さて今回の記事、最初にやりたいことがあります。
    メニューボタンを、拾ってきた画像ではなく、よくある「3本線」にしたいんです。
    何かうまい手はないか、と色々調べていたところ見つけたのがこちらの記事です。

    【CSS】スマートフォンサイトでよく使われてる3本ラインのメニューアイコンをCSSだけで作ってみる

    これこれ、これを探していたんです。もう完璧まるパクリで行かせていただきます。

    まずhtmlはこの1行です。
    <div id="global_nav"><a id="menu_button" class="ico-menu" href="#">menu</a></div>
    


    それから、CSSがこちら。
    .ico-menu {
        display: inline-block;
        overflow: hidden;
        position: relative;
        width: 20px;
        height: 0;
        padding-top: 18px;
        background: #000;
    }
    .ico-menu::before,
    .ico-menu::after {
        position: absolute;
        left: 0;
        content: "";
        width: 20px;
        height: 0;
        border-top: 3px solid #fff;
    }
    .ico-menu::before {
        top: 4px;
    }
    .ico-menu::after {
        bottom: 4px;
    }
    #global_nav {
        float: right;
        margin:5px;
    }
    


    併せてh1タグをfloatで左に寄せると、メニューボタンがタイトルの横に並んで、こうなります。


    ほーら、いい感じ☆


    続いて、開いたメニューの体裁を整えます。
    こちらは、本家jPanelMenu.comの体裁をいただいちゃいます。
    jPanelMenuのメニュー部分は、「jPanelMenu-menu」というidが自動的に付けられますので、このidに関するcssをコピってきました。
    #jPanelMenu-menu{
        background:#3b3b3b
    }
    

    これはメニュー部分全体の背景色、濃いグレーです。
     
    #jPanelMenu-menu ul{
        border-bottom:1px solid #484848
    }
    

    これで、メニュー項目の間に薄い線を入れます。
     
    #jPanelMenu-menu li a{
        background:#3b3b3b;
        background:-o-linear-gradient(top, #3e3e3e, #383838);
        background:-ms-linear-gradient(top, #3e3e3e, #383838);
        background:-moz-linear-gradient(top, #3e3e3e, #383838);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #383838));
        background:-webkit-linear-gradient(#3e3e3e, #383838);
        background:linear-gradient(top, #3e3e3e, #383838);
        font-family:"museo-sans","Museo Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight:300;
        font-weight:700;
        display:block;
        padding:0.5em 5%;
        border-top:1px solid #484848;
        border-bottom:1px solid #2e2e2e;
        text-decoration:none;
        text-shadow:0 -1px 2px #222;
        color:#f7f7f7
    }
    

    これでメニュー項目の背景に軽いグラデーションを入れます。文字色はほぼ真っ白です。
     
    #jPanelMenu-menu li a:hover,#jPanelMenu-menu li a:focus{
        background:#404040;
        background:-o-linear-gradient(top, #484848, #383838);
        background:-ms-linear-gradient(top, #484848, #383838);
        background:-moz-linear-gradient(top, #484848, #383838);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #484848), color-stop(1, #383838));
        background:-webkit-linear-gradient(#484848, #383838);
        background:linear-gradient(top, #484848, #383838)
    }
    

    これで、マウスを乗せたりフォーカスが入った時のグラデーションの色を、やや明るくします。
     
    #jPanelMenu-menu li a:active{
        background:#363636;
        background:-o-linear-gradient(top, #3e3e3e, #2e2e2e);
        background:-ms-linear-gradient(top, #3e3e3e, #2e2e2e);
        background:-moz-linear-gradient(top, #3e3e3e, #2e2e2e);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(1, #2e2e2e));
        background:-webkit-linear-gradient(#3e3e3e, #2e2e2e);
        background:linear-gradient(top, #3e3e3e, #2e2e2e);
        -moz-box-shadow:0 2px 7px #222 inset;
        -webkit-box-shadow:0 2px 7px #222 inset;
        box-shadow:0 2px 7px #222 inset;
        border-top-color:#222;
        padding-top:0.55em;
        padding-bottom:0.45em
    }
    

    これでメニュー項目をタップしたときの背景を逆に少し濃くし、押された感を出しています。

    ということで出来上がりはこちら。


    さすが丸パクリだけあって、いい出来です。

    次に、不要なメニューを消します。
    トップにもともとあったグローバルメニューは、header.phpから削除します。
    ただし、このグローバルメニューにclrfixがかけてありました(parallelというクラスを与えています)。この代わりにHeader部分にparallelクラスを与えてやります。
    footer.phpに「もともと」あったメニューも、問答無用で削除します。

    消し方が難しいのは、jPanelMenu用にfooterに入れたメニューです。これは、文字を画面外に飛ばし、floatで横に並べてしまいましょう。
     
    <div id="footer_menu">
            <?php get_template_part('slider'); ?>
    </div>
    

    というようにidを付けたら、
     
    #footer_menu {
        text-indent: -9999px;
        display:block;
        float:left;
    }
    


    これで、不要なメニューは全て消えました☆


    それでは今回はここまで。次回はその他全体的な体裁を整えます。



     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天