使用 Bootstrap 和 jQuery 创建汉堡下拉菜单

汉堡菜单

使用 Bootstrap 和 jQuery 创建汉堡下拉菜单

​使用 Bootstrap 和 jQuery 创建的超赞汉堡包下拉菜单,Bootstrap支持4+版本,该菜单包含深色模式浅色模式主题,非常丝滑的菜单伸缩效果,还附带鼠标跟随效果。

Bootstrap 5项目中的扩展搜索框

扩展搜索栏

Bootstrap 5项目中的扩展搜索框

基于 CSS 实现的在 Bootstrap 5 项目中创建扩展搜索栏,点击搜索按钮后,搜索栏会向左或向右扩展,为用户带来更友好的搜索体验。它利用 Bootstrap 5 和自定义 CSS 创建可...

响应式多层次多样式多选项导航菜单 jQuery 插件

多层次导航

响应式多层次多样式多选项导航菜单 jQuery 插件

基于 jQuery 实现的多级嵌套菜单插件,这款导航插件式响应式的,提供了上、下、左、右四个方向的菜单导航样式,同时还支持多层菜单的同层级页面打开以及多层级打开方式,另外还提供了是否激活点击关闭...

基于原生 JavaScript 实现滚动粘性菜单导航效果

div高度

基于原生 JavaScript 实现滚动粘性菜单导航效果

使用原生的 JS 实现的在滚动事件中创建粘性导航栏,该插件会获取滚动位置,并在到达导航偏移位置时设置粘性类,将菜单固定于页面顶端,并且实现导航菜单项也就是锚点的切换,可在各部分之间平滑跳转。这种...

使用 JavaScript 和 CSS3 创建环形围绕的圆形菜单

圆形菜单

使用 JavaScript 和 CSS3 创建环形围绕的圆形菜单

采用 JavaScript 和 CSS3 实现的​超轻量级的(小于 2KB)圆形菜单,以个性的方式展示菜单项,该插件使用纯 JavaScript 和 CSS 创建精美的径向/环形菜单,初始状态显...

基于JS + CSS 实现的带下拉菜单和搜索框的响应式导航

响应式导航栏

基于JS + CSS 实现的带下拉菜单和搜索框的响应式导航

实现了一个带下拉菜单和搜索框的响应式导航菜单,实现仅仅基于 CSS + JavaScript 实现不依赖于任何第三方插件。该菜单带有一个水平菜单栏,其中包含Logo、下拉框和一个用于搜索框的切换...

仅使用 HTML CSS 的实现的时尚外观响应式手风琴/折叠效果

折叠手风琴

仅使用 HTML CSS 的实现的时尚外观响应式手风琴/折叠效果

​手风琴效果是一种用户界面操作效果,类似于轮流展开与折叠一样,当用户与之交互时,可以隐藏或显示内容部分。这段代码用 HTML 和 CSS 实现了一个时尚的手风琴效果,而且还是响应式的,在手机等移...

CSS 实现的带复选框的多层嵌套式手风琴效果

手风琴效果

CSS 实现的带复选框的多层嵌套式手风琴效果

本代码是基于CSS和少量JS实现的一个内部带有复选框的嵌套式手风琴,其主要功能是在点击按钮时切换面板的 "激活 "和 "关闭 "状态,从而方便用户选择选项,其中JavaScript 代码为手风琴...

带滚动动画的响应式侧边栏菜单

侧边栏菜单

带滚动动画的响应式侧边栏菜单

可创建一个带有动画子菜单的响应式侧边栏导航栏,提供流畅的导航功能,将鼠标悬停在主菜单项上,相应的子菜单就会优雅地滚动显示。该功能对于具有众多菜单项的网站特别有用,因为它能保持界面整洁和用户友好,...

使用 CSS 实现的 Dock 底部导航栏,可用作移动网页导航菜单

底部导航

使用 CSS 实现的 Dock 底部导航栏,可用作移动网页导航菜单

本 HTML 和 CSS 代码片段可实现在网页底部创建类似于Docker的停靠导航栏,导航条紧贴屏幕边缘,可作为移动导航菜单设计使用,每个链接对应一个图标,点击这些图标就可以进入相应的内容。代码...

使用 JavaScript 创建带聚光灯指示器的底部导航栏

聚灯导航栏

使用 JavaScript 创建带聚光灯指示器的底部导航栏

使用 JavaScript 代码创建了一个具有指示器功能的底部导航栏。导航栏添加聚光灯是多么炫酷的效果!它使用事件监听器来突出显示活动图标,为导航提供视觉反馈,同时支持文字、颜色及位置的自定义。...

基于CSS使用单选按钮改造的 HTML Tab标签

Tab标签

基于CSS使用单选按钮改造的 HTML Tab标签

该代码使用单选输入和 CSS 创建 HTML tab标签,标签允许在不同内容之间进行切换,通过CSS 样式控制渐变背景和阴影效果增强了视觉吸引力。此外,标签在高度上平滑过渡,提供了一个简洁和用户...