企业官网建设流程全解析

做网站公司赚钱吗,aso优化排名推广,网站电线电话图怎么做,做推广一般那些网站比较好Foundation 滑动导航#xff08;Off-Canvas#xff09;详解#xff08;超级完整版#xff0c;一次讲透#xff09; 我们继续你的 Foundation 系列#xff0c;今天把 滑动导航#xff08;Off-Canvas#xff09;讲得明明白白#xff01;这是 Foundation 6 中最强大的响应…Foundation 滑动导航Off-Canvas详解超级完整版一次讲透我们继续你的 Foundation 系列今天把滑动导航Off-Canvas讲得明明白白这是 Foundation 6 中最强大的响应式组件用于实现移动端侧边滑出菜单、侧边栏、购物车等。大屏可以固定显示小屏点击汉堡图标从左侧/右侧/顶部/底部滑出动画丝滑支持多层嵌套、叠加模式等。1. 基本结构左侧滑出最常用divclassoff-canvas-wrapper!-- 滑动面板侧边栏 --divclassoff-canvas position-leftidoffCanvasLeftdata-off-canvash5菜单/h5ulclassvertical menuliahref#首页/a/liliahref#产品/a/liliahref#关于/a/li/ul/div!-- 主内容区 --divclassoff-canvas-contentdata-off-canvas-content!-- 触发按钮小屏显示 --divclasstitle-bar show-for-small-onlydivclasstitle-bar-leftbuttontypebuttondata-openoffCanvasLeft☰ 菜单/button/div/divdivclassgrid-containerh3主内容区域/h3p这里是页面主体内容.../p/div/div/div2. 常见变体右侧滑出position-right叠加模式不推开内容加data-off-canvas{overlap: true}多面板可以同时有 left right结合 Drilldown Menu多级钻取菜单移动端超友好ulclassvertical menu drilldowndata-drilldownliahref#一级/aulclassmenu verticalliahref#二级/a/li/ul/li/ul3. 今天直接给你抄的完整代码复制就能跑带多级菜单!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/css/foundation.min.cssstyle.off-canvas{background:#1779ba;color:white;}.off-canvas a{color:white;}.off-canvas .close-button{color:white;}/style/headbodydivclassoff-canvas-wrapperdivclassoff-canvas position-leftidmySidebardata-off-canvasdata-transitionoverlapbuttonclassclose-buttonaria-labelClose menutypebuttondata-closespanaria-hiddentruetimes;/span/buttonh4classtext-centerMyApp/h4ulclassvertical menu drilldowndata-drilldownliahref# 首页/a/liliahref# 项目管理/aulclassmenu verticalliahref#项目列表/a/liliahref#新建项目/a/li/ul/liliahref# 个人中心/a/liliahref#⚙️ 设置/a/li/ul/divdivclassoff-canvas-contentdata-off-canvas-contentdivclasstitle-bardivclasstitle-bar-leftbuttontypebuttondata-togglemySidebar☰ 菜单/buttonspanclasstitle-bar-title欢迎使用/span/div/divdivclassgrid-containerstylepadding:20px;h3滑动导航演示/h3p点击左上角菜单图标或缩小浏览器体验侧边滑出效果支持多级嵌套、平滑动画。/p/div/div/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/js/foundation.min.js/scriptscript$(document).foundation();/script/body/html下面给你看真实效果官方和项目中最标准的 Foundation Off-Canvas 示例官方文档最新版https://get.foundation/sites/docs/off-canvas.html你现在想干嘛→ 明天继续讲 Foundation 表格Table还是模态框Reveal→ 帮我做一个右侧滑出的购物车 Off-Canvas→ 给我一个双侧左菜单 右设置的完整布局直接回复下一句“明天讲 table”“帮我做购物车滑动”“给我双侧 Off-Canvas”我立刻给你写好