website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Responsive Side Menu

Responsive Side Menu

  • 166
  • 18-Nov-2021

INDEX.HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="UTF-8" />

    <title>Responsive Side Menu</title>

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

    <link

      rel="stylesheet"

      href="https://fonts.googleapis.com/icon?family=Material+Icons"

    />

    <link rel="stylesheet" href="css/side-menu.css" />

  </head>

  <body>

    <menu class="menubar">

      <menuitem>

        <button class="menu-trigger"><i class="material-icons">menu</i></button>

      </menuitem>

    </menu>

    <div class="menu-body visibility">

      <div class="menu-head">

        <span class="layer">

          <div class="col">

            <div class="row for-pic">

              <div class="profile-pic">

                <img src="img/user.jpg" alt="Atech Seva" />

              </div>

            </div>

            <div class="row for-name">

              <h3 title="User Name">Your Name</h3>

              <span class="tagline"> Web Developer</span>

            </div>

          </div>

        </span>

      </div>

 

      <nav class="menu-container">

        <ul class="menu-items">

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item one

            </a>

          </li>

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item two

            </a>

          </li>

          <li class="has-sub">

            <span class="dropdown-heading">

              <i class="material-icons">widgets</i> Item three with dropdown

            </span>

            <ul>

              <li><a href="javascript:void(0)">dropdown sub item 1 </a></li>

              <li><a href="javascript:void(0)"> dropdown sub item 2 </a></li>

              <li><a href="javascript:void(0)"> dropdown sub item 3 </a></li>

            </ul>

          </li>

          <li class="has-sub">

            <span class="dropdown-heading">

              <i class="material-icons">widgets</i> Item four with dropdown

            </span>

            <ul>

              <li><a href="javascript:void(0)">sub item 1 </a></li>

              <li><a href="javascript:void(0)">sub item 2 </a></li>

              <li><a href="javascript:void(0)">sub item 3 </a></li>

              <li><a href="javascript:void(0)">sub item 4 </a></li>

            </ul>

          </li>

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item four

            </a>

          </li>

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item five

            </a>

          </li>

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item five

            </a>

          </li>

          <li>

            <a href="#1">

              <i class="material-icons">widgets</i> Main item six

            </a>

          </li>

        </ul>

      </nav>

    </div>

 

    <script src="js/jquery.jside.menu.js"></script>

    <script>

      $(function () {

        $(".menu-container").jSideMenu({

          jSidePosition: "position-left", //possible options position-left or position-right

          jSideSticky: true, // menubar will be fixed on top, false to set static

          jSideSkin: "default-skin", // to apply custom skin, just put its name in this string

        });

      });

    </script>

 

    <link rel="stylesheet" href="css/style.css" />

    <script src="js/side-menu.js"></script>

  </body>

</html>

 

 

STYLE.CSS

 

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*{ margin: 0; padding: 0;}

body{

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

  font-style: normal;

  font-weight: 300;

  font-smoothing: antialiased;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

  font-size: 15px;

  background: #eee;

}

.intro{

   background: #ddd;

   padding: 60px 30px;

   color: #333;

   margin-bottom: 15px;

   line-height: 1.5;

   text-align: center;

}

.intro h1 {

   font-size: 18pt;

 

}

.intro p{

   font-size: 14px;

}

 

.action{

   text-align: center;

   display: block;

   margin-top: 20px;

}

 

a.btn {

  text-decoration: none;

  color: #666;

   border: 2px solid #666;

   padding: 10px 15px;

   display: inline-block;

   margin-left: 5px;

}

a.btn:hover{

   background: #666;

   color: #fff;

    transition: .3s;

-webkit-transition: .3s;

}

.github:before,

.down:before{

  font-family: FontAwesome;

  font-weight: normal;

  margin-right: 10px;

}

.github:before{content: "\f09b"}

.down:before{content: "\f019"}

.credit{

    background: #fff;

    padding: 12px;

    font-size: 9pt;

    text-align: center;

    color: #333;

    margin-top: 40px;

 

}

.credit span:before{

   font-family: FontAwesome;

   color: #e41b17;

   content: "\f004";

 

}

.credit a{

   color: #333;

   text-decoration: none;

}

.credit a:hover{

   color: #e41b17;

}

.credit a:hover:after{

    font-family: FontAwesome;

    content: "\f08e";

    font-size: 9pt;

    position: absolute;

    margin: 3px;

}

main{

  background: #fff;

  margin: 20px;

 

}

 

article li{

   color: #444;

   font-size: 15px;

   margin-left: 33px;

   line-height: 1.5;

   padding: 5px;

}

article h1,

article h2,

article h3,

article p{

   padding: 10px;

   color: #333;

}

article p{

   font-size: 15px;

    line-height: 1.5;

}

 

@media only screen and (min-width: 720px){

    main{

      width: 720px;

       box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);

      margin-left: auto;

      margin-right: auto;

      background: #f9f9f9;

    }

 

}

 

.set-overlayer,

.set-glass,

.set-sticky {

   cursor: pointer;

   height: 45px;

   line-height: 45px;

   padding: 0 15px;

   color: #333;

   font-size: 16px;

}

.set-overlayer:after,

.set-glass:after,

.to-active:after,

.set-sticky:after {

   font-family: FontAwesome;

   font-size: 18pt;

   position: relative;

   float: right;

}

.set-overlayer:after,

.set-glass:after,

.set-sticky:after {

   content: "\f204";

   transition: .6s;

}

 

.to-active:after {

   content: "\f205";

   color: #008080;

   transition: .6s;

}

.set-overlayer,

.set-glass,

.set-sticky,

.source,

.theme-tray {

   margin: 10px;

   background: #f2f2f2;

   border-radius: 5px;

   border: 2px solid #f1f1f1;

   box-sizing: border-box;

}

 

/* Syntax Highlighter*/

 

pre.prettyprint {

   padding: 10px;

   margin: 10px;

   border: 0;

  background: #f2f2f2;

  overflow: auto;

}

 

.source {

   white-space: pre;

   overflow: auto;

   max-height: 400px;

}

 

.theme-tray {

   overflow: hidden;

   background: #fff;

}

 

.theme-tray span {

   border: 1px solid #f2f2f2;

   width: 50px;

   height: 50px;

   display: inline-block;

   border-radius: 4px;

   cursor: pointer;

}

 

.pl-color,

.gr-color {

   text-align: center;

}

 

.gr-color h4,

.pl-color h4 {

   background: #f2f2f2;

   padding: 10px;

   margin-bottom: 6px;

   color: #333;

}

 

.mesg{

   margin: 10px;

   background: #fff;

   color: #347C2C;

   padding: 15px;

  border-radius: 4px;

   animation: bounceIn 1s forwards;

   z-index: 98;

   display: none;

   position: relative;

   text-align: center;

}

 

code{

    border:1px solid #ddd;

    padding: 2px;

    border-radius: 2px;

}

 

 

SIDE-MENU.CSS

:root {

  --skin-hover: rgba(0, 0, 0, 0.1);

  --skin-color: rgba(255, 255, 255, 0.7);

}

.default-skin {

  font-weight: 300;

  font-size: 14px;

  font-smooth: antialiased;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  --skin: #486695;

  --skin-hover: #d3af4b;

  --skin-color: rgba(255, 255, 255, 0.8);

 

}

.light-skin {

  --skin: #f0f0f0;

  --skin-hover: #ddd;

  --skin-color: #232323;

}

.menu-body.visibility {

  visibility: hidden;

}

.menubar {

  width: 100%;

  height: 48px;

  display: block;

  background: var(--skin);

  color: var(--skin-color);

  line-height: 48px;

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);

}

.menu-trigger {

  position: absolute;

  -webkit-appearance: none;

  border: 0;

  outline: 0;

  background: transparent;

  top: 10px;

  padding: 0 5px;

  color: var(--skin-color);

  cursor: pointer;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);

}

.menu-trigger:hover {

  opacity: 0.8;

  -webkit-opacity: 0.8;

}

 

.menu-trigger.left {

  left: 20px;

}

 

.menu-trigger.right {

  right: 20px;

}

.sticky {

  position: fixed;

  top: 0;

  left: 0;

}

 

.menu-container {

  font-family: "Questrial", sans-serif;

  overflow: auto;

  display: block;

  top: 120px;

}

 

.menu-container::-webkit-scrollbar {

  width: 4px;

}

 

.menu-container::-webkit-scrollbar-track {

  background: rgba(255, 255, 255, 0.2);

}

 

.menu-container::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.11);

}

 

.menu-container::-webkit-scrollbar-thumb:hover {

  background: #555;

}

 

.position-left {

  left: -270px;

}

.position-right {

  right: -270px;

}

 

.position-left.open {

  left: 0;

}

 

.position-right.open {

  right: 0;

}

 

.menu-container,

.menu-head,

.menu-left,

.menu-left.open .menu-right,

.menu-right.open {

  transition: 0.4s;

  -webkit-transition: 0.4s;

  -moz-transition: 0.4s;

  -ms-transition: 0.4s;

}

 

.menu-container,

.menu-head {

  background: var(--skin);

  position: fixed;

  z-index: 1000;

  width: 270px;

}

.menu-head .layer {

  background: rgba(0, 0, 0, 0.2);

  display: block;

  padding: 15px;

}

 

.menu-head {

  height: 120px;

  box-sizing: border-box;

  margin: 0px;

  top: 0;

}

 

.menu-items {

  list-style: none;

  font-size: 14px;

}

 

.dropdown-heading,

.menu-items li a {

  text-decoration: none;

  padding: 10px;

  display: block;

  color: var(--skin-color);

  border-bottom: 1px dotted rgba(255, 255, 255, 0.05);

  margin: 0;

  cursor: pointer;

  user-select: none;

  -webkit-user-select: none;

  text-transform: capitalize;

}

/* Icon Style */

.menu-items li i {

  font-size: 16px;

  margin-right: 10px;

}

.dropdown-heading {

  -webkit-tap-highlight-color: transparent;

}

 

.dropdown-heading:hover,

.menu-items li a:hover {

  background: var(--skin-hover);

}

 

@keyframes fadeIn {

  from {

    opacity: 0;

    -webkit-opacity: 0;

  }

  to {

    opacity: 1;

    -webkit-opacity: 1;

  }

}

@-webkit-keyframes fadeIn {

  from {

    opacity: 0;

    -webkit-opacity: 0;

  }

  to {

    opacity: 1;

    -webkit-opacity: 1;

  }

}

 

/* Dropdowns */

.has-sub ul {

  list-style: none;

  overflow: hidden;

  display: none;

  background: #ddeaffcf;

  text-transform: capitalize;

}

 

.has-sub ul li a {

  display: block;

 

  padding: 12px 33px;

 

  border-bottom: 0;

 

  font-size: 13px;

  color: #444;

  transition: 0.1s;

  -webkit-transition: 0.1s;

  border-bottom: 1px dotted #e1e1e1;

}

 

.has-sub ul li a:hover {

  background: #dedede;

  transition: 0.1s;

  -webkit-transition: 0.1s;

}

 

.has-sub span {

  display: block;

 

  box-sizing: border-box;

}

 

.has-sub i.d-arrow {

  float: right;

  margin-right: 10px;

  transition: 0.36s;

  font-size: 16px;

}

 

.has-sub .d-arrow.d-down {

  transform: rotateZ(180deg);

  -webkit-transform: rotateZ(180deg);

  -moz-transform: rotateZ(180deg);

  transition: 0.36s;

  -webkit-transition: 0.36s;

  -moz-transition: 0.36s;

}

 

.col {

  display: table;

}

.row {

  display: table-cell;

}

.for-name {

  max-width: 140px;

  padding: 10px;

  color: var(--skin-color);

}

.for-pic {

  max-width: 70px;

}

 

.profile-pic img {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.01);

  object-fit: cover;

}

.menu-head h3 {

  top: -35px;

  font-size: 13pt;

  font-weight: 400;

}

 

.tagline,

.menu-head h3 {

  display: block;

  position: relative;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

 

.tagline {

  font-size: 11px;

  bottom: 32px;

  display: block;

}

 

/* Dim background effect */

.dim-overlay {

  display: none;

}

 

.dim-overlay:before {

  content: "";

  background-color: rgb(58 82 119 / 27%);

  height: 100vh;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

  overflow: hidden;

  z-index: 2;

}

.logo {

  display: block;

  text-align: center;

  margin-left: auto;

  margin-right: auto;

  font-size: 22px;

}

.logo img {

  width: 130px;

  margin-top: 10px;

  height: auto;

}

.logo a {

  text-decoration: none;

  color: var(--skin-color);

}

.logo a:hover {

  color: var(--skin-hover);

}

 

 

MAIN.JS

$(function () {
    var a = $(".menu-container, .menu-head, .menubar");
    $(".menu-position").on("change", function () {
        $(a).not(".menubar").addClass($(this).val());
        $(".j-pos").html('jSidePosition: "position-right",');
        if ($(this).val() == "position-left") {
            $(a).removeClass("position-right");
            $(".j-pos").html('jSidePosition: "position-left",');
            $(".menu-trigger").removeClass("right").addClass("left")
        } else {
            $(a).removeClass("position-left");
            $(".menu-trigger").removeClass("left").addClass("right")
        }
    });
    $(".bg-color").on("change", function () {
        var b = $(this).val();
        $(a).css({
            background: b,
        });
        $(".bg-color-input").val(b)
    });
    $(".bg-color-input").on("input", function () {
        $(a).css({
            background: $(this).val(),
        })
    });
    $("#set-top").change(function () {
        $(".menubar").addClass("sticky");
        $(".j-sticky").html("jSideSticky: true,")
    });
    $("#set-st").change(function () {
        $(".menubar").removeClass("sticky");
        $(".j-sticky").html("jSideSticky: false,")
    });
    $(".theme-tray span").click(function () {
        var c = $(this).attr("class");
        $(".menubar").attr("class", c).addClass("menubar sticky");
        $(".menu-container").attr("class", c).addClass("menu-container position-left");
        $(".menu-head").attr("class", c).addClass("menu-head position-left");
        var b = 'jSideSkin:"' + c + '",';
        $(".j-skin").html(b)
    })
});

SIDE-MENU.JS

(function ($) {

  $.fn.jSideMenu = function (options) {

    var setting = $.extend(

      {

        jSidePosition: "position-left", //possible options position-left or position-right

        jSideSticky: true, // menubar will be fixed on top, false to set static

        jSideSkin: "default-skin", // to apply custom skin, just put its name in this string

        jSideTransition: 400, //Define the transition duration in milliseconds

      },

      options

    );

 

    return this.each(function () {

      var jSide, target, headHeight, devHeight, arrow, dimBackground;

 

      target = $(this);

 

      //Accessing DOM

      jSide = $(".menu-container, .menu-head");

      devHeight = $(window).height();

      headHeight = $(".menu-head").height();

      dHeading = $(".dropdown-heading");

      menuTrigger = $(".menu-trigger");

      arrow = $("<i></i>");

      dimBackground = $("<div>");

 

      // Set the height of side menu according to the available height of device

      $(target).css({

        height: devHeight - headHeight,

      });

 

      if (setting.jSideSticky == true) {

        $(".menubar").addClass("sticky");

      } else {

        $(".menubar").removeClass("sticky");

      }

 

      $(".menubar").addClass(setting.jSideSkin);

      $(jSide).addClass(setting.jSideSkin).addClass(setting.jSidePosition);

 

      if ($(jSide).hasClass("position-left")) {

        $(".menu-trigger").addClass("left").removeClass("right");

      } else {

        $(".menu-trigger").removeClass("left").addClass("right");

      }

 

      //Dropdown Arrow

      $(arrow)

        .addClass("material-icons d-arrow")

        .html("keyboard_arrow_down")

        .appendTo(dHeading);

      //Dim Layer

      $(dimBackground).addClass("dim-overlay").appendTo("body");

      //Dropdowns

      $(dHeading).click(function () {

        $(this).parent().find("ul").slideToggle(setting.jSideTransition);

        $(this).find(".d-arrow").toggleClass("d-down");

      });

 

      $(menuTrigger).click(function () {

        $(jSide).toggleClass("open");

        $(dimBackground).show(setting.jSideTransition);

        $(".menu-body").removeClass("visibility");

      });

 

      //close menu if user click outside of it

      $(window).click(function (e) {

        if ($(e.target).closest(".menu-trigger").length) {

          return;

        }

        if ($(e.target).closest(jSide).length) {

          return;

        }

 

        $(jSide).removeClass("open");

        if (!$(jSide).hasClass("open")) {

          $(dimBackground).hide(setting.jSideTransition);

        }

        $(".menu-body").addClass("visibility");

      });

    });

  };

})(jQuery);

 

 

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me