样式、链接、列表、定位、事件及下拉菜单的实战

导航下拉菜单的实现

使用链接 + 无序列表 + 事件监听 + 事件委托实现下拉菜单

第一步：html实现效果，如下图：

<body>
  <ul id="nav">
<li>
  <h1><a href="">购物导航</a></h1>
</li>
<li>
  <a href="">首页</a>
</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>
    <li><a href="">潮玩动漫</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>
    <li><a href="">图书</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>
    <li><a href="">大家电</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>
<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>
    <li><a href="">泌尿系统用药</a></li>
  </ul>
</li>
<li>
  <a href="">鞋靴</a>
  <ul>
    <li><a href="">女鞋</a></li>
    <li><a href="">男鞋</a></li>
    <li><a href="">流行趋势</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>
    <li><a href="">小众运动</a></li>
  </ul>
</li>
<li><input ="search" placeholder="请输入关键词" /></li>
  </ul>
</body>

第二步：样式代码如下（注意看注释）：

  <style>
/*对元素样式初始化*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*去掉a标签的下划线以及设置字体颜色*/
a {
  color: white;
  text-decoration: none;
}
/*设置导航条的背景色，高度以及使内容垂直居中*/
#nav {
  background-color: blueviolet;
  height: 70px;
  line-height: 70px;
}
/*去掉列表标记，设置各列表水平间距并使其浮动*/
li {
  list-style: none;
  margin: 0 35px;
  float: left;
}
/*设置光标移动到文本上的字体颜色，高亮显示*/
#nav > li > a:hover {
  color: white;
}
/*将父级设置为子菜单的容器*/
#nav > li {
  position: relative;
}
/*设置子菜单的显示位置以及背景色*/
#nav > li > ul {
  position: absolute;
  top: 70px;
  left: -48px;
  width: 180px;
  background-color: #baa9f8;
  padding-bottom: 20px;
}
/*设置子菜单高度，使其拉开更加美观*/
#nav > li > ul > li {
  height: 50px;
}
/*设置子菜单中文颜色*/
#nav > li > ul > li > a {
  color: black;
}
/*初始化子菜单隐藏*/
#nav > li > ul {
  display: none;
}
/*设置搜索框高，宽，圆角等*/
input {
  height: 40px;
  width: 200px;
  border-radius: 10px;
  border: 0px;
  padding: 10px;
}
ul > li > h1 {
  font-family: "方正粗黑宋简体";
  font-size: 40px;
}
  </style>

第三步：js使下拉菜单显示出来，代码如下：

<script>
  //先获取所有的主导航
  const navs = document.querySelectorAll("#nav>li");
  navs.forEach(function (nav) {
//设置当鼠标移入时显示子菜单
nav.addEventListener("mouseover", showSubMenu);
//设置当鼠标移出时关闭子菜单
nav.addEventListener("mouseout", closeSubMenu);
  });
  //显示子菜单的函数
  function showSubMenu(ev) {
//判断当前导航是否有子菜单，如果有，则显示
if (ev.target.nextElementSibling !== null) {
  ev.target.nextElementSibling.style.display = "block";
}
  }
  //隐藏子菜单的函数
  function closeSubMenu(ev) {
//关闭子菜单
if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  ev.target.nextElementSibling.style.display = "none";
}
  }
</script>

CSS样式表知识

CSS的几种方式：

内联样式：直接写到属性中来控制当前的元素样式；
写到HTML文档的style标签中；
创建一个web独立的CSS文件，然后通过link标签引到一个html文档，实现代码的样式复用；

链接与列表常识

链接元素 a标签

打开一个网站；
下载一个文件；
发邮件；
打电话；
锚点；

列表列表元素

无序列表：ul;
有序列表:ol;
自定义列表:dl、dt、dd;

元素的定位

相对定位；
绝对定位；

事件监听与事件代理

事件监听器：事件绑定者、事件的触发者（捕获、冒泡）、事件委托（代理）；
事件：移除、移入；

实战：PHP中文网首页下拉菜单

a<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width,initial-scale=1.0" />
<title>下拉菜单</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  a {
    color: #bbb;
    text-decoration: none;
  }
  #nav {
    background-color: black;
    height: 50px;
    line-height: 50px;
  }
  li {
    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;
  }
</style>
  </head>
  <body>
<ul id="nav">
  <li><a href="">首页</a></li>
  <li><a href="">视频教材</a></li>
  <li>
    <a href="">资源下载</a>
    <ul>
      <li><a href="">PHP工具</a></li>
      <li><a href="">在线手册</a></li>
      <li><a href="">学习课件</a></li>
      <li><a href="">网站源码</a></li>
    </ul>
  </li>
  <li><a href="">社区问答</a></li>
  <li>
    <a href="">技术文章</a>
    <ul>
      <li><a href="">头条</a></li>
      <li><a href="">博客</a></li>
      <li><a href="">PHP教程</a></li>
      <li><a href="">PHP框架</a></li>
    </ul>
  </li>
</ul>
  </body>
  <script>
    const navs = document.querySelectorAll("#nav > li");
navs.forEach(function (nav) {
  nav.addEventListener("mouseover", showSubMenu);
  nav.addEventListener("mouseout", closeSubMenu);
});
function showSubMenu(ev) {
  console.log(ev.target);
  if (ev.target.nextElementSibling !== null) {
    ev.target.nextElementSibling.style.display = "block";
  }
}
function closeSubMenu(ev) {
  if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
    ev.target.nextElementSibling.style.display = "none";
  }
}
  </script>
</html>

学习体会

细心很重要！一个单词的错误可能就无法在正常的运行；
可以把编辑器的颜色主题同步成老师教学主题便于查找并发现问题；

导航下拉菜单的实现

CSS样式表知识

链接与列表常识

事件监听与事件代理

实战：PHP中文网首页下拉菜单

学习体会

相关文章