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>

Siddikur Rahman Rayhan (Tamim )

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

Post a Comment (0)
Previous Post Next Post