实现仿新浪下拉菜单

最新推荐文章于 2022-12-06 12:23:22 发布
最新推荐文章于 2022-12-06 12:23:22 发布
阅读量337 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67228124/article/details/126236048
版权

HTML CSS JavaScript 交互设计 导航栏
关键词由CSDN通过智能技术生成

该程序主要分为三个模块：html模块、css模块、js模块

本程序运行成功截图如下：

 

1、html模块：分为上下两个部分，上面为导航栏，下面为鼠标经过导航栏所下拉出现的部分。这里要为下拉的部分先设置为不可见样式，之后再js中设置鼠标经过可见。代码如下：

2、css模块：在此处设置相应的样式

3、最后是js模块：需要先获取元素，然后设置相应html模块鼠标经过可见，离开不可见

 

 

YUAN 000
关注
仿新浪下拉菜单的实现
m0_56844750的博客
03-24 172
1.HTML元素 css略 <div> <ul> <li> <a href="#">新浪导航</a> <ul> <li>4655</li> <li>8979</li> <li>4548&l
jQuery 选择器：仿新浪下拉菜单
赚钱养自个儿的博客
05-07 639
<!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_51983027的博客
12-06 561
前端基础小案例-仿新浪网页下拉菜单，基于HTML，css，javascript实现
仿新浪下拉菜单
qq_57401304的博客
05-07 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
仿新浪微博的ListView下拉更新功能
weixin_34192732的博客
06-08 88
由于最近做的项目中也用到了这个功能，今天刚好实现了下，就趁现在有时间写篇博客分享下。在做的时候也参考了下别人的代码，毕竟站在巨人的肩膀上才会是自己更加强大。哈哈！先看看新浪的下拉更新是什么样的吧！ OK，今天我们要实现的就是上面的下拉刷新功能。 首先实现下拉刷新的布局文件 layout/head.xml [html] view plainc...
前端jQuery学习：新浪下拉菜单
04-04
前端jQuery学习，适合前端小白，跟着pink老师一起学前端，jQuery虽然不是最新的技术，应用还是很广泛的，前端学习不可缺少的内容，学完jQuery，学习node，然后学习webpack，再学习Vue，这是我制定的前端学习路径，...
案例：新浪下拉菜单.html
06-09
仿js新浪下拉菜单，点击导航栏出现下边相关的内容，主要是通过对元素节点的操作来实现，主要是原生的js写出来的
新浪网jQuery二级下拉菜单特效代码
03-20
【标题】"新浪网jQuery二级下拉菜单特效代码"是一个基于jQuery实现的网页导航菜单，其设计灵感来源于新浪网的门户网站。这个特效旨在为用户提供一个类似新浪网站的交互式二级下拉菜单，使得用户在浏览网页时能更方便...
做一个新浪的下拉菜单
weixin_43190801的博客
06-19 2513
学到了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
仿新浪微博下拉刷新android实例
10-28
仿新浪微博下拉刷新android实例，pulltorefresh源码
js仿163 新浪等头部的下拉广告
09-01
javascript仿新浪头部的下拉广告，带收缩效果
模仿新浪微博弹出菜单
04-04
源码HyPopMenuView，该案例HyPopMenuView模仿新浪微博弹出菜单， Manually Import【手动导入】 【将HyPopMenuView,UIColor ImageGetColor,MenuLabel所有源代码拽入项目中】 【导入主头文件：#import "HyPopMenuView.h"】 HyPopMenuView.h HyPopMenuView.m UIColor ImageGetColor.h UIColor ImageGetColor.m MenuLabel.h MenuLabel.m Example【示例】 NSArray *Objs = @[ [MenuLabel CreatelabelIconName:@"tabbar_compose_idea" Title:@"文字"], [MenuLabel CreatelabelIconName:@"tabbar_compose_photo" Title:@"相册"], [MenuLabel CreatelabelIconName:@"tabbar_compose_camera" Title:@"拍摄"], [MenuLabel CreatelabelIconName:@"tabbar_compose_lbs" Title:@"签到"], [MenuLabel CreatelabelIconName:@"tabbar_compose_review" Title:@"点评"], [MenuLabel CreatelabelIconName:@"tabbar_compose_more" Title:@"更多"], ]; CGFloat x,y,w,h; x = CGRectGetWidth(self.view.bounds)/2 - 213/2; y = CGRectGetHeight([UIScreen mainScreen].bounds)/2 * 0.3f; w = 213; h = 57; //自定义的头部视图 UIImageView *topView = [[ImageView alloc] initWithFrame:CGRectMake(x, y, w, h)]; topView.image = [UIImage imageNamed:@"compose_slogan"]; topView.contentMode = UIViewContentModeScaleAspectFit; NSMutableDictionary *AudioDictionary = [NSMutableDictionary dictionary]; //添加弹出菜单音效 [AudioDictionary setObject:@"composer_open" forKey:kHyPopMenuViewOpenAudioNameKey]; [AudioDictionary setObject:@"wav" forKey:kHyPopMenuViewOpenAudioTypeKey]; //添加取消菜单音效 [AudioDictionary setObject:@"composer_close" forKey:kHyPopMenuViewCloseAudioNameKey]; [AudioDictionary setObject:@"wav" forKey:kHyPopMenuViewCloseAudioTypeKey]; //添加选中按钮音效 [AudioDictionary setObject:@"composer_select" forKey:kHyPopMenuViewSelectAudioNameKey]; [AudioDictionary setObject:@"wav" forKey:kHyPopMenuViewSelectAudioTypeKey]; [HyPopMenuView CreatingPopMenuObjectItmes:Objs TopView:topView OpenOrCloseAudioDictionary:Audio
仿新浪微博IOS客户端（v5.2.8）——下拉菜单栏的实现
android_ls的专栏
05-21 6815
接着上一篇博文，这篇我们来聊聊新浪微博导航栏上，点击中间部分的标题（titleView）弹出的下拉菜单是如何实现。 1、自定义导航栏中间的titleView，代码如下： // 设置导航栏中间的titleView _titleButton = [self titleViewWithNickname:@"指间有梦"]; self.navigationItem.titleView
js: 动画 仿新浪下拉菜单 仿淘宝固定侧边栏
qq_36413371的博客
09-29 240
防新浪 <!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> * {
JavaScript-170：新浪下拉菜单
臧小川的博客
01-17 871
结构 <ul class="nav"> <li> <a href="">微博</a> <ul> <li> <a href="">私信</a> </li> <li>
仿微博下拉菜单功能，必备技能!!!
weixin_43482295的博客
07-07 296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微.
新浪下拉菜单
xuan971130的博客
03-28 882
1.实现效果： 鼠标滑过时，显示下拉框。 2.思路： 首先理清楚html元素是如何放置的。横着三个微博是一个ul中放置三个li。竖着看，一个li中放置一个a标签和一个ul标签，ul中又放置三个li。采用子绝父相来进行定位。竖着的一个li采用相对定位，下面的ul采用绝对定位。 实现思想： <!-- 算法思想 --> <!-- ①导航栏中的li都有鼠标经过效果，所以需要循环添加注册事件 --> <!-- ②核心原...
html新浪下拉菜单
最新发布
08-26
根据引用中提到的内容，HTML新浪下拉菜单主要是通过对元素节点的操作来实现，使用原生的JavaScript编写。具体实现方式可能会涉及到以下几个步骤: 1. 首先，你需要创建一个导航栏的HTML结构，可以使用`<ul>`和`<li>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值