-第4章 变幻菜单

应用场景

这可以说是一个导航的减法变幻吧。
像一些中英文网上，当鼠标在菜单上的时候把菜单上的中文改变成英文。

知识点

负边距运用。

技巧

如果要实现鼠标在菜单上时把首页显示成Home，一般有两种写法：

方法一，写两个并列的标签。
当鼠标在 li 时显示有英文文字 首页 的标签。因为他们都是在同一个种元素 a 标签上，所以可能需要给两个 a 标签添加类名来识别，而且还需要添加再次 href 属性值。

<li>
	<a href="#">首页</a>
	<a href="#">Home</a>
</li>

方法二，使用嵌套。(推荐)
像这种写法因为 a 标签和 span 本就不同，所有可以直接用他们来区分。而且 span 是嵌套在 a 标签中的，所以只需要写一个 href 值。

<li>
	<li><a href="#">首页<span>Home</span></a></li>
</li>

完整代码

<!--
Author: XiaoWen
Create a file: 2017-02-27 17:21:07
Last modified: 2017-02-27 17:50:05
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .top-nav{
      font-size:12px;
      font-weight: bold;
      list-style:none;
      border-bottom: 8px solid #dc4e1b;
      overflow: auto;
    }
    .top-nav li{
      float: left;
      margin-right: 1px;
    }
    .top-nav li a{
      line-height: 20px;
      text-decoration: none;
      background: #ddd;
      color: #666;
      display: block;
      width: 80px;
      text-align: center;
    }
    .top-nav li a span{
      display: none;
    }
    /* 鼠标移动时的事件 */
    .top-nav li a:hover span{
      display: block;
      background: #f00;
      color: #fff;
    }
    .top-nav li a:hover {
      margin-top: -20px;
    }
  </style>
</head>
<body>
  <ul class="top-nav">
    <li><a href="#">首页<span>Home</span></a></li>
    <li><a href="#">课程大厅<span>Course</span></a></li>
    <li><a href="#">学习中心<span>Learn</span></a></li>
    <li><a href="#">关于我们<span>About</span></a></li>
  </ul>
</body>
</html>

总结

巧妙的运用了负边距，把 a 标签上移自身高度，而让下面的 span 标签显示在自身原来的位置。

posted @   程序媛李李李李蕾  阅读(262)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 用一种新的分类方法梳理设计模式的脉络
点击右上角即可分享
微信分享提示