グローバルナビゲーション

6-7.png
グローバルナビゲーションとは上記のような案内メニューを表示することです
サイト全体の構成を分かりやすく表示し、目的のページへ導く役目があります。


b_simple_127_0L.大png.png


6-4.png
通常は薄いピンク色、カーソルを合わせると1番右の濃いピンクになります

down-circus-icon.png
6-2.png
デザイン 右矢印1 デザイン設定 右矢印1 デザインスタイル
「HTML編集」の上記のところへ入力


<div id="menu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</div>


「メニュー1~4」のところをお好きなメニューに変更してください
同じソースを追加すれば、メニューは増やせます
"#"右矢印1#を目的のページのurlに変更する

次はスタイルシートの1番下へ下記を追加

#menu ul{
margin: 0;
padding: 0;
list-style: none;
}

#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}

#menu li a{
display: block;
border: 1px solid #666;
background-color: #ccc;
padding: 3px;
text-decoration: none;
color: #333;
width: 100px;
margin: 1px;
text-align: center;
font-size: 14px;
}
#menu li a:hover{
background-color: #2d56be;
color: #fff;
}


スタイルシートの下記を変更するとお好きな色で作成できます
notes-edit-icon.png
#menu li a {色・装飾など
border: 1px solid#666;枠線の色・線の種類・色
background-color:#ccc;背景色
padding:3px;枠線内の余白
color: #333;文字の色
width: 100px;一つのメニューの幅
margin: 1px;メニュー間の余白
text-align: center;文字の位置
font-size: 14px;文字の大きさ
#menu li a:hover{カーソルが乗った時の指定
background-color: #2d56be;背景色
color: #fff;文字色




b_simple_127_0L.大png.png


6-5.png
左に線を入れただけのシンプルなもの・カーソルを乗せると1番右の青色にかわる

down-circus-icon.png
6-2.png
デザイン 右矢印1 デザイン設定 右矢印1 デザインスタイル
「HTML編集」の上記のところへ入力


<div id="menu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</div>


"#"右矢印1#を目的のページのurlに変更する
ここまでは先ほどと同じです


スタイルシートの1番下へ下記を追加
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a{
display: block;
border-left: 8px solid #ff1493;
background-color: #fff;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 100px;
margin: 1px 0px;
text-align: left;
font-size: 14px;
}
#menu li a:hover{
border-left: 8px solid #000080;
background-color: #fff;
}


スタイルシートの下記を変更すればお好きな色、配置で作れます
notes-edit-icon.png
#menu li a{色・装飾など
border-left: 8px solid #ff1493;左側に線・線の太さ・線の種類・色
background-color:#fff;背景色
padding: 3px;枠線内の余白
color: #333;文字の色
#menu li a:hover{カーソルが乗った時の指定
border-left: 8px solid #000080左側に線・線の太さ・線の種類・色
background-color: #fff;背景色



b_simple_127_0L.大png.png


6-6.png
HPぽくタブで作成しました。タブは画像です。
タブ画像はこちらのサイトで無料で作れます 「TABS GENERATOR」
通常は下が白で、カーソルを合わせると1番右になります

「HTML編集」は上記と同じです。

スタイルシートの1番下へ下記を追加
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu li{
display: inline;
padding: 0;
margin: 0;
float: left;
}
#menu li a{
display: block;
background:url("画像url")no-repeat;
border-bottom: 5px solid #fff;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 140px;
margin: 3px;
text-align: center;
font-size: 14px;
}
#menu li a:hover{
background:url("画像url")no-repeat;
border-bottom: 5px solid #ff1493;
}


notes-edit-icon.png
#menu li a{
background:url("画像url");ここへ画像のurlをいれる
width: 140px;ここで横幅を指定します
作成した画像の大きさに合わせてね
background-image背景画像を指定
background-repeat背景画像のリピートの仕方を指定する





b_simple_127_0L.大png.png


























この記事へのコメント