Siddik navbar

bySiddikur Rahman Rayhan (Tamim ) •
0

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nav Challenge</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="https://kit.fontawesome.com/aa77553ffb.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link
      href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css"
      media="all"
      rel="stylesheet"
    />
    <link
      href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css"
      media="all"
      rel="stylesheet"
    />
    <link
      href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css"
      media="all"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./ham.css" />
    <style>html {
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}
.main {
  width: 100%;
  height: 100%;
  background-color: #fde5b2;
  position: relative;
}

.navcurve {
  margin-top: 50%;
}
.circlefx {
  position: absolute;
  left: 0;

  z-index: 10;
  transform: translateY(-25px);
}
.fa {
  color: #fde5b2;
  font-size: 22px;
}
ul {
  transform: translateY(10%);
  transform:translateX(-10%);
  margin-bottom: 0 !important;
  text-align: center;
}
ul li {
  list-style-type: none;
  margin-right: 1em;
display: inline;
margin-left: 1em;
}
.navbar {
  height: 10vh;
  background: rgb(199, 34, 34);
  position: absolute;
  align-items: baseline;
  width:100vw;
  /*box-shadow: 0px 0px 10px 0px #000000;*/
  z-index: 5;
}
.pitfx {
  position: absolute;
  display: inline;
  bottom: -116px;
  transform: translate(-222px, 0px);
}
.fxcontainer,
#fx {
  position: absolute;
  transition: 0.7s ease;
bottom: -23%;
left: 7.4%;
  z-index: -1;
}
.navcont {
  position: fixed;
  bottom:0;
  clip-path: ellipse(35px 35px at 95% 75%);
  transition: clip-path 0.6s ease;
  width: 100%;
  height: 10vh;
}
.expanded {
  clip-path: ellipse(100vw 100vw at 5vw 10vw);
}

@keyframes comein {
  0% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(-65px);
  }
  100% {
    transform: translateY(-33px);
  }
}
.content {
  width: 100vw;
  height: 70vh;
  position: fixed;
 
}
.content span:nth-child(1) {
  width: 7em;
  position: absolute;
  height: 7em;
  transform: translate(2em, 5em);
  border-radius: 15px;
  background: #fdd684;
  display: block;
}
.content span:nth-child(2) {
  display: block;
  background: #fdd684;
  position: absolute;
  width: 7em;
  height: 1em;
  transform: translate(10em, 9em);
  border-radius: 15px;
}
.content span:nth-child(3) {
  display: block;
  background: #fdd684;
  position: absolute;
  width: 10em;
  height: 1em;
  transform: translate(10em, 11em);
  border-radius: 15px;
}
.content span:nth-child(4) {
  width: 7em;
  position: absolute;
  height: 7em;
  transform: translate(2em, 16em);
  border-radius: 15px;
  background: #fdd684;
  display: block;
}
.content span:nth-child(5) {
  display: block;
  background: #fdd684;
  position: absolute;
  width: 7em;
  height: 1em;
  transform: translate(10em, 20em);
  border-radius: 15px;
}
.content span:nth-child(6) {
  display: block;
  background: #fdd684;
  position: absolute;
  width: 10em;
  height: 1em;
  transform: translate(10em, 22em);
  border-radius: 15px;
}
heading {
  position: absolute;
  font-size: 1.6em;
  width: 100vw;
  font-weight: 900;
  text-align: center;
  text-shadow: 3px 3px 3px #c83a27;
  color: #ffd072;
}
.home {
  transform: translateY(0);
  animation: liout 0.8s ease forwards;
  transition: transform 1s ease-in-out;
}
.homein {
  transition: transform, color 1s ease-in-out;
  animation: liload 0.8s ease forwards !important;
}

.users,
.msg,
.settings {
  animation: liout 0.8s ease forwards;
  transition: all 2s linear;
}

.about {
  opacity: 1 !important;
  left: 28.5% !important;
}
.msgs {
  opacity: 1 !important;
  left: 49.5% !important;
}
.sett {
  opacity: 1 !important;
  left: 71% !important;
}
.fxin {
  opacity: 1;

  transition: all 1s ease-in-out;
  animation: fxload 0.8s ease forwards;
}

@keyframes fxload {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: translateY(-35px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes fxout {
  0% {
    opacity: 1;
    transform: translate(-30px, 20px);
  }
  50% {
    opacity: 1;
    transform: translate(-30px, -15px);
  }
  100% {
    opacity: 0;
    transform: translate(-30px, 0px);
  }
}
@keyframes liload {
  from {
    transform: translateY(0px);
    color: #fde5b2;
  }
  to {
    color: #c83a27;
    transform: translateY(-20px);
  }
}
@keyframes liout {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0px);
  }
}

/*ham burger*/
/*ham burger*/
/*ham burger*/
/*ham burger*/
/*ham burger*/

.ham {
  position: absolute;
  z-index: 20;
  width: 8%;

  right: 15px;
  top: 0%;
  /* transform: scale(0.5)!important; */
  transform: scale(0.5) translateY(-60%);
}
.hamburglar {
  -webkit-transform: scale(1);
  transform: scale(1);
  margin: 40px auto;
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.path-burger {
  position: absolute;
  top: 0;
  left: 0;
  height: 68px;
  width: 68px;
  -webkit-mask: url(#mask);
  /* mask: url(#mask);
  -webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
*/
}

.animate-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.path-rotation {
  height: 34px;
  width: 34px;
  margin: 34px 34px 0 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.path-rotation:before {
  content: "";
  display: block;
  width: 30px;
  height: 34px;
  margin: 0 4px 0 0;
  background: #fdd684;
}

@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate-out {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes rotate-in {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.hamburglar.is-open .path {
  -webkit-animation: dash-in 0.6s linear normal;
  animation: dash-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.hamburglar.is-open .animate-path {
  -webkit-animation: rotate-in 0.6s linear normal;
  animation: rotate-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.hamburglar.is-closed .path {
  -webkit-animation: dash-out 0.6s linear normal;
  animation: dash-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.hamburglar.is-closed .animate-path {
  -webkit-animation: rotate-out 0.6s linear normal;
  animation: rotate-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

@-webkit-keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
@keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
.burger-icon {
  position: absolute;
  padding: 20px 16px;
  height: 68px;
  width: 68px;
}

.burger-container {
  position: relative;
  height: 28px;
  width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  display: block;
  height: 4px;
  width: 36px;
  border-radius: 2px;
  background: #fdd684;
}

.burger-bun-top {
  top: 0;
  -webkit-transform-origin: 34px 2px;
  transform-origin: 34px 2px;
}

.burger-bun-bot {
  bottom: 0;
  -webkit-transform-origin: 34px 2px;
  transform-origin: 34px 2px;
}

.burger-filling {
  top: 12px;
}

.burger-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.svg-ring {
  width: 68px;
  height: 68px;
}

.hamburglar.is-open .burger-bun-top {
  -webkit-animation: bun-top-out 0.6s linear normal;
  animation: bun-top-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.hamburglar.is-open .burger-bun-bot {
  -webkit-animation: bun-bot-out 0.6s linear normal;
  animation: bun-bot-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-top {
  -webkit-animation: bun-top-in 0.6s linear normal;
  animation: bun-top-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.hamburglar.is-closed .burger-bun-bot {
  -webkit-animation: bun-bot-in 0.6s linear normal;
  animation: bun-bot-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes bun-top-out {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

@keyframes bun-top-out {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes bun-bot-out {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@keyframes bun-bot-out {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@-webkit-keyframes bun-top-in {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes bun-top-in {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes bun-bot-in {
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes bun-bot-in {
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.hamburglar.is-open .burger-filling {
  -webkit-animation: burger-fill-out 0.6s linear normal;
  animation: burger-fill-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-filling {
  -webkit-animation: burger-fill-in 0.6s linear normal;
  animation: burger-fill-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes burger-fill-in {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}

@keyframes burger-fill-in {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}
@-webkit-keyframes burger-fill-out {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}
@keyframes burger-fill-out {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}


@media only screen and (min-height:730px){
    .ham{
      
       
      transform: scale(0.5) translateY(-35%);
}
}
</style>
  </head>
  <body>

      <div class="navcont">
        <span class="ham">
          <div id="hamburger" class="hamburglar is-closed">
            <div class="burger-icon">
              <div class="burger-container">
                <span class="burger-bun-top"></span>
                <span class="burger-filling"></span>
                <span class="burger-bun-bot"></span>
              </div>
            </div>

            <!-- svg ring containter -->
            <div class="burger-ring">
              <svg class="svg-ring">
                <path
                  class="path"
                  fill="none"
                  stroke="#fde5b2"
                  stroke-miterlimit="10"
                  stroke-width="4"
                  d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2"
                />
              </svg>
            </div>
            <!-- the masked path that animates the fill to the ring -->

            <svg width="0" height="0">
              <mask id="mask">
                <path
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  stroke="#fde5b2"
                  stroke-miterlimit="10"
                  stroke-width="4"
                  d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4"
                />
              </mask>
            </svg>
            <div id="burger" class="path-burger">
              <div class="animate-path">
                <div class="path-rotation"></div>
              </div>
            </div>
          </div>
        </span>

        <div class="navbar">
          <ul>
            <span id="fx" class="fxcontainer"
              ><svg
                height="100"
                width="100"
                style="position: absolute; z-index: 1; top: -64px;"
              >
                <circle
                  class="circlefx"
                  cx="50"
                  cy="50"
                  r="20"
                  stroke="null"
                  stroke-width="3"
                  fill="#ffd072"
                />
              </svg>
              <svg
                class="pitfx"
                width="600"
                height="400"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke="#0f0f00"
                  class=""
                  d="m244.53658,250.36686c0,-12.74621 -27.81965,-9.65933 27.66213,-9.65933c55.48178,0 26.90685,-3.08688 26.90685,9.65933c0,12.74621 -12.21019,23.07064 -27.28449,23.07064c-15.0743,0 -27.28449,-10.32443 -27.28449,-23.07064z"
                  stroke-opacity="0"
                  stroke-linecap="null"
                  stroke-linejoin="null"
                  stroke-width="1.5"
                  fill="#fde5b2"
                /></svg
            ></span>
            <li onclick="selected(1)">
              <i class="fa fa-home home" aria-hidden="true"></i>
            </li>

            <li onclick="selected(2)">
              <i class="fa fa-user-o users" aria-hidden="true"></i>
            </li>
            <li onclick="selected(3)">
              <i class="fa fa-commenting-o msg" aria-hidden="true"></i>
            </li>
            <li onclick="selected(4) ">
              <i class="fa fa-cog settings" aria-hidden="true"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>

   <script>
      
       var burger = document.querySelector("#burger");
var navcont = document.querySelector(".navcont");
var home = document.querySelector(".home");
var fx = document.querySelector(".fxcontainer");

var fxin = document.querySelector(".fxin");
$("document").ready(function () {
  var trigger = $("#hamburger"),
    isOpened = false;

  trigger.click(function () {
    burgerTime();
  });
  var c = 0;
  function burgerTime() {
    if (isOpened == true) {
      trigger.removeClass("is-open");
      trigger.addClass("is-closed");

      navcont.classList.remove("expanded");
      fx.classList.remove("fxin");
      $(".homein").addClass("here");

      $(".fa").removeClass("homein");
      //home.classList.remove("homein");

      isOpened = false;
    } else {
      trigger.removeClass("is-closed");
      trigger.addClass("is-open");
      navcont.classList.add("expanded");
      //fx.classList.add("fxin");
      if (c == 0) {
        home.classList.add("homein");
        c += 1;
      }
      $(".fxcontainer").removeClass("fxin");
      $(".fxcontainer").addClass("fxin");
      $(".here").addClass("homein");
      $(".fa").removeClass("here");
      isOpened = true;
    }
  }
});
function selected(x) {
  switch (x) {
    case 1:
      $(".fa").removeClass("homein");
      $(".home").addClass(" homein");
      $("#fx").removeClass();

      $("#fx").addClass("fxcontainer fxin homes");
      break;
    case 2:
      $(".fa").removeClass("homein");
      $(".users").addClass("homein");
      $("#fx").removeClass();

      $("#fx").addClass("fxcontainer fxin about");

      break;
    case 3:
      $(".fa").removeClass("homein");
      $(".msg").addClass("homein");
      $("#fx").removeClass();
      $("#fx").addClass("fxcontainer fxin msgs");
      break;
    case 4:
      $(".fa").removeClass("homein");
      $(".settings").addClass(" homein");
      $("#fx").removeClass();
      $("#fx").addClass("fxcontainer fxin sett");
      break;
    default:
  }
}

      
   </script>
  </body>
</html>

Post a Comment (0)
Previous Post Next Post