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>

Bootstrap

Bootstrap グローバルナビ」参照

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。