Animations, Header & Footer, Navigation Bar, Unique Menu

Animated Tab Bar in Html and CSS responsive

Hello everyone, in this post we will create a responsive nav bar using Html and CSS. In the last lesson, we discussed how to create the Buttons in CSS with different styles. But now at this moment, we will create a responsive navigation bar.

Responsive animated tab bar:

The animated tab bar is a bar present at the top of the website. As you can see in the image we have a responsive Animated tab bar. It has an icon on the white animated tab bar. it has different buttons and they have the link to those pages. These buttons also have a hover effect. These buttons are just UI. They are without functionality. If you want to add functionality to it then you have to use javascript and PHP as well for storing the data. Buttons are static before clicking. But after clicking on these icons they are showing an active color of the buttons along with the text or name of the button. The icons are used from fontawesome website. We are starting today’s topic that how to create a menu bar in Html and CSS.

Animated Tab Bar in Html and CSS responsive — Animated Tab Bar

How to create a responsive nav bar?

The navigation bar can be created using different languages and platforms but now we are creating it using HTML and CSS. These are markup languages and we will completely design them using Html and CSS. It will be responsive across all devices.

Download an IDE for the nav bar:

An IDE is a code editor used to write code. For writing the code of HTML and CSS we will use vs code, sublime text 3, or brackets. We are using these code editors because they provide suggestions to write the code and they save a lot of time. They also help to write error-free code.

Source code of Html:

It is a markup language and all the buttons are created using Html. The logo is also imported with the help of Html. We can do a lot of work in HTML but we can’t design using Html. The code of HTML is given below. Click at copy button and then paste it into your IDE.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Tab Bar | FantacyDesigns</title>

  </head>


<body>
  <menu class="menu">

          <button class="menu__item active">
              <div class="menu__icon" >

                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                      <g id="home-anm">
                          <path stroke-linejoin="round"  stroke-linecap="round" d="M70.5,80.1h40.7"/>
                          <path d="M35,64v80"/>
                          <path d="M145.1,143V63"/>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M24.9,70l65.7-50.7L156.3,70"/>
                      </g>

                      <path stroke-linejoin="round" d="M145.1,117.6v33.1c0,1.5-1.2,2.8-2.8,2.8h-28.4c-1.5,0-2.8-1.2-2.8-2.8V126c0-11.3-9.2-20.5-20.5-20.5l0,0
                      c-11.3,0-20.5,9.2-20.5,20.5v27.5h16H37.8c-1.5,0-2.8-1.2-2.8-2.8v-34.2"/>

                  </svg>

              </div>
              <strong class="menu__text active">home</strong>
          </button>

          <button class="menu__item">
              <div class="menu__icon" >

                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145">

                      <g id="strategy-anm" >
                          <path d="M84.1,50.4L72,64.7c-2,2.4-5.2,3.5-8.3,3l-40.1-6.8c-3.2-0.6-5.8,2.4-4.8,5.5L42,127.9c1.2,3.6,4.6,6.1,8.4,6.1
                          h81.6c3.9,0,7.3-2.6,8.5-6.3l21.5-61.4c0.9-3-1.7-6-4.9-5.4l-38.3,6.7c-3,0.6-6.2-0.5-8.2-2.8L97.4,50.2
                          C93.8,46.3,87.6,46.3,84.1,50.4z"/>
                      </g>
                      <path stroke-linecap="round" d="M38.8,153.5h105.5"/>
                      <path stroke-linecap="round" d="M66.8,112.5h49.5"/>
                      <path id="strategy-cir1" stroke-width="0" fill="currentColor" d="M32.4,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S16.1,27,21.9,27S32.4,31.7,32.4,37.5z"/>
                      <path id="strategy-cir2" stroke-width="0" fill="currentColor" d="M102.3,23.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S86,13,91.8,13S102.3,17.7,102.3,23.5z"/>
                      <path id="strategy-cir3" stroke-width="0" fill="currentColor" d="M169.6,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S153.3,27,159.1,27S169.6,31.7,169.6,37.5z"/>

                  </svg>

              </div>
              <strong class="menu__text">strategy</strong>
          </button>

          <button class="menu__item">
              <div class="menu__icon" >

                  <svg class="icon"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                      <g id="period-cir">
                          <path fill="currentColor" stroke-width="0" d="M96.5,141.7c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7C93.4,134.6,96.5,137.8,96.5,141.7z"/>
                          <path fill="currentColor" stroke-width="0" d="M78.2,126.7c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-3.9,3.1-7,7-7S78.2,122.8,78.2,126.7z"/>
                          <path fill="currentColor" stroke-width="0" d="M110.6,120.5c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7S110.6,116.6,110.6,120.5z"/>

                      </g>
                      <g id="period-anm">
                          <path stroke-linecap="round" d="M30.8,24.7h118.3 M117.3,71.2l9.7-6.7c0.7-0.4,1.1-1.1,1.1-1.9V24.7H50v37.8"/>
                          <path stroke-linecap="round" d="M149.4,153.3H30.6 M75.5,90.7l-23.1,21.2c-1.6,1.4-2.4,3.4-2.4,5.6v35.9h78.1V113"/>
                          <g id="period-line">
                              <path stroke-linecap="round" d="M50,62.5l40,44.2"/>
                              <path stroke-linecap="round" d="M128.1,111.7L95.2,73.4"/>
                          </g>
                      </g>

                  </svg>

              </div>
              <strong class="menu__text">period</strong>
          </button>

          <button class="menu__item">
              <div class="menu__icon" >

                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                      <path stroke-linecap="round" d="M94,139c-4.8,1.3-8.8,1.7-11.4,1.8c0,0-18.3,1.1-36.9-11.6c-1.9-1.3-4.7-3.2-7.8-6.2c-1.7-1.6-2.9-2.9-3.4-3.6
                      c0,0-3.6-4.2-6.1-8.6c-4.6-8.4-5.4-18.9-5.5-21l0,0V75.5v-39c0-0.7,0.5-1.3,1.2-1.5l58-14.2c0.2-0.1,0.5-0.1,0.7,0l57.9,14.7
                      c0.7,0.2,1.1,0.8,1.1,1.5v29.7"/>
                      <path id="security-cir" stroke-linecap="round" d="M158.3,120.7c0,18.3-14.8,33.1-33.1,33.1s-33-14.8-33-33.1s14.8-33.1,33.1-33.1S158.3,102.4,158.3,120.7z"/>
                      <g id="security-strok">
                          <path stroke-linecap="round" d="M151.1,104.5l-25,25c-1.3,1.3-3.5,1.3-4.9,0l-9.1-9.1"/>
                          <path stroke-linecap="round" d="M82.6,43L23.1,62.3"/>
                          <path stroke-linecap="round" d="M82.6,68.4L23.1,87.6"/>
                      </g>

                  </svg>

              </div>
              <strong class="menu__text">security</strong>
          </button>

          <button class="menu__item">
              <div class="menu__icon" >

                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >

                      <circle cx="90.5" cy="90.2" r="19.7"/>
                      <g id="settings-anm" >
                          <path stroke-linejoin="round" d="M144.7,73.8l-6.2-1c-0.6-1.5-1.2-3-1.9-4.5l3.6-5.1c3.2-4.4,2.7-10.5-1.2-14.3l-7.4-7.4
                          c-2.1-2.1-4.9-3.3-7.8-3.3c-2.3,0-4.5,0.7-6.4,2.1l-5.1,3.6c-1.6-0.7-3.2-1.4-4.8-2l-1-6.1c-0.9-5.4-5.5-9.3-10.9-9.3H85.1
                          c-5.4,0-10,3.9-10.9,9.2L73.1,42c-1.5,0.6-3,1.2-4.5,1.9l-5-3.6c-1.9-1.4-4.1-2.1-6.5-2.1c-3,0-5.8,1.2-7.8,3.3l-7.4,7.4
                          c-3.8,3.8-4.3,9.8-1.2,14.3l3.7,5.2c-0.7,1.5-1.3,3-1.8,4.5l-6.1,1c-5.4,0.9-9.3,5.5-9.3,10.9v10.5c0,5.4,3.9,10,9.2,10.9l6.3,1.1
                          c0.6,1.5,1.2,3,1.9,4.5l-3.6,5c-3.2,4.4-2.7,10.5,1.2,14.3l7.4,7.4c2.1,2.1,4.9,3.3,7.8,3.3c2.3,0,4.5-0.7,6.4-2.1L69,136
                          c1.4,0.6,2.8,1.2,4.2,1.7l1,6.2c0.9,5.4,5.5,9.3,10.9,9.3h10.5c5.4,0,10-3.9,10.9-9.2l1-6.2c1.5-0.6,3-1.2,4.5-1.9l5.1,3.6
                          c1.9,1.4,4.1,2.1,6.5,2.1c3,0,5.7-1.2,7.8-3.3l7.4-7.4c3.8-3.8,4.3-9.8,1.2-14.3l-3.6-5.1c0.7-1.5,1.3-3,1.9-4.5l6.2-1
                          c5.4-0.9,9.3-5.5,9.3-10.9V84.8C153.9,79.3,150.1,74.7,144.7,73.8z"/>
                      </g>

                  </svg>

              </div>
              <strong class="menu__text">settings</strong>
          </button>

      </menu>

  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html>

<head>

<title>Animated Tab Bar | FantacyDesigns</title>

</head>

<body>

</g>

<path stroke-linejoin="round" d="M145.1,117.6v33.1c0,1.5-1.2,2.8-2.8,2.8h-28.4c-1.5,0-2.8-1.2-2.8-2.8V126c0-11.3-9.2-20.5-20.5-20.5l0,0

c-11.3,0-20.5,9.2-20.5,20.5v27.5h16H37.8c-1.5,0-2.8-1.2-2.8-2.8v-34.2"/>

</svg>

</div>

</button>

<path d="M84.1,50.4L72,64.7c-2,2.4-5.2,3.5-8.3,3l-40.1-6.8c-3.2-0.6-5.8,2.4-4.8,5.5L42,127.9c1.2,3.6,4.6,6.1,8.4,6.1

h81.6c3.9,0,7.3-2.6,8.5-6.3l21.5-61.4c0.9-3-1.7-6-4.9-5.4l-38.3,6.7c-3,0.6-6.2-0.5-8.2-2.8L97.4,50.2

C93.8,46.3,87.6,46.3,84.1,50.4z"/>

</g>

</svg>

</div>

<strong class="menu__text">strategy</strong>

</button>

</g>

</g>

</svg>

</div>

<strong class="menu__text">period</strong>

</button>

<path stroke-linecap="round" d="M94,139c-4.8,1.3-8.8,1.7-11.4,1.8c0,0-18.3,1.1-36.9-11.6c-1.9-1.3-4.7-3.2-7.8-6.2c-1.7-1.6-2.9-2.9-3.4-3.6

c0,0-3.6-4.2-6.1-8.6c-4.6-8.4-5.4-18.9-5.5-21l0,0V75.5v-39c0-0.7,0.5-1.3,1.2-1.5l58-14.2c0.2-0.1,0.5-0.1,0.7,0l57.9,14.7

c0.7,0.2,1.1,0.8,1.1,1.5v29.7"/>

</g>

</svg>

</div>

<strong class="menu__text">security</strong>

</button>

<path stroke-linejoin="round" d="M144.7,73.8l-6.2-1c-0.6-1.5-1.2-3-1.9-4.5l3.6-5.1c3.2-4.4,2.7-10.5-1.2-14.3l-7.4-7.4

c-2.1-2.1-4.9-3.3-7.8-3.3c-2.3,0-4.5,0.7-6.4,2.1l-5.1,3.6c-1.6-0.7-3.2-1.4-4.8-2l-1-6.1c-0.9-5.4-5.5-9.3-10.9-9.3H85.1

c-5.4,0-10,3.9-10.9,9.2L73.1,42c-1.5,0.6-3,1.2-4.5,1.9l-5-3.6c-1.9-1.4-4.1-2.1-6.5-2.1c-3,0-5.8,1.2-7.8,3.3l-7.4,7.4

c-3.8,3.8-4.3,9.8-1.2,14.3l3.7,5.2c-0.7,1.5-1.3,3-1.8,4.5l-6.1,1c-5.4,0.9-9.3,5.5-9.3,10.9v10.5c0,5.4,3.9,10,9.2,10.9l6.3,1.1

c0.6,1.5,1.2,3,1.9,4.5l-3.6,5c-3.2,4.4-2.7,10.5,1.2,14.3l7.4,7.4c2.1,2.1,4.9,3.3,7.8,3.3c2.3,0,4.5-0.7,6.4-2.1L69,136

c1.4,0.6,2.8,1.2,4.2,1.7l1,6.2c0.9,5.4,5.5,9.3,10.9,9.3h10.5c5.4,0,10-3.9,10.9-9.2l1-6.2c1.5-0.6,3-1.2,4.5-1.9l5.1,3.6

c1.9,1.4,4.1,2.1,6.5,2.1c3,0,5.7-1.2,7.8-3.3l7.4-7.4c3.8-3.8,4.3-9.8,1.2-14.3l-3.6-5.1c0.7-1.5,1.3-3,1.9-4.5l6.2-1

c5.4-0.9,9.3-5.5,9.3-10.9V84.8C153.9,79.3,150.1,74.7,144.7,73.8z"/>

</g>

</svg>

</div>

<strong class="menu__text">settings</strong>

</button>

</menu>

</body>

</html>

Source code of CSS:

It is used to design the buttons and navigation bar. We have used different properties of CSS to design the menu bar. For the hover effect, we have also used the properties of CSS. The design code of CSS is presented below. By pasting this code then you have to connect the CSS file with the Html file using the link tag in the Html file.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');

html {

    box-sizing: border-box ;
    --duration: .45s ;
    --cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
    --color-1: #d5dadd ;
    --color-2: #51d5c2 ;

}

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

    box-sizing: inherit ;
background: red;
}

body {

    margin: 0 ;
    height: 100vh ;
    display: flex ;
    overflow: hidden ;
    align-items: center ;
    justify-content: center ;
    background-color: #f0f1f1 ;
    font-family: 'Nunito', sans-serif ;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.menu {

    margin: 0 ;
    width: 42em ;
    display: flex ;
    height: 10.4em ;
    user-select: none ;
    position: relative ;
    align-items: center ;
    padding: 0 1.9em 2.5em ;
    justify-content: center ;
    background-color: #fefefe ;
    border-radius: 1em 1em 4.5em 4.5em ;
    -webkit-tap-highlight-color: transparent ;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

@media (max-width: 42.625em) {

  .menu {

    font-size: .55em ;

  }

}

.menu::after {

    height: 5% ;
    width: 35% ;
    bottom: 10% ;
    content: " " ;
    position: absolute ;
    border-radius: 1em ;
    background-color: #f2f3f4 ;


}

.menu__item {

    all: unset ;
    flex-grow: 1 ;
    display: flex ;
    cursor: pointer ;
    overflow: hidden ;
    padding-top: 0.5em ;
    position: relative ;
    align-items: center ;
    color: var(--color-1) ;
    justify-content: center ;
    transition: flex-grow var(--duration) var(--cubic) ;

}

.menu__icon {

    font-size: 1.05em ;
    stroke: currentColor ;
    transition: transform var(--duration) var(--cubic) ;

}

.menu__item::before {

    top: 9% ;
    left: 18.4% ;
    width: 1.5em ;
    height: 1.5em ;
    content: " ";
    position: absolute ;
    border-radius: 50% ;
    transform: scale(0) ;
    transform-origin: center ;
    background-color: #fdecef ;
    transition: transform var(--duration) var(--cubic) ;

}

.menu__item::after {

    left: 0;
    bottom: 0 ;
    content: " " ;
    height: 0.25em ;
    position: absolute ;
    border-radius: 2em ;
    transform-origin: left center ;
    background-color: currentColor ;
    width: calc( var(--lineWidth) + 5px ) ;
    transform: translate3d(3em , 0, 0) scaleX(0) ;
    transition: transform calc( var(--duration) + .2s) var(--cubic) ;

}


.menu__text {

    left: 4.15em ;
    font-size: 1.5em ;
    position: absolute ;
    text-transform: capitalize ;
    letter-spacing: .01em ;
    transform: translate3d(0, 109%, 0) ;
    transition: transform calc( var(--duration) / 3.7 ) ;

}

.menu__item.active {

    flex-grow: 2.7 ;
    color: var(--color-2) ;

}

.menu__item.active .menu__icon {

    transform: translate3d(-95% , 0, 0) ;


}

.menu__item.active::before {

    transform: scale(1) ;

}

.menu__item.active::after {

    transform: translate3d(6.3em , 0, 0) scaleX(1) ;
    transition: transform var(--duration) var(--cubic) ;

}

.menu__text.active {

    transform: translate3d(0 , 0, 0) ;
    transition: transform calc(var(--duration) / 1.5) ;
}

.icon {

    --duration-icon: 1s ;

    fill: none ;
    width: 2.5em ;
    height: 2.5em ;
    display: block ;
    stroke-width: 15 ;
    stroke-miterlimit: 10 ;

}


.active #home-anm {

    animation: home var(--duration-icon) ;
}

@keyframes home {

    25% {

        transform: translate3d(0, -.8em , 0) ;

    }

    50% {

        transform: translate3d(0, .5em , 0) ;

    }


}

#strategy-anm {

    transform: scaleX(.85) ;
    transform-origin: center ;

}

.active #strategy-anm {

    animation: strategy var(--duration-icon) ;

}

@keyframes strategy {

    50% {

        transform: scaleX(1) ;

    }

    100%{

        transform: scaleX(.85) ;

    }

}

.active #strategy-cir1 {

    animation: strategy-cir1 var(--duration-icon);
}

.active #strategy-cir2 {

    animation: strategy-cir2 var(--duration-icon) .1s;
}

.active #strategy-cir3 {

    animation: strategy-cir3 var(--duration-icon) .2s;
}

@keyframes strategy-cir1 {

    50% {

        transform: translate3d(-.7em,-0.7em,0);

    }

    100%{

        transform: translate3d(0,0,0);


    }

}

@keyframes strategy-cir2 {

    35% {

        transform: translate3d(0,-0.7em,0);

    }

    100%{

        transform: translate3d(0,0,0);


    }

}

@keyframes strategy-cir3 {

    35% {

        transform: translate3d(.7em,-0.7em,0);

    }

    100%{

        transform: translate3d(0,0,0);


    }

}


.active #period-anm {

    transform-origin: center 100% ;
    animation: period var(--duration-icon) ;

}

.active #period-cir {

    transform-origin: center ;
    animation: period-cir var(--duration-icon) ;

}

.active #period-line {

    stroke-dasharray: 66 ;
    animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;

}


@keyframes period {

    35% {

        transform: scaleY(.85) ;

    }

    60% , 70% {

        transform: scaleY(1.2) ;

    }

    100% {

        transform: scaleY(1) ;

    }

}

@keyframes period-cir {

    0%{

       opacity: 0 ;

    }

    35% {

        opacity: 1 ;
        transform: translate3d(15%, -55%, 0) ;

    }

    60%{

        opacity: 0 ;
        transform: translate3d(-8%, -50%, 0) ;

    }

}

@keyframes period-line {


    100% {

        stroke-dashoffset: 66 ;

    }

}


.active #security-cir {

    transform-box: fill-box ;
    transform-origin: center ;
    animation: security-cir calc( var(--duration-icon) / 1.5 ) ;

}

@keyframes security-cir {


    0% {

        transform: scale(0) ;

    }

    100% {

        transform: scale(1) ;

    }

}

.active #security-strok {

    stroke-dasharray: 96;
    animation: security-strok calc( var(--duration-icon) / 1.2 ) ;

}

@keyframes security-strok {


    0% {

        stroke-dashoffset: 60 ;

    }

    100% {

        stroke-dashoffset: 230 ;

    }

}

.active #settings-anm {

    transform-box: fill-box ;
    transform-origin: center ;
    animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;

}

@keyframes settings-anm {


    0% {

        transform: rotate(-60deg);

    }

    50% {

        transform: rotate(60deg);

    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');

html {

box-sizing: border-box ;

--duration: .45s ;

--cubic: cubic-bezier(0.4, 0, 0.2, 1) ;

--color-1: #d5dadd ;

--color-2: #51d5c2 ;

}

html *,

html *::before,

html *::after {

box-sizing: inherit ;

background: red;

}

body {

margin: 0 ;

height: 100vh ;

display: flex ;

overflow: hidden ;

align-items: center ;

justify-content: center ;

background-color: #f0f1f1 ;

font-family: 'Nunito', sans-serif ;

box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

.menu {

margin: 0 ;

width: 42em ;

display: flex ;

height: 10.4em ;

user-select: none ;

position: relative ;

align-items: center ;

padding: 0 1.9em 2.5em ;

justify-content: center ;

background-color: #fefefe ;

border-radius: 1em 1em 4.5em 4.5em ;

-webkit-tap-highlight-color: transparent ;

box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

@media (max-width: 42.625em) {

.menu {

font-size: .55em ;

}

.menu::after {

height: 5% ;

width: 35% ;

bottom: 10% ;

content: " " ;

position: absolute ;

border-radius: 1em ;

background-color: #f2f3f4 ;

}

.menu__item {

all: unset ;

flex-grow: 1 ;

display: flex ;

cursor: pointer ;

overflow: hidden ;

padding-top: 0.5em ;

position: relative ;

align-items: center ;

color: var(--color-1) ;

justify-content: center ;

transition: flex-grow var(--duration) var(--cubic) ;

}

.menu__icon {

font-size: 1.05em ;

stroke: currentColor ;

transition: transform var(--duration) var(--cubic) ;

}

.menu__item::before {

top: 9% ;

left: 18.4% ;

width: 1.5em ;

height: 1.5em ;

content: " ";

position: absolute ;

border-radius: 50% ;

transform: scale(0) ;

transform-origin: center ;

background-color: #fdecef ;

transition: transform var(--duration) var(--cubic) ;

}

.menu__item::after {

left: 0;

bottom: 0 ;

content: " " ;

height: 0.25em ;

position: absolute ;

border-radius: 2em ;

transform-origin: left center ;

background-color: currentColor ;

width: calc( var(--lineWidth) + 5px ) ;

transform: translate3d(3em , 0, 0) scaleX(0) ;

transition: transform calc( var(--duration) + .2s) var(--cubic) ;

}

.menu__text {

left: 4.15em ;

font-size: 1.5em ;

position: absolute ;

text-transform: capitalize ;

letter-spacing: .01em ;

transform: translate3d(0, 109%, 0) ;

transition: transform calc( var(--duration) / 3.7 ) ;

}

.menu__item.active {

flex-grow: 2.7 ;

color: var(--color-2) ;

}

.menu__item.active .menu__icon {

transform: translate3d(-95% , 0, 0) ;

}

.menu__item.active::before {

transform: scale(1) ;

}

.menu__item.active::after {

transform: translate3d(6.3em , 0, 0) scaleX(1) ;

transition: transform var(--duration) var(--cubic) ;

}

.menu__text.active {

transform: translate3d(0 , 0, 0) ;

transition: transform calc(var(--duration) / 1.5) ;

}

.icon {

--duration-icon: 1s ;

fill: none ;

width: 2.5em ;

height: 2.5em ;

display: block ;

stroke-width: 15 ;

stroke-miterlimit: 10 ;

}

.active #home-anm {

animation: home var(--duration-icon) ;

}

@keyframes home {

25% {

transform: translate3d(0, -.8em , 0) ;

}

50% {

transform: translate3d(0, .5em , 0) ;

}

#strategy-anm {

transform: scaleX(.85) ;

transform-origin: center ;

}

.active #strategy-anm {

animation: strategy var(--duration-icon) ;

}

@keyframes strategy {

50% {

transform: scaleX(1) ;

}

100%{

transform: scaleX(.85) ;

}

.active #strategy-cir1 {

animation: strategy-cir1 var(--duration-icon);

}

.active #strategy-cir2 {

animation: strategy-cir2 var(--duration-icon) .1s;

}

.active #strategy-cir3 {

animation: strategy-cir3 var(--duration-icon) .2s;

}

@keyframes strategy-cir1 {

50% {

transform: translate3d(-.7em,-0.7em,0);

}

100%{

transform: translate3d(0,0,0);

}

@keyframes strategy-cir2 {

35% {

transform: translate3d(0,-0.7em,0);

}

100%{

transform: translate3d(0,0,0);

}

@keyframes strategy-cir3 {

35% {

transform: translate3d(.7em,-0.7em,0);

}

100%{

transform: translate3d(0,0,0);

}

.active #period-anm {

transform-origin: center 100% ;

animation: period var(--duration-icon) ;

}

.active #period-cir {

transform-origin: center ;

animation: period-cir var(--duration-icon) ;

}

.active #period-line {

stroke-dasharray: 66 ;

animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;

}

@keyframes period {

35% {

transform: scaleY(.85) ;

}

60% , 70% {

transform: scaleY(1.2) ;

}

100% {

transform: scaleY(1) ;

}

@keyframes period-cir {

0%{

opacity: 0 ;

}

35% {

opacity: 1 ;

transform: translate3d(15%, -55%, 0) ;

}

60%{

opacity: 0 ;

transform: translate3d(-8%, -50%, 0) ;

}

@keyframes period-line {

100% {

stroke-dashoffset: 66 ;

}

.active #security-cir {

transform-box: fill-box ;

transform-origin: center ;

animation: security-cir calc( var(--duration-icon) / 1.5 ) ;

}

@keyframes security-cir {

0% {

transform: scale(0) ;

}

100% {

transform: scale(1) ;

}

.active #security-strok {

stroke-dasharray: 96;

animation: security-strok calc( var(--duration-icon) / 1.2 ) ;

}

@keyframes security-strok {

0% {

stroke-dashoffset: 60 ;

}

100% {

stroke-dashoffset: 230 ;

}

.active #settings-anm {

transform-box: fill-box ;

transform-origin: center ;

animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;

}

@keyframes settings-anm {

0% {

transform: rotate(-60deg);

}

50% {

transform: rotate(60deg);

}

Source code of JS:

   <script type="text/javascript">
const buttons = document.querySelectorAll(".menu__item");
let activeButton = document.querySelector(".menu__item.active");

buttons.forEach(item => {

    const text = item.querySelector(".menu__text");
    setLineWidth(text, item);

    window.addEventListener("resize", () => {
        setLineWidth(text, item);
    })

    item.addEventListener("click", function() {
        if (this.classList.contains("active")) return;

        this.classList.add("active");
        
        if (activeButton) {
            activeButton.classList.remove("active");
            activeButton.querySelector(".menu__text").classList.remove("active");
        }
        
        handleTransition(this, text);
        activeButton = this;

    });

    
});


function setLineWidth(text, item) {
    const lineWidth = text.offsetWidth + "px";
    item.style.setProperty("--lineWidth", lineWidth);
}

function handleTransition(item, text) {

    item.addEventListener("transitionend", (e) => {

        if (e.propertyName != "flex-grow" || 
        !item.classList.contains("active")) return;

        text.classList.add("active");
        
    });

}

const buttons = document.querySelectorAll(".menu__item");

let activeButton = document.querySelector(".menu__item.active");

buttons.forEach(item => {

const text = item.querySelector(".menu__text");

setLineWidth(text, item);

window.addEventListener("resize", () => {

setLineWidth(text, item);

})

item.addEventListener("click", function() {

if (this.classList.contains("active")) return;

this.classList.add("active");

if (activeButton) {

activeButton.classList.remove("active");

activeButton.querySelector(".menu__text").classList.remove("active");

}

handleTransition(this, text);

activeButton = this;

});

function setLineWidth(text, item) {

const lineWidth = text.offsetWidth + "px";

item.style.setProperty("--lineWidth", lineWidth);

}

function handleTransition(item, text) {

item.addEventListener("transitionend", (e) => {

if (e.propertyName != "flex-grow" ||

!item.classList.contains("active")) return;

text.classList.add("active");

});

}

Download source code:

Sometimes newbies don’t know how to create files properly and then connect them with each other. For those, we have created a file and in that file all the files are present. You just need to run the file and the result will be there in front of you.

Task:

As you can see above animated tab bar, was created using HTML and CSS only. The active color of all the icons is dull. After clicking they are showing active green color along with the text on the right side of the icons. Now the task is, to change the position of text from the right side to the left side and also change the active color of the icons and text. Change the icon of the setting as well.

For followers, we have special gifts. We share premium templates with our followers only. So don’t forget to follow us.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download