Pink老师JS新浪下拉菜单粗糙实现

Mayday1101

已于 2023-04-17 17:40:58 修改

阅读量134

点赞数 1

文章标签： javascript css html

于 2023-04-17 17:36:37 首次发布

本文链接：https://blog.csdn.net/qq_35297432/article/details/130205196

版权

效果

CSS部分

 .box {
      /* box-sizing: border-box; */
      width: 110px;
      height: 52px;
      line-height: 50px;
      overflow: hidden;
    }
    .box1 {
      width: 100px;
      height: 52px;
      line-height: 50px;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      width: 100px;
      height: 50px;
      text-align: center;
      border: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    li:nth-child(n + 2):hover {
      background-color: pink;
    }

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mayday1101

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Pink老师JS新浪下拉菜单粗糙实现

本人只是粗糙的实现了效果而已，仅供参考。
复制链接

扫一扫

前端jQuery学习：新浪下拉菜单

04-04

前端jQuery学习，适合前端小白，跟着pink老师一起学前端，jQuery虽然不是最新的技术，应用还是很广泛的，前端学习不可缺少的内容，学完jQuery，学习node，然后学习webpack，再学习Vue，这是我制定的前端学习路径，大神们记得给建议。

b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单

weixin_72322475的博客

10-03

1660

b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单+两个在原代码基础上的简洁优化版本

1 条评论您还未登录，请先登录后发表或查看评论

下拉菜单之js

Jessicawh的博客

07-16

184

效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title

JavaScript实现仿新浪下拉菜单的显示隐藏

weixin_59531237的博客

04-29

564

JavaScript实现仿新浪下拉菜单的显示隐藏

html+css+JavaScript实现导航栏

cutlery1137的博客

11-28

1882

无下拉菜单的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {

pink老师的js全视频配套资料.zip

05-10

pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频...

pink老师Javascript基础PPT.zip

02-06

2021年pink老师线下班 Javascript基础班的PPT

pink老师js869集笔记

05-09

pink老师js869集笔记

pink老师 JavaScript基础简易ATM案例

09-26

题目描述： - 里面现存有 100 块钱。 - 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 - 如果取钱，就减去取的钱数，之后弹出显示余额提示框 - 如果显示余额，就输出余额 ...

javaScript:操作元素-新浪触碰下拉菜单(3)

heitu_的博客

12-27

387

实现新浪触碰下拉菜单

案例：新浪下拉菜单.html

06-09

仿js新浪下拉菜单，点击导航栏出现下边相关的内容，主要是通过对元素节点的操作来实现，主要是原生的js写出来的

原生js新浪游戏频道导航条下拉二级菜单列表代码

11-19

原生js新浪游戏频道导航条下拉二级菜单列表代码原生js新浪游戏频道导航条下拉二级菜单列表代码原生js新浪游戏频道导航条下拉二级菜单列表代码原生js新浪游戏频道导航条下拉二级菜单列表代码

JavaScript教程（三）之 jQuery

m0_56752010的博客

05-28

2278

JavaScript库即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等；简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了；比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）；常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext

JavaScript-170：新浪下拉菜单

臧小川的博客

01-17

815

结构 <ul class="nav"> <li> <a href="">微博</a> <ul> <li> <a href="">私信</a> </li> <li>

js特效-下拉菜单

qq_41670147的博客

11-25

380

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

做一个新浪的下拉菜单

weixin_43190801的博客

06-19

2466

学到了JS了，所以先存一下感觉有用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin:0

js新浪下拉菜单 pink

qq_44874089的博客

02-05

659

在这里插入代码片 ```<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 50px; height: 20px;

新浪下拉菜单(jquery版本)

qq_45308912的博客

11-20

513

效果展示：用jquery写的比原生的js代码更简洁明了，原生js需要获取li元素集合，然后循环给每个li进行添加事件，而jquery只需要获取jquery元素集合，直接添加事件，就可以给元素集合中的每个元素添加事件，其中是因为jquery底层的隐式循环，不需要自己手动写循环了 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &l

前端学习（992）：新浪下拉菜单

歌谣的博客

04-29

556

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...

黑马pink老师js轮播图

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交