快捷导航
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

中英文切换导航菜单实现详解

2017-6-20 23:46| 发布者: admin| 查看: 626| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了鼠标悬浮中英文切换效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.list {
  width: 1000px;
  height: 40px;
  overflow:hidden;
  background: #222;
  margin: 0 auto;
}
.list li {
  float: left;
}
.list li a {
  display: block;
  transition: 0.3s;
}
.list b, .list i {
  display: block;
  padding: 0 30px;
  color: #aaa;
  line-height: 40px;
  text-align: center;
}
.list b {
  font-weight: 100;
}
.list i {
  font-style: normal;
  background: #333;
  color: #fff;
}
.list a:hover {
  margin-top: -40px;
}
</style>
</head>
<body>
<ul class="list">
  <li>
    <a href="#">
      <b>Index</b>
      <i>首页</i>
    </a>
  </li>
  <li>
    <a href="#">
      <b>course</b>
      <i>蚂蚁教程</i>
    </a>
  </li>
  <li>
    <a href="#">
      <b>antzone</b>
      <i>蚂蚁部落</i>
    </a>
  </li>
  <li>
    <a href="#">
      <b>BBS</b>
      <i>社区</i>
    </a>
  </li>
  <li>
    <a href="#">
      <b>aboutUs</b>
      <i>关于我们</i>
    </a>
  </li>
</ul>
</body>
</html>

鼠标悬浮导航菜单可以实现上下翻滚切换效果,下面介绍一下它的实现过程。

代码注释:

[CSS] 纯文本查看 复制代码
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

进行简单的初始化处理,当然上面的代码比较粗暴,在网上有很多优秀的代码,可以自行查询。

[CSS] 纯文本查看 复制代码
.list {
  width: 1000px;
  height: 40px;
  overflow:hidden;
  background: #222;
  margin: 0 auto;
}

上面的代码设置导航菜单容器元素的样式。

高度是40px,同时设置了overflow:hidden,这样超出此高度的内容会被隐藏。

[CSS] 纯文本查看 复制代码
.list li {
  float: left;
}

设置li元素为左浮动。

[CSS] 纯文本查看 复制代码
.list li a {
  display: block;
  transition: 0.3s;
}

将链接a元素设置为块级元素,这样里面就可以嵌套块级元素了。

并且通过transition属性设置链接a元素的会以动画方式来设置属性的变化。

[CSS] 纯文本查看 复制代码
.list b, .list i {
  display: block;
  padding: 0 30px;
  color: #aaa;
  line-height: 40px;
  text-align: center;
}

设置两类元素为块级元素。

设置它们的行高是40px,如果只设置行高不设置高度,那么高度和行高是相同的。

也就是说高度是40px,这两种元素是上下排列的,总共高度是80px;又由于父元素的高度是40px,并且设置了超出隐藏,所以只会看到英文或者汉语其中的一种导航。

[CSS] 纯文本查看 复制代码
.list a:hover {
  margin-top: -40px;
}

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-9-26 18:58 , Processed in 0.063671 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部