CSS グローバルナビ
目次
CSS
リスト記号非表示
<nav class="globalNavi">
<ul>
<li><a href="page1.html">メニュー</a></li>
<li><a href="page2.html">メニュー</a></li>
<li><a href="page3.html">メニュー</a></li>
<li><a href="page4.html">メニュー</a></li>
</ul>
</nav>
<style>
.globalNavi ul li {
list-style: none;
}
</style>
上下に罫線
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
}
.globalNavi ul li {
list-style: none;
}
</style>
ulの余白削除
<style>
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul li {
list-style: none;
}
</style>
メニューを横並びに
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
}
</style>
メニューの高さ調整
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
}
</style>
各メニューに罫線追加
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
}
</style>
各メニューの文字を中央表示
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
</style>
メニューの上下に余白追加
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
</style>
最初のメニューの左側罫線のみ非表示
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
.globalNavi8 ul li:first-child {
border-left: none;
}
</style>
リンクの下線削除
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
.globalNavi ul li:first-child {
border-left: none;
}
.globalNavi ul li a {
color: inherit;
text-decoration: none;
}
</style>
マウスオーバー処理
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
.globalNavi ul li:first-child {
border-left: none;
}
.globalNavi ul li a {
color: inherit;
text-decoration: none;
}
.globalNavi ul li a:hover {
background-color: #F2F2E5
}
</style>
マウスオーバー領域の拡張
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
.globalNavi ul li:first-child {
border-left: none;
}
.globalNavi ul li a {
color: inherit;
text-decoration: none;
display: block;
padding: 5px;
}
.globalNavi ul li a:hover {
background-color: #F2F2E5
}
</style>
現在ページの背景色を変える
<nav class="globalNavi">
<ul>
<li class="current" ><a href="page1.html">メニュー</a></li>
<li><a href="page2.html">メニュー</a></li>
<li><a href="page3.html">メニュー</a></li>
<li><a href="page4.html">メニュー</a></li>
</ul>
</nav>
<style>
.globalNavi {
border: solid #CCCCCC;
border-width: 1px 0;
padding: 10px 0;
}
.globalNavi ul {
margin: 0;
padding: 0;
}
.globalNavi ul:after {
content: "";
clear: both;
display: block;
}
.globalNavi ul li{
list-style: none;
width: 100px;
float: left;
border-left: solid 1px #CCCCCC;
padding: 0 10px;
text-align: center;
font-size: 14px;
line-height: 1.429;
}
.globalNavi ul li:first-child {
border-left: none;
}
.globalNavi ul li a {
color: inherit;
text-decoration: none;
display: block;
padding: 5px;
}
.globalNavi ul li a:hover,
.globalNavi ul li.current a {
background-color: #F2F2E5
}
</style>
