Tạo menu ngang phong cách

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Fixed Navigation - Codrops</title>

</head>
    <style type="text/css">
 
.expand-down {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  margin-top:20px;
  height:150px;
  width:500px;
  background: url(http://www.jampmark.com/images/demos/macosx-style-background.png) no-repeat;
  margin-bottom:30px;
}
.expand-down * {
  margin: 0;
  padding: 0;
}
.expand-down ul {
  padding-top:10px;
  margin-left:10px;
}
.expand-down ul li {
  float:left;
  list-style-type:none;
}
.expand-down ul li a {
 text-decoration:none;
}
.expand-down ul li a img {
  width:50px;
  height:50px;
  border:none;
}
.expand-down ul li a span {
  display:none;
}
.expand-down ul li:hover a span {
  display:block;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.expand-down ul li:hover a img {
  width:100px;
  height:100px;
}
.expand-down ul li:hover + li a img {
  width:60px;
  height:60px;
}
.expand-down ul li:hover + li + li a img {
  width:55px;
  height:55px;
}

</style>

<body >

<div class="expand-down">
<ul>
<li>
    <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" />
      <span>Valid CSS</span>
    </a>
  </li>
<li>
    <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" />
      <span>Valid XHTML</span>
    </a>
  </li>
<li>
    <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/opera-trans.png" alt="Opera" title="Opera" />
      <span>Opera</span>
    </a>
  </li>
<li>
    <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/safari-trans.png" alt="Safari" title="Safari" />
      <span>Safari</span>
    </a>
  </li>
<li>
    <a href="http://www.jampmark.com/images/demos/firefox-trans.png" title="Firefox" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/firefox-trans.png" title="Firefox" />
      <span>Firefox</span>
    </a>
  </li>
<li>
    <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" />
      <span>Google Chrome</span>
    </a>
  </li>
<li>
    <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" />
      <span>Internet Explorer</span>
    </a>
  </li>
<li>
    <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank">
      <img src="http://www.jampmark.com/images/demos/konqueror-trans.png" alt="Konqueror" title="Konqueror" />
      <span>Konqueror</span>
    </a>
  </li>
</ul>
</div>
</body>
</html>

đề mô ảnh

Thứ Bảy, 13 tháng 7, 2013

Tạo menu ngang phong cách

Related posts

Tạo menu ngang phong cách

0 nhận xét:

Đăng nhận xét

Popular posts

Blogger templates

Giới thiệu về tôi

Blogroll

Blogger news

Blog archive

About