微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 简易实现导航栏下拉菜单及样式定位、事件理解

博主信息

博文 11

粉丝 0

访问量 11174

专题推荐

更多>

一、导航栏下拉菜单的实现

导航栏下拉菜单的实现由三个部分组成：
1.HTML5文本
2.CSS样式
3.javascript监听事件

1.先写一个简单的网页界面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航列表下拉菜单</title>
  </head>
  <body>
    <ul id="nav">
      <li>
        <a href="">视频教程</a>
        <ul>
          <li><a href="">html视频</a></li>
          <li><a href="">css视频</a></li>
          <li><a href="">js视频</a></li>
          <li><a href="">php视频</a></li>
        </ul>
      </li>
      <li>
        <a href="">技术文章</a>
        <ul>
          <li><a href="">html教程</a></li>
          <li><a href="">css教程</a></li>
          <li><a href="">js教程</a></li>
          <li><a href="">php教程</a></li>
        </ul>
      </li>
      <li>
        <a href="">资源下载</a>
        <ul>
          <li><a href="">手册下载</a></li>
          <li><a href="">学习课件</a></li>
          <li><a href="">后端模板</a></li>
          <li><a href="">网站源码</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

测试结果如下：

2.添加CSS基本样式

/* 元素样式初始化: 学到盒模型再详细介绍 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  /* color: rgba(255, 255, 255, 0.7); */
  color: #bbb;
  /* none值定义标准文本 */
  /* 
       underline：下划线
       overline：上划线
       line-through：贯穿线
       bline：文本闪烁
       inherit：继承父元素的该属性
    */
  text-decoration: none;
}
#nav {
  background-color: black;
  height: 50px;
  /* 设置行高，不允许为负值 */
  line-height: 50px;
}
li {
  /* list-style表示列表属性的简写
    构成: list-style-type
          list-style-position
          list-style-image
     */
  list-style: none;
  margin: 0 10px;
  float: left;
}
#nav > li > a:hover {
  color: white;
}
/* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
#nav > li {
  position: relative;
}
#nav > li > ul {
  position: absolute;
  top: 50px;
  width: 180px;
  border: 1px solid #aaa;
  border-top: none;
}
#nav > li > ul > li a {
  display: inline-block;
  height: 50px;
  color: #444;
}
ul.sub li:hover {
  background-color: #eee;
}
/* 初始化时不要显示子菜单 */
#nav > li > ul {
  display: none;
}

添加样式后测试结果如下：

3.添加js代码

    //navs为length是3的数组
    const navs = document.querySelectorAll("#nav>li");
    //遍历navs数组，对数组内每一个li标签添加鼠标移入、移出事件
    navs.forEach(function (nav) {
      nav.addEventListener("mouseover", show);
      nav.addEventListener("mouseout", close);
    });
    //定义移入时下拉菜单显示的函数
    function show(event) {
      if (event.target.nextElementSibling) {
        event.target.nextElementSibling.style.display = "block";
      }
    }
    //定义移出时下拉菜单关闭的函数
    function close(event) {
      if (event.target.nodeName === "A" && event.target.nextElementSibling) {
        event.target.nextElementSibling.style.display = "none";
      }
    }

测试结果如下
a.

b.

c.

" class="reference-link">

二、CSS样式之定位

元素的定位：元素默认在页面中是按照文档流的顺序进行排序的
文档流：元素的排列按照书写顺序，源码中的顺序
相对定位：元素相对于自己在文档流中的原始位置进行偏移
绝对定位：脱离文档流，一定要有一个定位父级作为定位参照物，否则就相对于body进行定位

CSS position 属性

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。