极客编程小挑战#28:实现二级菜单的炫酷显示效果

那么本期挑战的内容是什么?容我卖个关子~

极客标签是一个学习前端知识和分享前端知识的平台。以往的挑战形式,更加偏向于学生完成老师布置的作业。而本期挑战,希望参赛者换个身份参与进来,将自己学习的知识讲授给他人。通过课程的形式,完成任务,并讲解详细,以帮助前端初学者更好地学习为目的,完成此次挑战。

 

本期挑战:

实现 单击按钮“分享更多”后,下级菜单呈现炫酷显示效果,下级菜单内容如下图(极客标签每篇文章后的分享方式),效果越炫越好~

本次挑战的作品在课程库中添加,以讲解详细、课程效果好为目的。课程成功发布之后,将课程链接添加到本文评论中。

 

如何添加课程呢?

1、在课程库页面的右下方,选择“草稿”(尚未录制过课程的人会被提醒权限问题,请联系管理员Elle修改权限)

2、选择“新建课程”后,建立一个新的课程库,定义了课程库标题和描述之后,点击“保存”按钮

3、在本课程库中 添加一节新课程,选择了编程语言语言之后,即可开始录制课程

4、在添加代码过程中,可以随时进行讲解,讲解有三种位置选择,视情况添加。完成课程的全部操作后,点击左上角的“保存“按钮

5、对课程的内容进行描述,在课程类型中选择“代码挑战”

6、课程添加成功后,请务必记得点击“申请上架”按钮,由管理员审批后发布课程。

对课程时长不确定的geek,可以参考课程库中已建立的课程。

课程库链接:http://www.gbtags.com/gb/gblibrary.htm

提交了代码的同学,请扫描下图中的二维码,加入 “编程挑战赛参与者群”,方便大家进行讨论和学习,也方便管理员进行信息的统计,发放奖品~

礼品赞助:

本期提供5份礼品,均由为前端书籍。根据获赞数决定获奖人员,新人参与有机会得到新人奖哦~

原文链接:http://www.gbtags.com/gb/share/6059.htm

时间: 2024-11-07 11:18:30

极客编程小挑战#28:实现二级菜单的炫酷显示效果的相关文章

极客编程小挑战#29:实现手机上常见的某一功能的效果显示

本期挑战: 实现手机上常见的某一功能的效果显示.可以是某个按钮的显示效果,页面跳转的显示效果,二级菜单的出现方式等.可以做已有的效果,也可以发挥你的想象,做出你期待的手机功能效果. 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]尽量通过添加课程,在本文评论中附上链接的方式提交答案,有特别奖励- [强烈提醒]提交了答案的人,请扫描下图中的二维码,加入微信群,方便工作人员进行信息统计 本期礼品: 感谢美团云提供10

极客编程小挑战#30:用CSS3实现各种钟表的显示效果

本期挑战: 利用css3制作钟表表盘效果.发挥想象.可以电子表或者是石英表,尽量做得炫酷.以下为两个示范,点击即可查看. 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]尽量通过添加课程,在本文评论中附上链接的方式提交答案,有特别奖励- [强烈提醒]提交了答案的人,请扫描下图中的二维码,加入微信群,方便工作人员进行信息统计 赞助商[时速云]介绍: 时速云TenxCloud是国内最早的容器云平台之一(Contain

极客编程小挑战#27:生成动态大眼睛的效果

本期挑战: 生成如下动态效果:鼠标放在眼睛黄色区域上,眼珠随鼠标动:鼠标放在其他位置,眼珠无反应.(点击查看动态效果) 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]加入QQ群:157757552, 获奖用户及递交快递联系方式 [强烈提醒]请在个人信息中添加QQ号,方便我们联系人获得快递地址 原文链接:http://www.gbtags.com/gb/share/5908.htm   礼品赞助: 本期奖品共有5

【石墨】极客编程小挑战#26:实现日期级联下拉选择框

详细内容请参见原文:http://www.gbtags.com/gb/share/5823.htm 本期挑战: 初始的html代码如下: <select name="year" id="year"> <option value="0">--</option> <option value="1999">1999</option> <option value=&qu

极客编程日历2018桌面壁纸(转载及完善)

转载声明 本文转载自简书文章[极客编程日历2018桌面壁纸],并进行了补充. 图灵社区出版了一本极客编程日历"Happy Hacking 2018" ,实体已经售罄,但是提供了PDF电子版下载.我们可以编写脚本,把日历和桌面壁纸结合在一起. 作者:Paralevi链接:https://www.jianshu.com/p/912ce01d4752來源:简书 在网上看了这篇文章后对自动合成壁纸蛮感兴趣的,但是把脚本粘过来执行时一直报错,最后查了不少信息才搞定,在此进行填坑记录. 1.环境说

积累的VC编程小技巧之标题栏和菜单

1.窗口最大最小化按纽的控制 ①怎样在程序开始的时候让它最大化? ②vc++做出来的exe文件在窗体的右上方是没有最大化和最小化按钮的,怎样实现这一功能? ③如何在显示窗口时,使最大化按钮变灰?   ①在App类里的C-App::InitInstance()中把m_pMainWnd->ShowWindow(SW_SHOW)改成m_pMainWnd->ShowWindow(SW_MAXIMIZE); ②在CreateWidnow时用WS_SYSMENU|WS_MINIMIZEBOX|WS_MAX

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

24、Cocos2dx 3.0游戏开发找小三之网格动作:高炫酷的3D动作

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/37596763 网格动作类似于动作特效,可以实现翻转.震荡.抖动.水的波纹等效果. 网格的基类: GridBase* Grid 获取或设置该节点的网格特效状态.网格应用于绘图平面上,可以实现水纹等 3D 特效: 基类定义:cocos2d/2d/CCGrid.h中: 基于这个基类有两个子类: Grid3D TiledGrid3D 这两个子类的共同点是:网格

极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果

本期挑战 请使用以下开练 LOGO 素材 为基础(三选一即可): 图片(base64):http://www.gbtags.com/gb/rtreplayerpreview/808.htm SVG图形:http://www.gbtags.com/gb/rtreplayerpreview/809.htm 或者基于以上图形的的自定义LOGO设计 挑战要求: 使用你所熟悉的任意前端技术(JS,CSS3,画布,SVG动画等等),生成一个漂亮动态的 ”页面加载中“ 效果,持续5秒后,页面即导向地址:htt