前端代码分享——常用的手机端底部导航栏(内含源码)

这篇具有很好参考价值的文章主要介绍了前端代码分享——常用的手机端底部导航栏(内含源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

运行示例

导航栏手机端样式css源码,前端炫酷代码分享,全部文章,前端文章来源地址https://www.toymoban.com/news/detail-775730.html


导航栏手机端样式css源码,前端炫酷代码分享,全部文章,前端
点击左上角 打开网页 效果更佳哦

核心代码

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SVG超酷动画Tab菜单栏DEMO演示</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<menu class="menu">
    
    <button class="menu__item active" style="--bgColorBody: #ffb457; --bgColorItem: #ff8c00;" >
      <svg class="icon" viewBox="0 0 24 24">
        <path d="M3.8,6.6h16.4"/>
        <path d="M20.2,12.1H3.8"/>
        <path d="M3.8,17.5h16.4"/>
      </svg>
    </button>

    <button class="menu__item" style="--bgColorBody: #ff96bd; --bgColorItem: #f54888;">
      <svg class="icon" viewBox="0 0 24 24">
        <path  d="M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8
        C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z"/>
        <path  d="M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6"/>
      </svg>
    </button>

    <button class="menu__item" style="--bgColorBody: #9999fb; --bgColorItem: #4343f5;" >
      <svg class="icon" viewBox="0 0 24 24">
      <path  d="M3.4,11.9l8.8,4.4l8.4-4.4"/>
      <path  d="M3.4,16.2l8.8,4.5l8.4-4.5"/>
      <path  d="M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z"/>
    </button>

    <button class="menu__item" style="--bgColorBody: #ffe797; --bgColorItem: #e0b115;" > 
      <svg class="icon" viewBox="0 0 24 24" >
        <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
          C3.9,4.4,4.4,3.9,5.1,3.9z"/>
        <path  d="M4.2,9.3h15.6"/>
        <path  d="M9.1,9.5v10.3"/>
    </button>

    <button class="menu__item" style="--bgColorBody: #cffff1; --bgColorItem:#65ddb7;">
      <svg class="icon" viewBox="0 0 24 24" >
        <path  d="M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1
          C3.9,4.4,4.4,3.9,5.1,3.9z"/>
        <path  d="M5.5,20l9.9-9.9l4.7,4.7"/>
        <path  d="M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z"/>
      </svg>
    </button>

    <div class="menu__border"></div>

  </menu>

  <div class="svg-container">
    <svg viewBox="0 0 202.9 45.5" >
      <clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)">
        <path  d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
          c9.2,3.6,17.6,4.2,23.3,4H6.7z"/>
      </clipPath>
    </svg>
  </div>
<!-- partial -->
  <script  src="script.js"></script>

</body>
</html>

js

代码的解释:
  1. 代码以一些注释开始,提到了设计师和原始图片来源。
  2. 代码使用"use strict"启用JavaScript的严格模式,这有助于捕捉常见的编码错误并强制执行更好的编码实践。
  3. 代码选择HTML文档中的body元素,并将其分配给 body 变量。
  4. 它选择所有具有"class"为"menu__item"的元素,并将它们分配给 menu 变量。
  5. 它选择具有"class"为"menu__border"的元素,并将其分配给 menuBorder 变量。
  6. 它声明一个未分配任何值的变量 active 。这个变量将用于跟踪当前活动的菜单项。
  7. 定义了 clickItem 函数。该函数在单击菜单项时触发。
  8. clickItem 函数内部,首先检查是否已经有一个活动的菜单项。如果有,它会从中删除"active"类。
  9. 然后,它将"active"类添加到被点击的菜单项( this 指的是被点击的菜单项)。
  10. 它使用 getBoundingClientRect() 计算被点击菜单项的位置和大小,并将其分配给 box 变量。
  11. 更新 active 变量为被点击的菜单项。
  12. 将body元素的背景颜色设置为被点击菜单项的"–bgColorBody" CSS自定义属性的值。
  13. 调用 offsetMenuBorder 函数,将 boxmenuBorder 变量作为参数传递。
  14. offsetMenuBorder 函数根据被点击菜单项的位置计算菜单边框元素的左侧位置,并更新菜单边框元素的 transform CSS属性。
  15. 最后,为每个菜单项添加了点击事件监听器,当点击时触发 clickItem 函数。
// Designed by:  Mauricio Bucardo
// Original image: https://dribbble.com/shots/5619509-Animated-Tab-Bar

"use strict"; 

let body = document.body;
let menu = document.querySelectorAll(".menu__item");
let menuBorder = document.querySelector(".menu__border");
let active ;

function clickItem() {
    
    active = document.querySelector("button.active");
    
    if (active) {
        active.classList.remove("active");
    }
    
    this.classList.add("active");
    let box = this.getBoundingClientRect();

    active = this;
    body.style.backgroundColor = active.style.getPropertyValue("--bgColorBody");
    
    offsetMenuBorder (box, menuBorder);
    
}


function offsetMenuBorder(box, menuBorder) {
    let left = Math.floor(box.left - menuBorder.closest("menu").offsetLeft - (menuBorder.offsetWidth  - box.width) / 2) +  "px";
    menuBorder.style.transform = `translate3d(${left}, 0 , 0)`
}


menu.forEach(item => {
    item.addEventListener("click", clickItem);
})

css

html {

    box-sizing: border-box;
    --bgColorMenu : #1d1d27;
    --duration: .7s;    

}

html *,
html *::before,
html *::after {

    box-sizing: inherit;

}

body{
    
    margin: 0;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #ffb457;
    transition: background-color var(--duration);
    -webkit-tap-highlight-color: transparent;
}




.menu{

    display: flex;
    width: 32.05em;
    font-size: 1.5em;
    padding: 0 2.85em;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    
}

.menu__item{
    
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--duration);
    
}

.menu__item::before{
    
    content: "";
    z-index: -1;
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);
    
}


.menu__item.active {
    transform: translate3d(0, -.8em , 0);
}

.menu__item.active::before{
    
    transform: scale(1);
    background-color: var(--bgColorItem);

}

.icon{
    
    width: 2.6em;
    height: 2.6em;
    stroke: white;
    fill: transparent;
    stroke-width: 1pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    
}

.menu__item.active .icon {
    animation: strok 1.5s reverse;
    
}

@keyframes strok {
    100% {
        stroke-dashoffset: 400;
    }
}

.menu__border{

    left: 0;
    bottom: 99%;
    width: 10.9em;
    height: 2.4em;
    position: absolute;
    clip-path: url(#menu);
    background-color: var(--bgColorMenu);
    transition: transform var(--duration);
}

.svg-container {

    width: 0;
    height: 0;
}


@media screen and (max-width: 50em) {
    .menu{
        font-size: .8em;
    }
}

到了这里,关于前端代码分享——常用的手机端底部导航栏(内含源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app 经验分享,从入门到离职(二)—— tabBar 底部导航栏实战基础篇

    这篇文章的内容主题是关于小程序的 tabBar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础,我们继续对 uni-app 进行更深一步的了解和学习,以上一篇文章创建的项目为例子,我们在这个项目的基础上进行改动和学习小程序的 tabBar 内容。 本篇文章是我的 uni-app 专

    2024年02月11日
    浏览(53)
  • 前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月12日
    浏览(52)
  • 前端技术搭建井字游戏(内含源码)

    上周我们实通过前端基础实现了飞机大战游戏,今天还是继续按照我们原定的节奏来带领大家完成一个井字游戏游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的

    2024年02月05日
    浏览(50)
  • 前端搭建名言生成器(内含源码)

    目录 前言  名言生成器 页面搭建 功能实现         今天呢我们来给大家展示的,就是一个非常非常简单的名言生成器, 那么它的功能的非常简单,就是我们通过点击按钮,然后可以生成名人名言,然后我们也可以点击按钮将它分享到我们csdn的Blink当中。         上

    2024年02月11日
    浏览(52)
  • 前端技术搭建五子棋游戏(内含源码)

    上周我们实通过前端基础实现了拼图游戏,今天还是继续按照我们原定的节奏来带领大家完成一个五子棋游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的专栏是

    2024年02月12日
    浏览(60)
  • 前端技术搭建拼图小游戏(内含源码)

    上周我们实通过前端基础实现了俄罗斯方块游戏,今天还是继续按照我们原定的节奏来带领大家完成一个拼图游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的专

    2024年02月08日
    浏览(61)
  • 前端技术搭建扫雷小游戏(内含源码)

    上周我们实通过前端基础实现了贪吃蛇游戏,今天还是继续按照我们原定的节奏来带领大家完成一个游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的专栏是循序

    2024年02月07日
    浏览(51)
  • 前端技术搭建俄罗斯方块(内含源码)

    上周我们实通过前端基础实现了扫雷游戏,今天还是继续按照我们原定的节奏来带领大家完成俄罗斯方块游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 在前面的文章当中我们也提及到我们在本系列的专栏是

    2024年02月08日
    浏览(45)
  • 前端实现俄罗斯方块游戏(内含源码)

    目录 一、前言 二、功能介绍 三、页面搭建 四、样式设置 五、逻辑部分         今天带领大家完成俄罗斯方块游戏,功能也比较简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用, 后续也会带领大家用前端一些有趣的小游戏,纯前

    2024年02月12日
    浏览(54)
  • 前端技术搭建飞机大战小游戏(内含源码)

    上周我们实通过前端基础实现了弹珠游戏,当然很多伙伴再评论区提出了想法,后续我们会考虑实现的,今天还是继续按照我们原定的节奏来带领大家完成一个飞机大战游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的

    2024年02月04日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包