首页 > 电脑专区 > 电脑教程 >

网站 隐藏式菜单栏制作,css+jq

来源:互联网 2023-02-21 18:21:30 222

有的时候不想在网站直接放菜单栏,看起来比较简洁舒服,需要的时候再打开,那么怎么在网站中制作呢XA0办公区 - 实用经验教程分享!

网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • 编辑器

方法/步骤

  • 1

    html整体代码布局,包括二级菜单也是包ul做的XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 2

    样式设计,看自己的下面需要设计,主要是给菜单一个定位到body里面,隐藏掉这菜单,需要时候再用jq打开XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 2相关内容未经授权抓取自百度经验
  • 3

    jq代码,点击打开关闭用slideUp(回收)和slideDown(打开)方法设置数值打开快慢XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 4

    二级打开效果;也是默认隐藏,点击再打开XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 5

    因为是双次点击,可以定义true和false执行打开关闭;在里面写效果跟换图片路径等XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 6

    二级菜单代码也可以在li包ul为二级;多级也可以采取这样的方法;就是会继承父级样式需要自行调整XA0办公区 - 实用经验教程分享!

    网站 隐藏式菜单栏制作,css jqXA0办公区 - 实用经验教程分享!

  • 注意事项

    • 注意布局;写的不是很好;按自己的需要写好布局样式
    • 喜欢有用在下面投票哦,谢谢大家Thanks♪(・ω・)ノ

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!XA0办公区 - 实用经验教程分享!


    标签: CSS操作系统隐藏

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码