CodePen Embed - Jquery Floating Menu

<div id="menu-trigrad">
  <i class="fa fa-bars"></i>
  <i style="display:none" class="fa fa-times"></i>
</div>
<div id="menu-body">
  <div class="menu-wrap">
    <ul class="menu">
      <li class="wow slideInLeft" data-wow-delay=".200s"><a href="#">Home</a></li>
      <li class="wow slideInLeft" data-wow-delay=".500s"><a href="#">Blog</a></li>
      <li class="wow slideInLeft" data-wow-delay=".800s"><a href="#">Portfolio</a></li>
      <li class="wow slideInLeft" data-wow-delay=".1200s"><a href="#">Gallery</a></li>
      <li class="wow slideInLeft" data-wow-delay=".1500s"><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

<!--=========================== Contents =========================== -->
<br />
<br />
<br />
<br />
<br />
<br />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header text-center">
        <a style="font-size:35px" href="https://codepen.io/kingRayhan/pen/wMgzaK">View source code</a>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eius placeat provident voluptates veritatis accusamus, itaque suscipit delectus doloribus dolorem reiciendis minima earum, consequatur laboriosam atque assumenda porro expedita
        quaerat animi incidunt. Eius dicta sunt illum asperiores est voluptas, cum pariatur adipisci deserunt, fugiat quas architecto consectetur placeat dolor rem itaque animi labore assumenda quo aspernatur, aliquid eveniet ratione! Id sapiente sit
        dolor, nobis inventore, quae eum quam illo eligendi eius, autem ut officia asperiores temporibus. Quia veniam repudiandae nostrum natus. Voluptatem ad quibusdam sed atque facere consequuntur excepturi ea, cumque enim aliquam blanditiis facilis
        quam sint aperiam eos ex non nesciunt voluptate hic vel saepe consequatur, debitis accusantium. Asperiores fugiat hic qui deserunt architecto, reprehenderit repudiandae ad molestias dolorum aut voluptates consequuntur et mollitia quisquam dolor
        aspernatur quidem ab a odio vel repellendus iusto recusandae. Asperiores voluptatum perferendis ex, nam sed illum fugit incidunt hic cumque! Tempore fuga dolorem reiciendis, fugit dolores, recusandae eum! Fugiat neque ipsam nesciunt culpa commodi.
        Repellat necessitatibus dolore dolorem voluptatibus, molestiae nesciunt perferendis quae id reiciendis eius libero facere nobis, quia labore quos vitae ipsa nemo. Quos numquam, hic repellat illum temporibus repudiandae, laboriosam, quae quod dolorem
        tempore eveniet eligendi. Eum obcaecati totam aliquid, doloremque eos quisquam sunt deserunt provident quam consequatur explicabo dolor fugit asperiores assumenda corporis harum incidunt omnis id adipisci praesentium maxime debitis ratione! Distinctio
        porro neque, iste odit dolor consectetur rem tempora temporibus labore fugiat ipsam beatae? Esse expedita aliquid quibusdam quis, harum rem assumenda eum obcaecati explicabo reprehenderit nihil ut magni enim vitae aspernatur ratione, velit magnam
        alias aperiam libero earum delectus in sit? Animi nesciunt repudiandae atque quasi odio commodi eveniet doloremque quia dolorem architecto nemo modi aut ex, cumque accusamus. Magni, aperiam minima quisquam neque distinctio mollitia asperiores
        voluptatem beatae quas nulla. Facere culpa velit tempora excepturi officiis, reiciendis, doloribus numquam saepe aut quos, recusandae laborum dolore, fugiat ducimus architecto. Molestias, explicabo, tempora. Placeat incidunt corporis a ratione.
        Nam repellendus impedit quaerat quo, sit necessitatibus sequi ut iure, facere beatae delectus consequuntur hic tempore dolorum commodi eius atque, cumque, asperiores est tempora. Voluptates, harum quis fugit impedit modi mollitia recusandae neque
        accusamus dolorum praesentium ipsam, laudantium aspernatur atque eius itaque provident facere deserunt quia totam earum nam blanditiis alias enim. Labore rem libero iste accusamus inventore, at consequatur tempora quisquam dolorum, porro iure
        consequuntur dolorem! Animi doloribus fuga ex delectus voluptatem dolorem odit deleniti illo minus repudiandae aspernatur expedita nisi totam at mollitia, adipisci, quas tempore sunt tempora. Reiciendis distinctio porro temporibus quaerat delectus,
        deleniti sed corrupti quibusdam vel, ex enim debitis fugiat voluptatibus! Dolorum nemo cumque id voluptas eaque culpa minus excepturi. Illo eaque, dolores quam id atque vitae quaerat a cumque molestias nisi incidunt quasi neque dolorem voluptate
        adipisci, esse accusamus. Facere consectetur rem delectus libero repellat ipsa maxime enim nemo. Neque odio ducimus distinctio corporis, obcaecati minus maxime est tempore atque deleniti, blanditiis praesentium iste eligendi cum adipisci similique
        maiores nesciunt incidunt, recusandae quibusdam explicabo. Ipsum hic ducimus consequuntur in adipisci autem nulla modi quidem ipsam nobis. Ducimus ullam iure dolores quasi expedita molestiae culpa modi, non, eius officia ad nesciunt veniam laborum
        aliquid tempore inventore dolor, deserunt consequatur aperiam dolorem suscipit! Quas delectus, unde amet magnam totam voluptate similique eveniet praesentium incidunt consequuntur quo illum dignissimos numquam provident est asperiores officiis
        reprehenderit ducimus libero officia quisquam dolor nisi. Labore consequatur, hic, pariatur dignissimos atque, quae, at placeat beatae reiciendis odit illum magni officiis. Distinctio officiis recusandae in quam ratione impedit sed voluptatem
        assumenda sint, itaque maxime, omnis voluptatum quibusdam suscipit, tempore adipisci saepe nihil deleniti earum ea iure. Labore rerum cumque numquam, nostrum ipsam, ullam dolore, voluptatum cupiditate iste, delectus magni adipisci hic! Non atque
        voluptas tempora libero, necessitatibus repellendus excepturi facere, cumque suscipit, maxime eius itaque aliquid error animi magni quidem rem tempore ratione reiciendis esse! Voluptatibus, at itaque vitae, molestiae est saepe consequatur rerum.
        Inventore consectetur labore optio consequuntur ad aspernatur, animi aperiam, omnis quod nemo praesentium sequi rem? Voluptate maiores, deserunt qui, aperiam harum unde tempore molestias eaque iusto fuga officiis placeat labore voluptatum repellendus,
        sed animi sint voluptatem. Laudantium, dolore. Similique odit, tempore repudiandae! Eligendi veniam dolorem quaerat fugiat tenetur nesciunt iusto, vel magni libero eaque aspernatur consectetur consequatur similique maxime explicabo reprehenderit
        voluptates. Consequatur repudiandae tempore explicabo aut provident facere suscipit vel, enim distinctio eveniet placeat, laudantium itaque quibusdam. Modi ut culpa harum dolore eaque eum iure dignissimos delectus, maxime fugit. Minima eveniet
        repellendus suscipit quidem maiores doloremque qui laboriosam accusamus, quia dolore saepe sit molestiae labore a, ea non repudiandae corporis. Dignissimos eaque optio dolor explicabo tenetur. Doloribus omnis nesciunt odio, maxime dolores praesentium
        ratione assumenda ut reprehenderit perferendis voluptates quidem ipsam. Eos voluptatibus alias ex dolorem excepturi voluptates labore eveniet modi quos neque aliquam nesciunt blanditiis cumque, quaerat reiciendis, ratione repellat, velit soluta
        magni culpa iusto autem doloribus! Dolore ut ea, dolorem ipsam a iure voluptatum nobis, atque animi delectus doloremque itaque molestiae quis nemo ullam vitae tenetur magni dolor aut inventore quae placeat sed. Consectetur fugiat doloribus placeat
        sequi, nemo perferendis eveniet quam vero autem aperiam pariatur, libero delectus atque quidem? Soluta necessitatibus fuga excepturi, corporis maxime, iusto quam eveniet molestias ea cum optio quo repudiandae impedit magni. Placeat exercitationem
        repudiandae praesentium deleniti neque, labore non modi officiis cumque, sed libero, iure maxime! Voluptates deleniti id eveniet quas omnis facilis veniam exercitationem dicta qui voluptatibus labore fugit facere eaque, porro sint saepe beatae
        tempora, autem magnam. Dicta perspiciatis nobis accusamus accusantium quasi dolor, facilis eligendi et minus pariatur in ipsa voluptatem vitae mollitia quo blanditiis recusandae nihil laborum fugiat aperiam! Quia harum debitis quibusdam nobis
        consectetur aliquam at quidem culpa iusto eius sint officia impedit ratione, asperiores suscipit molestiae nam quo, aperiam id officiis quod. Repellendus excepturi minus dignissimos magni saepe neque iste blanditiis molestiae quasi voluptatem
        ab, vel aspernatur eveniet velit quibusdam praesentium dolorum. Expedita aspernatur velit cum! Fuga dolore vero totam animi facilis, dolor quod corporis repudiandae unde ea vel magni et quasi ad, placeat pariatur officiis? Minus harum quo maxime,
        eos pariatur vitae perferendis quibusdam eum alias incidunt illum repellat modi corporis nostrum magni cumque eius, hic excepturi laborum voluptatem accusantium possimus! Deleniti molestias quia saepe libero nisi, soluta corporis laborum, perferendis,
        explicabo delectus cumque qui eius. Natus amet vero ratione sapiente similique aut quod fugit, a, architecto, voluptatem aliquam dolores laudantium error autem? Repellat, aperiam. Ex consequuntur itaque, tenetur voluptate perspiciatis dicta in
        fugiat nostrum deserunt quia quis, qui illum cumque, voluptatem similique harum ea cum neque quae animi illo veniam numquam provident? Iusto aut, officia vel a enim culpa obcaecati, quod earum saepe, ullam ipsa quidem, cumque quae voluptatem maiores
        tenetur fugit aliquam magnam? Neque earum, iste aperiam maiores velit totam non debitis delectus impedit, commodi enim. Repudiandae fuga ratione, ex aliquam rem velit eius minima odit asperiores sequi hic earum ducimus cupiditate labore debitis
        sint ea tenetur saepe nisi modi. Odio tempore ratione illo error laudantium blanditiis mollitia sit, inventore similique pariatur, eum neque omnis sint voluptates voluptas! Illum neque sed deleniti, fugit quam voluptatem quas perferendis aliquid
        ab laudantium, illo ducimus ipsa. Pariatur minus consectetur, dolorem odit sit aperiam. Magnam, alias! Unde maxime labore recusandae deserunt perspiciatis odio sed rem deleniti. Quidem laudantium magnam hic quod, impedit eum ullam aspernatur minus
        in neque tenetur nam non rem, iusto incidunt, beatae esse modi eligendi a ipsum amet culpa! Ab, minus veniam delectus doloremque, laudantium nulla, odio atque exercitationem expedita odit eos ipsa! Necessitatibus, saepe incidunt, eveniet modi
        minus at libero eligendi esse! Porro quis, obcaecati reiciendis incidunt mollitia saepe, deleniti eaque voluptatem, cupiditate ea fuga perferendis iure. Repellat provident iusto explicabo hic labore, natus a, harum optio maxime minus nulla! Itaque
        deserunt sunt quod, dolor minima non impedit mollitia maiores ratione tempora sequi corporis repellendus laborum. Magni eveniet similique corporis soluta ex enim ab provident, exercitationem accusantium quo blanditiis commodi aliquam nesciunt
        explicabo doloremque laboriosam non officiis harum tempore rerum. Explicabo ducimus perspiciatis tempore temporibus illo, quod ipsa tempora porro laudantium quisquam dolorum ea minus ad, dolores ipsum sed cum iusto iste quaerat qui veritatis voluptatum
        quam voluptate. Vel deleniti cumque odio natus praesentium error iste! Labore ratione ea quisquam nam illum expedita veritatis possimus doloremque sunt consectetur explicabo optio quaerat hic ad consequatur quae, commodi sit eius ipsum! Itaque
        maxime blanditiis voluptates libero animi obcaecati laboriosam modi temporibus numquam quibusdam autem accusamus molestias eveniet totam non esse id, magnam, reprehenderit minima pariatur? Alias dolor itaque molestias velit similique, impedit
        enim dicta ea repellat quaerat consectetur quam aspernatur voluptate, quas, quasi? Inventore magni, eaque ipsum saepe, minus mollitia reiciendis? Eos et, quasi laborum, temporibus praesentium nulla distinctio, doloremque architecto ut qui provident
        deserunt nisi. Nulla in repellendus dolorem minus molestias, aliquam voluptatem, doloribus autem ex dicta quibusdam quae delectus. In, voluptatem alias iusto! Officia optio velit ea expedita. Mollitia repellat veniam dolorem consectetur praesentium
        quibusdam eum minima, voluptatum eveniet alias, tenetur soluta neque corporis, optio rerum dolorum laudantium. Nam cumque placeat at atque repellendus debitis beatae quae, neque, velit voluptate obcaecati quo sunt nostrum possimus autem ipsam
        nesciunt odit.</p>
    </div>
  </div>
</div>

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.menu li {
  border-bottom: 1px solid #ddd;
}

.menu li:last-child {
  border-bottom: none;
}

.menu li a {
  color: #eee;
  font-family: verdana;
  font-size: 25px;
  text-decoration: none;
  transition: .2s;
  padding: 15px 0;
  display: block;
}

.menu li a:hover {
  font-size: 40px;
}

.menu-wrap {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}

#menu-trigrad {
  font-size: 35px;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  background: #ddd;
  padding: 16px 26px;
  z-index: 9999
}

#menu-trigrad:hover {
  background-color: #000;
  color: #fff;
}

#menu-body {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

$(document).ready(function() {
new WOW().init();
  function fullscreen() {
    $('#menu-body').css({
      'width': $(window).width() + 'px',
      'height': $(window).height() + 'px',
    });
  }

  fullscreen();

  $(window).resize(function() {
    fullscreen();
  });

  $('#menu-trigrad').on('click', function() {
    $('#menu-body').fadeToggle();
    $(this).find('i').eq(0).toggle();
    $(this).find('i').eq(1).toggle();
  });

});

This Pen is owned by King Rayhan on CodePen.

See more by @kingRayhan on CodePen

External CSS

External JavaScript