搜 索

纯css实现简单的双语菜单栏目导航

编辑:QTOOL.NET日期:2019-08-13359

今天,分享一个纯css与html制作的简单的双语菜单特效导航样式.
css代码如下:
<style type="text/css">
a{
  color:hsla(220,100%,91%,1.00);
  text-decoration: none;
}
a:hover{
  color:hsla(0,0%,94%,1.00);
  text-decoration: underline;
.menu{
font-size: 12px;
font-weight: bold;
list-style: none;
}
.menu li{
float: left;
}
.nav-i{
  position: relative;
  z-index: 0;
}
.nav-i:hover{
  z-index: 99999;
}
.nav-i span{
  position: absolute;
  visibility: hidden;
}
.nav-i:hover span{  
  top: 0;
  left: 0;
  visibility: visible;
  cursor: pointer;
}
.menu li a,.nav-i:hover span{
  width: 90px;
  line-height: 35px;
  text-decoration: none;
  text-align: center;
  background:hsla(0,0%,95%,1.00);
  color: #666666;
  display: block;
}
.menu li a:hover,.nav-i:hover span{
  color: #FFFFFF;
  background:hsla(202,100%,27%,1.00);
}
</style>
html有两段代码,分别显示不同的切换效果,可自由选择.
鼠标移动到菜单上显示切换为英文内容:
<div id="head">
<ul class="menu">
    <li><a class="nav-i" href="#">Home<span>首页</span></a></li>
<li><a class="nav-i" href="#">Product<span>产品</span></a></li>
    <li><a class="nav-i" href="#">About us<span>关于我们</span></a></li>
    <li><a class="nav-i" href="#">Contact<span>联系方式</span></a></li>
  </ul>
</div>
或者鼠标指针停留在英文菜单上显示中文内容:
<div id="head2">
<ul class="menu">
    <li><a class="nav-i" href="#">首页<span>Home</span></a></li>
<li><a class="nav-i" href="#">产品<span>Product</span></a></li>
    <li><a class="nav-i" href="#">关于我们<span>About us</span></a></li>
    <li><a class="nav-i" href="#">联系方式<span>Contact</span></a></li>
  </ul>
</div>
以上就是使用纯css代码与html代码一起实现简单的可中英文切换的栏目菜单.

TAG标签:css
此文章由QTOOL.NET编辑
最新文章

热门标签