Profidev

Header & Menu

Animated Bottom Bar

Авг 2, 2023 #tab-bar 
  <div class="container stage">

    <div class="container">
      <div class="tabbar tab-style3">
        <ul class="flex-center">
          <li class="home active" data-where="home"><span class="material-icons-outlined">
              home
            </span></li>
          <li class="products" data-where="products"><span class="material-icons-outlined">
              shopping_bag
            </span></li>
          <li class="services" data-where="services"><span class="material-icons-outlined">
              plumbing
            </span></li>
          <li class="about" data-where="about"><span class="material-icons-outlined">
              business
            </span></li>
          <li class="help" data-where="help"><span class="material-icons-outlined">
              help_outline
            </span></li>
          <li class="follow">&nbsp;</li>
        </ul>
      </div>
    </div>
  
    <div class="container">
      <div class="tabbar tab-style2">
        <ul class="flex-center">
          <li class="home active" data-where="home"><span class="material-icons-outlined">
              home
            </span></li>
          <li class="products" data-where="products"><span class="material-icons-outlined">
              shopping_bag
            </span></li>
          <li class="services" data-where="services"><span class="material-icons-outlined">
              plumbing
            </span></li>
          <li class="about" data-where="about"><span class="material-icons-outlined">
              business
            </span></li>
          <li class="help" data-where="help"><span class="material-icons-outlined">
              help_outline
            </span></li>
        </ul>
      </div>
    </div>
  
    <div class="container">
      <div class="tabbar tab-style1">
        <ul class="flex-center">
          <li class="home active" data-where="home"><span class="material-icons-outlined">
              home
            </span></li>
          <li class="products" data-where="products"><span class="material-icons-outlined">
              shopping_bag
            </span></li>
          <li class="services" data-where="services"><span class="material-icons-outlined">
              plumbing
            </span></li>
          <li class="about" data-where="about"><span class="material-icons-outlined">
              business
            </span></li>
          <li class="help" data-where="help"><span class="material-icons-outlined">
              help_outline
            </span></li>
          <li class="follow">&nbsp;</li>
        </ul>
      </div>
    </div>
  
    <div class="container">
      <div class="tabbar tab-style4">
        <ul class="flex-center">
          <li class="home active" data-where="home"><span class="material-icons-outlined">
              home
            </span></li>
          <li class="products" data-where="products"><span class="material-icons-outlined">
              shopping_bag
            </span></li>
          <li class="services" data-where="services"><span class="material-icons-outlined">
              plumbing
            </span></li>
          <li class="about" data-where="about"><span class="material-icons-outlined">
              business
            </span></li>
          <li class="help" data-where="help"><span class="material-icons-outlined">
              help_outline
            </span></li>
        </ul>
      </div>
    </div>
  
    <div class="container">
      <div class="tabbar tab-style5">
        <ul class="flex-center">
          <li class="home active" data-where="home"><span class="material-icons-outlined">
              home
            </span></li>
          <li class="products" data-where="products"><span class="material-icons-outlined">
              shopping_bag
            </span></li>
          <li class="services" data-where="services"><span class="material-icons-outlined">
              plumbing
            </span></li>
          <li class="about" data-where="about"><span class="material-icons-outlined">
              business
            </span></li>
          <li class="help" data-where="help"><span class="material-icons-outlined">
              help_outline
            </span></li>
        </ul>
      </div>
    </div>
    <!--tab-style5-->
  </div>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");
:root {
  --accent-color: #1fa8f5;
  --accent-color-fg: #fefefe;
  --backdrop-color: #89d4fe;
  --app-content-background-color: #c0d8ec;
  --inset-shadow: rgba(7, 43, 74, 0.3);
  --outset-shadow: rgba(223, 240, 255, 0.25);
  --clay-box-shadow: rgba(7, 43, 74, 0.3);
  --clay-background-color: #c0d8ec;
  --clay-fg-color: #444;
}

body {
  background-color: var(--backdrop-color);
  font-size: 10px;
  font-family: "Roboto", sans-serif;
}

.flex-center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container {
  padding: 1rem 1rem 1.5rem;
}

.stage {
  max-width: 400px;
  width: 400px;
  margin: 1rem auto 2rem;
}

.home.active {
  color: var(--accent-color);
}
.home-style {
  --app-content-background-color: #c0d8ec;
}

.products.active {
  --outset-shadow: rgba(247, 167, 103, 0.45);
  --inset-shadow: rgba(149, 62, 8, 0.45);
  --clay-box-shadow: rgba(211, 69, 20, 0.4);
  --clay-background-color: #d34514;
  --clay-fg-color: #f1f2f3;
  color: #690c0c;
}
.products-style {
  --app-content-background-color: #d36e5a;
}

.services.active {
  --outset-shadow: rgba(255, 159, 40, 0.45);
  --inset-shadow: rgba(88, 54, 13, 0.45);
  --clay-box-shadow: rgba(88, 54, 13, 0.4);
  --clay-background-color: #ed9426;
  --clay-fg-color: #f1f2f3;
  color: #cf5c0f;
}
.services-style {
  --app-content-background-color: #ed9426;
}

.about.active {
  --outset-shadow: rgba(93, 255, 85, 0.45);
  --inset-shadow: rgba(28, 78, 26, 0.45);
  --clay-box-shadow: rgba(28, 78, 26, 0.4);
  --clay-background-color: #4dd146;
  --clay-fg-color: #f1f2f3;
  color: #4dd146;
}
.about-style {
  --app-content-background-color: #4dd146;
}

.help.active {
  --outset-shadow: rgba(230, 230, 230, 0.45);
  --inset-shadow: rgba(81, 81, 81, 0.45);
  --clay-box-shadow: rgba(81, 81, 81, 0.4);
  --clay-background-color: #a3a3a3;
  --clay-fg-color: #f1f2f3;
  color: #783896;
}
.help-style {
  --app-content-background-color: #a3a3a3;
}

.tabbar {
  background-color: var(--app-content-background-color);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: 120px;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s;
}
.tabbar ul,
.tabbar li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tabbar ul {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f9f8fa;
  align-self: flex-end;
  justify-content: center;
  height: 50px;
}
.tabbar li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  margin-right: 5px;
  transition: all 0.4s;
  background-color: #f9f8fa;
  width: 60px;
  height: 60px;
  position: relative;
  color: #888;
  cursor: pointer;
}
.tabbar li:last-child {
  margin-right: 0;
}

.tab-style1 ul {
  justify-content: center;
}
.tab-style1 li {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
  left: 0;
  width: 60px;
  height: 50px;
  transition: top 0.2s ease-out, width 0.4s, border-radius 0.4s, box-shadow 0.4s;
}
.tab-style1 li.follow {
  position: absolute;
  border-radius: 100%;
  content: " ";
  width: 60px;
  height: 60px;
  border: 10px solid var(--app-content-background-color);
  background-color: var(--app-content-background-color);
  top: -3rem;
  transition: left 0.4s ease-in, background-color 0.4s, border-color 0.4s;
}
.tab-style1 li.follow:before, .tab-style1 li.follow:after {
  content: " ";
  position: absolute;
  top: 27px;
  right: -27px;
  border-top: 11px solid var(--app-content-background-color);
  background-color: #f9f8fa;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  transition: border-color 0.4s;
}
.tab-style1 li.follow::after {
  border-top-left-radius: 100%;
}
.tab-style1 li.follow:before {
  left: -27px;
  right: unset;
  border-top-right-radius: 100%;
}
.tab-style1 li:nth-child(1).active ~ .follow {
  left: 12px;
}
.tab-style1 li:nth-child(2).active ~ .follow {
  left: 75px;
}
.tab-style1 li:nth-child(3).active ~ .follow {
  left: 140px;
}
.tab-style1 li:nth-child(4).active ~ .follow {
  left: 205px;
}
.tab-style1 li:nth-child(5).active ~ .follow {
  left: 270px;
}
.tab-style1 .active {
  z-index: 100;
  width: 60px;
  height: 60px;
  top: -2rem;
  border-radius: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.tab-style2 ul {
  justify-content: center;
}
.tab-style2 li {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
  left: 0;
  width: 60px;
  height: 50px;
}
.tab-style2 .active {
  width: 60px;
  height: 60px;
  top: -1rem;
}
.tab-style2 .active span {
  font-size: 2rem;
}
.tab-style2 .active:before, .tab-style2 .active:after {
  position: absolute;
  content: " ";
  width: 13px;
  height: 13px;
  border-bottom: 4px solid #f9f8fa;
  top: 8px;
}
.tab-style2 .active:before {
  border-bottom-right-radius: 100%;
  left: -7px;
}
.tab-style2 .active:after {
  border-bottom-left-radius: 100%;
  right: -7px;
}

.tab-style3 li {
  top: -8px;
  width: 60px;
  height: 35px;
  background-color: transparent;
  padding-top: 3px;
}
.tab-style3 li.follow {
  position: absolute;
  top: 0;
  display: flex;
  border-top: 3px solid #333;
  width: 60px;
  height: 1px;
  transition: all 0.3s ease-out;
}
.tab-style3 li:nth-child(1).active ~ .follow {
  left: 20px;
  z-index: 20;
}
.tab-style3 li:nth-child(2).active ~ .follow {
  left: 88px;
  z-index: 20;
}
.tab-style3 li:nth-child(3).active ~ .follow {
  left: 149px;
  z-index: 20;
}
.tab-style3 li:nth-child(4).active ~ .follow {
  left: 216px;
  z-index: 20;
}
.tab-style3 li:nth-child(5).active ~ .follow {
  left: 283px;
  z-index: 20;
}

.tab-style4 li {
  width: 60px;
  height: 40px;
  flex-direction: column;
  overflow: hidden;
}
.tab-style4 li span {
  position: relative;
  top: 3px;
  transition: top 0.4s ease-out, font-size 0.2s ease-out;
  text-shadow: inset 2px 2px 4px var(--clay-box-shadow);
}
.tab-style4 li:after {
  width: 100%;
  height: 10px;
  text-transform: uppercase;
  text-align: center;
  font-size: 8px;
  font-weight: bold;
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: bottom 0.2s ease-out, opacity 0.4s ease-out;
}
.tab-style4 li.active:after {
  opacity: 1;
  bottom: 2px;
  text-shadow: inset 2px 2px 8px var(--clay-box-shadow);
}
.tab-style4 li:nth-child(1):after {
  content: "home";
}
.tab-style4 li:nth-child(2):after {
  content: "products";
}
.tab-style4 li:nth-child(3):after {
  content: "services";
}
.tab-style4 li:nth-child(4):after {
  content: "company";
}
.tab-style4 li:nth-child(5):after {
  content: "help";
}
.tab-style4 .active span {
  font-size: 1.1rem;
  top: -4px;
}

.tab-style5 ul {
  justify-content: center;
}
.tab-style5 li {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
  left: 0;
  width: 60px;
  height: 50px;
  transition: top 0.4s ease-out, border-radius 0.4s ease-out, box-shadow 0.4s ease-out;
}
.tab-style5 .active {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: -1rem;
  background-color: var(--clay-background-color);
  box-shadow: 1px 2px 4px 0 var(--clay-box-shadow), 2px 4px 8px 0 var(--clay-box-shadow), inset 2px 2px 8px var(--outset-shadow), inset -2px -2px 8px var(--inset-shadow);
  color: var(--clay-fg-color);
}
.tab-style5 .active span {
  font-size: 2rem;
}

.site-url-container {
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 0.8rem;
}
const uls = document.querySelectorAll("ul");

uls.forEach((ul) => {
  const resetClass = ul.parentNode.getAttribute("class");
  const lis = ul.querySelectorAll("li");

  lis.forEach((li) => {
    li.addEventListener("click", (e) => {
      e.preventDefault();
      e.stopPropagation();
      const target = e.currentTarget;

      if (
        target.classList.contains("active") ||
        target.classList.contains("follow")
      ) {
        return;
      }

      ul.parentNode.setAttribute(
        "class",
        `${resetClass} ${target.getAttribute("data-where")}-style`
      );

      lis.forEach((item) => clearClass(item, "active"));

      setClass(target, "active");
    });
  });
});

function clearClass(node, className) {
  node.classList.remove(className);
}

function setClass(node, className) {
  node.classList.add(className);
}

Похожие записи

Header & Menu

Content menu animation

Дек 12, 2023 admin
Header & Menu

Portfolio with transitions

Июн 21, 2023 admin
Header & Menu

Tab Bar Menu Animation

Июн 20, 2023 admin

Вы пропустили

Карточки ReactJS

Recipe Card React.js

18.06.2026 admin
Карточки

Recipe Card

18.06.2026 admin
ReactJS Слайдеры

Image Carousel React.js

08.06.2026 admin
Слайдеры

Image Carousel

08.06.2026 admin