忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2018 . 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

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

    <ul><li>を使ったグローバルナビゲーションMT4導入例



    このエントリーをはてなブックマークに追加
    サンプル
    グローバルナビ

    上の画像のようにグローバルナビ<ul><li>タグとCSSを使って横に表示させる方法です。


    htmlの編集から
    システムメニュー/グローバルテンプレート/ナビゲーションから
    <ul><li></li></ul>を
    <div id="navi"></div>で囲む。

    例)
     
    <div id="navi">
    <ul>
    <li><a href="hoge.html" title="Home">Top</a></li>
    <li><a href="hoge.html" title="about">About</a></li>
    </ul>
    </div>

    CSSの編集

    デザイン/テンプレート/スタイルシートに下記のCSSを追加してシステムの再構築。


    #navi {
    border-bottom: 1px solid #669;
    background: #fff;
    height: 25px;
    }
    html > body #navi,
    html > body #navi ul li a { /* for Safari */
    height: 28px;
    }
    #navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #navi ul li {
    float:left;
    border-right:1px solid #333;
    width: 100px;
    }
    #navi ul li a {
    display: block;
    color: #333;
    font-size: 75%;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2.3;
    text-decoration: none;
    }
    #navi ul li a:link,
    #navi ul li a:visited {
    background: #fff;
    }
    #navi ul li a:hover {
    color: #000;
    background: #ccc;
    }





    実証:Movable Type Pro version 4.261
    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    ■ この記事のトラックバック
    この記事にトラックバックする:
    Movable Type 4.2 に高性能エディタFCKeditorをインストールする HOME apache2 -M モジュールが表示されない
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]