基金訓練に行ってきました。(51日目)

ネット上のサイトから、よさそうなデザインのサイトを見ながら、ソースを見ずに、そっくり真似て見るという実習です。

で、とりあえずやってみたのですが、グローバルナビをイメージのみで作ってあり、マウスオーバーでイメージが変わるようになっていました。
これは、実習でやったことが無いので、ちょこっとソースを見つつやってみました。

• ナビ1
• ナビ2
• ナビ3

↑こんな感じです。↑

• CSSの例は下記のとおりです。
  #bloggnavi ul {
  width: 301px;
  height: 30px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size:0.1%;
  }
  #bloggnavi ul li a {
  float:left;
  display:block;
  height: 30px;
  background-repeat: no-repeat;
  }
  #bloggnavi ul li.bloggnavi1 a {
  width: 101px;
  background-image:url(images/gnavi_01.gif);
  }
  #bloggnavi ul li.bloggnavi1 a:hover {
  width: 101px;
  background-image:url(images/gnavi_h_01.gif);
  }
  #bloggnavi ul li.bloggnavi2 a {
  width: 101px;
  background-image:url(images/gnavi_02.gif);
  }
  #bloggnavi ul li.bloggnavi2 a:hover {
  width: 101px;
  background-image:url(images/gnavi_h_02.gif);
  }
  #bloggnavi ul li.bloggnavi3 a {
  width: 99px;
  background-image:url(images/gnavi_03.gif);
  }
  #bloggnavi ul li.bloggnavi3 a:hover {
  width: 99px;
  background-image:url(images/gnavi_h_03.gif);
  }
• HTMLの例は、下記のとおりです。
  <div id=”bloggnavi”>
  <ul>
  <li class=”bloggnavi1″><a href=”index.html”>
  ナビ1</a></li>
  <li class=”bloggnavi2″><a href=”index.html”>
  ナビ2</a></li>
  <li class=”bloggnavi3″><a href=”index.html”>
  ナビ3</a></li>
  </ul>
  </div>

※この方法以外に、マウスオーバー時と、そうでない時の画像を縦に並べて、ひとつの画像にして、background-positionで切り替える方法もあるようです。