Tabs Menu Bar with Background Color Change Effect

Written by @kerixa 29 March 2021

Many websites use a menu to display the most used links. The following code provides a beautiful  tab menu. By clicking on each item in the menu, in addition to displaying the menu title, the background color of the page changes to the color of the selected icon. See the preview to find how it works.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: #e6e5e6;
}

nav {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 6rem;
    width: 24rem;
    background: #fff;
    font-family: sans-serif;
    font-weight: 600;
    border-radius: 2rem;
    padding: 0 1rem;
    box-shadow: 0 -1.1px 2.2px rgba(0,0,0,0.02), 0 -2.7px 5.3px rgba(0,0,0,0.028), 0 -5px 10px rgba(0,0,0,0.035), 0 -8.9px 17.9px rgba(0,0,0,0.042), 0 -16.7px 33.4px rgba(0,0,0,0.05), 0 -40px 80px rgba(0,0,0,0.07);
}

nav ul {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

nav li {
    display: contents;
}

nav li:nth-of-type(1) {
    --clr-accent-h: 133deg;
    --clr-accent-s: 54%;
    --clr-accent-l: 53%;
}

nav li:nth-of-type(2) {
    --clr-accent-h: 349deg;
    --clr-accent-s: 100%;
    --clr-accent-l: 83%;
}

nav li:nth-of-type(3) {
    --clr-accent-h: 220deg;
    --clr-accent-s: 83%;
    --clr-accent-l: 69%;
}

nav li:nth-of-type(4) {
    --clr-accent-h: 252deg;
    --clr-accent-s: 52%;
    --clr-accent-l: 52%;
}

nav label {
    position: relative;
    font-size: 0;
    line-height: 1rem;
    border-radius: 100vmax;
    padding: 1rem 1rem;
    -webkit-padding-start: 2rem;
    padding-inline-start: 2rem;
    width: 3rem;
    transition: width 0.3s 0.25s linear, color 0.3s linear, font-size 0s 0.3s linear, background 0.3s linear, -webkit-padding-start 0.3s 0.25s linear;
    transition: padding-inline-start 0.3s 0.25s linear, width 0.3s 0.25s linear, color 0.3s linear, font-size 0s 0.3s linear, background 0.3s linear;
    transition: padding-inline-start 0.3s 0.25s linear, width 0.3s 0.25s linear, color 0.3s linear, font-size 0s 0.3s linear, background 0.3s linear, -webkit-padding-start 0.3s 0.25s linear;
    color: transparent;
    text-align: center;
    cursor: pointer;
    border: solid 2px transparent;
}

nav label svg {
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    inset-inline-start: 0.9rem;
    inset-block: 0;
    margin: auto;
    fill: #cdcbcd;
    transition: fill 0.2s linear;
}

nav label::before {
    content: "";
    position: fixed;
    inset: 0;
    background: HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s 0.45s linear;
    pointer-events: none;
}

nav input {
    position: absolute;
    width: 0;
    height: 0;
}

nav input:checked + label {
    background: HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l), 0.25);
    font-size: 1rem;
    width: 8rem;
    color: HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
    -webkit-padding-start: 3rem;
    padding-inline-start: 3rem;
    transition: width 0.3s 0.25s linear, color 0.3s 0.5s linear, font-size 0s linear, background 0.3s linear, -webkit-padding-start 0.3s 0.25s linear;
    transition: padding-inline-start 0.3s 0.25s linear, width 0.3s 0.25s linear, color 0.3s 0.5s linear, font-size 0s linear, background 0.3s linear;
    transition: padding-inline-start 0.3s 0.25s linear, width 0.3s 0.25s linear, color 0.3s 0.5s linear, font-size 0s linear, background 0.3s linear, -webkit-padding-start 0.3s 0.25s linear;
}

nav input:checked + label svg {
    fill: HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
}

nav input:checked + label::before {
    opacity: 1;
    transition: opacity 0.3s 0.15s linear;
}

nav label:hover svg {
    fill: HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
}

nav input:focus + label {
    outline: none;
    border: solid 2px HSLA(var(--clr-accent-h), var(--clr-accent-s), var(--clr-accent-l));
}
</style>
<nav>
  <ul>
    <li><input type="radio" name="tab" id="home"><label for="home">
      <svg viewBox="0 0 211 212"><path d="M211 205l0 -112c0,-5 -1,-9 -5,-12l-88 -77c-6,-5 -15,-5 -21,0l-91 78c-4,3 -6,7 -6,12l0 111c0,4 3,7 8,7l56 0c5,0 8,-3 8,-7l0 -56c0,-15 12,-26 26,-26l15 0c15,0 26,11 26,26l0 56c0,4 4,7 8,7l57 0c4,0 7,-3 7,-7z"/></svg>
      Home
    </label></li>
    <li><input type="radio" name="tab" id="likes"><label for="likes">
      <svg viewBox="0 0 90 90"><path d="M45,23.9L45,23.9c0,0,18.1-22.3,37.3-5.4c11.3,9.9,9.7,25.4-2,37.1L45,89.7L9.7,55.6C-2,43.9-3.6,28.4,7.7,18.5  C26.9,1.6,45,23.9,45,23.9L45,23.9z"/></svg>
      Likes
    </label></li>
    <li><input type="radio" name="tab" id="chats"><label for="chats">
      <svg viewBox="0 0 100 100"><path d="M92.77,0H7.23A7,7,0,0,0,0,6.72V68.83a7,7,0,0,0,7.23,6.72H40.5L73,100V75.55H92.77A7,7,0,0,0,100,68.83V6.72A7,7,0,0,0,92.77,0Z"/></svg>
      Chats
    </label></li>
    <li><input type="radio" name="tab" id="settings"><label for="settings">
      <svg viewBox="0 0 270 270"><path class="fil0" d="M166 39c5,2 10,4 15,6l24 -18c5,-3 11,-2 14,1l22 22c4,4 4,10 1,14l-17 25c2,5 4,10 6,15l30 5c5,0 9,5 9,10l0 31c0,5 -4,10 -9,11l-30 5c-2,5 -4,10 -6,15l18 24c3,5 2,11 -1,14l-22 22c-4,4 -10,4 -14,1l-25 -17c-5,2 -10,4 -15,6l-5 30c-1,5 -6,9 -11,9l-31 0c-5,0 -10,-4 -10,-9l-5 -30c-5,-2 -10,-4 -15,-6l-25 17c-4,3 -10,3 -14,-1l-22 -22c-3,-3 -4,-9 -1,-13l18 -25c-3,-5 -5,-10 -6,-15l-30 -5c-5,-1 -9,-6 -9,-11l0 -31c0,-5 4,-10 9,-10l30 -5c1,-6 3,-10 6,-15l-18 -25c-3,-4 -2,-10 2,-14l22 -22c3,-3 9,-4 13,-1l25 18c5,-2 10,-4 15,-6l5 -30c0,-5 5,-9 10,-9l31 0c5,0 10,4 11,9l5 30zm-31 39c-31,0 -57,26 -57,57 0,31 26,57 57,57 31,0 57,-26 57,-57 0,-31 -26,-57 -57,-57z"/></svg>
      Settings
    </label></li>
  </ul>
</nav><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2