ナビゲーションバーを均等に配置してリンクを設置する

続き

simpledancer.hatenablog.com

さて続きです！

昨日までに見た目（css)とリンクの大元のコードはhtmlに書き込みましたので

f:id:simpledancer:20170120182638p:plain

こんな感じでできましたが、まだこの状態だと左よりになっていて、さらにリンク先が入っていないのでメニューをクリックしても何も出てきません。

まずメニューを均等に並べる

デザインCSSを変更していきます。

#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*ここを追加*/

line-height: 40px;/*２*/
background: #444;/*９*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}

そして

#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 20%;/*ここを自分のカテゴリ数を考慮して%を入れる。

私の場合は100/5カテゴリ=20なので20%*/

そうすると

f:id:simpledancer:20170121122406p:plain

均等になりました！

カテゴリーの中身の変更

ヘッダ＜タイトル下

ここのhtmlを変更/追加します。

参考にさせていただいたブログはたくさんカテゴリや子カテゴリがあるのでそれを削除していきます。（私の場合必要なのは今の所５カテゴリ2子カテゴリとして）

 <ul id="menu-content">
        <li>
            <a href="１階層目のリンク">カテゴリ１ <i class="blogicon-chevron-down"></i></a>
            <ul class="second-content">
                <li><a href="２階層目のリンク">カテゴリ１-１</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-２</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-３</a></li>
                <li><a href="２階層目のリンク">カテゴリ１-４</a></li>
            </ul>
        </li>