Blog
Select Page

Mobile responsive header menu with infinite list items – layout

Misc

The following layout is built with HTML, CSS, jQuery, Bootstrap (included), Font awesome 5. You can also see a loading gif icon being loaded every time the page reloads.

Demo

Open demo in a full window – https://demos.webdevpuneet.com/layouts/responsive-menu-layout/index.html

HTML

<!doctype html>
<html lang="en">
  <head>
    <title>Mobile responsive website template</title>
    <link rel="canonical" href="https://demos.webdevpuneet.com/layouts/responsive-menu-layout/index.html" />

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="robots" content="INDEX,FOLLOW"/>
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <meta name="author" content="" />
    <meta name="copyright" content="" />

    <!-- Icons -->
    <link rel="icon" href="./assets/img/logo-32.png" sizes="32x32" />
    <link rel="icon" href="./assets/img/logo-192.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="./assets/img/logo-180.png" />
    <meta name="msapplication-TileImage" content="./assets/img/logo-240.png" />

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" type="text/css">

    <!-- Font Icons - FontAwesome 5 -->
    <script src="https://kit.fontawesome.com/6da6ad616d.js" crossorigin="anonymous"></script>

    <!-- Styles -->
    <link rel="stylesheet" href="./assets/vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css?v=3">
    <link rel="stylesheet" href="./assets/css/home.css">

  </head>
  <body>

    <header class="header">
      <div class="container-fluid">
        <div class="header__menu-btn" href="javascript:;"><i class="fas fa-bars"></i></div>

        <div class="header__location">
          Delivering to

          <select id="resizing_select" class="resizeselect">
            <option selected>Address one</option>
            <option>Address two</option>
            <option>This is a Long Address for testing purpose</option>
            <option>Add Address</option>
          </select>

          <select id="width_tmp_select"><option id="width_tmp_option"></option></select><!-- For select size -->

        </div><!-- /.location-bar -->

        <!--<a class="header__chat-btn" href=""><i class="fab fa-facebook-messenger" aria-hidden="true"></i> <span class="d-none d-sm-inline-block">LIVE CHAT</span></a>-->
      </div>
    </header><!-- .header -->

    <div class="article-link" style="margin-bottom:20px;text-align:center;">
      <a href="https://webdevpuneet.com/mobile-responsive-header-menu-with-infinite-list-items-layout/" style="display: inline-block; color:blue:!important;text-decoration: none;border:1px solid blue;color:blue;line-height:1;border-radius:25px;font-size:14px;padding:5px 20px;display:inline-block;text-transform:uppercase;">View Source Code & Article</a>
    </div>

    <aside class="header-menu">
      <div class="header-menu__top">
        <div class="header-menu__close"><i class="fas fa-times"></i></div>

        <img class="header-menu__brand" src="./assets/img/logo-blue.png">
      </div>
      <div class="header-menu__body">
        <div class="header-menu__lists">
          <ul>
            <li class="active">
              <a href=""><i class="fas fa-home"></i> Home</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Log In</a>
            </li>
            <li>
              <a href=""><i class="fas fa-sign-in-alt"></i> Sign Up</a>
            </li>
            <li>
              <a href=""><i class="fas fa-life-ring"></i> Help</a>
            </li>
          </ul>

          <ul>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 1</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 2</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 3</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 4</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 5</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 6</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 7</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 8</a>
            </li>
          </ul>

          <ul>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 9</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 10</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 11</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 12</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 13</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 14</a>
            </li>
            <li>
              <a href=""><i class="fas fa-user"></i> Link 15</a>
            </li>
          </ul>
      </div>
    </aside><!-- /.header-menu -->
    <div class="header-menu-bg"></div> <!-- toggle header-menu on click -->

    <div class="body">



      <div class="container-fluid">
        <div class="menu-search">
          <div class="menu-search__wrapper">
            <input type="text" placeholder="Search - Restaurant Name/Cuisine"></input>
            <i class="fas fa-search"></i>
          </div>
        </div>

        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>

        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </div>
    </div><!-- .mainBody -->

    <footer class="footer">
      <div class="container-fluid">
        <h2>Footer</h2>
      </div>
    </footer>

    <!-- Scripts -->
    <script src="./assets/vendor/jquery/jquery-3.4.1.min.js"></script>
    <script src="./assets/vendor/popper/popper.min.js"></script>
    <script src="./assets/vendor/bootstrap/bootstrap.min.js"></script>
    <script src="./assets/js/common.js?v=5"></script>
    <script src="./assets/js/home.js"></script>
  </body>
</html>

CSS

/* Styled by : Puneet Sharma @ webdevpuneet.com */
/* Variables */
/* Fonts */
/* Common Styles */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.3;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  color: #191919;
  padding-top: 50px; }

* {
  outline-color: #009fb3; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif; }

/* Text selection */
::-moz-selection {
  background: #009fb3;
  color: #ffffff; }

::selection {
  background: #009fb3;
  color: #ffffff; }

/* Scrollbar */
/* font-size */
/* Margins */
/* Paddings */
/* Media Queries Approach - Smaller to Bigger Screen Size */
/* Media Queries Approach - Bigger to Smaller Screen Size */
/* Animations */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    display: block; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0;
    display: block; }
  to {
    opacity: 1; } }
/* Header */
.header {
  background: #009fb3;
  color: #ffffff;
  min-height: 50px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2; }
  .header * {
    vertical-align: middle; }

.header__menu-btn {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  margin-top: 5px;
  cursor: pointer;
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out; }
  .header__menu-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25); }
  .header__menu-btn:active {
    background: rgba(255, 255, 255, 0.5); }
  .header__menu-btn i {
    font-size: 22px;
    margin-top: 10px; }

.header__brand {
  margin-top: 5px;
  display: inline-block;
  margin-left: 5px; }

/* header-menu */
.header-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 340px;
  max-width: 100%;
  background: #ffffff;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
          box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transition: opacity 225ms linear 0s, -webkit-transform 225ms ease-in-out 0s;
  transition: opacity 225ms linear 0s, -webkit-transform 225ms ease-in-out 0s;
  transition: transform 225ms ease-in-out 0s, opacity 225ms linear 0s;
  transition: transform 225ms ease-in-out 0s, opacity 225ms linear 0s, -webkit-transform 225ms ease-in-out 0s;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  overflow: hidden; }

.header-menu-bg {
  display: none; }

.header-menu__top {
  min-height: 50px;
  padding: 5px 15px;
  -webkit-box-shadow: 0 0 5px #cecece;
          box-shadow: 0 0 5px #cecece;
  position: relative;
  z-index: 1; }

.header-menu__brand {
  position: absolute;
  right: 10px;
  top: 7.5px;
  pointer-events: none; }

.header-menu__close {
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out; }
  .header-menu__close:hover {
    background: rgba(0, 0, 0, 0.15); }
  .header-menu__close:active {
    background: rgba(0, 0, 0, 0.25); }
  .header-menu__close i {
    font-size: 22px;
    margin-top: 10px; }

.header-menu__body {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  background: #f7f7f7; }
  .header-menu__body ul {
    background: #ffffff;
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin-bottom: 20px; }
    .header-menu__body ul li {
      border-bottom: 1px solid #d6d6d6; }
      .header-menu__body ul li i {
        margin-right: 15px;
        text-align: center;
        width: 15px; }
      .header-menu__body ul li a {
        padding: 15px 25px 0;
        color: #191919;
        display: block;
        min-height: 50px;
        line-height: 1; }
        .header-menu__body ul li a:hover {
          color: #191919;
          text-decoration: none;
          background: rgba(0, 0, 0, 0.03); }
      .header-menu__body ul li.active a {
        color: #009fb3; }
      .header-menu__body ul li:first-child {
        border-top: 1px solid #d6d6d6; }
    .header-menu__body ul:first-child li:first-child {
      border-top: 1px solid transparent; }

.header-menu--active {
  overflow: hidden; }
  .header-menu--active .header-menu {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .header-menu--active .header-menu-bg {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1; }

/* header__chat-btn */
.header__chat-btn {
  position: absolute;
  right: 15px;
  color: #ffffff;
  top: 15px;
  text-decoration: none; }
  .header__chat-btn i {
    font-size: 22px;
    margin-right: 3px; }
  .header__chat-btn:hover {
    color: #ffffff;
    text-decoration: none; }

/* header location */
.header__location {
  display: inline-block;
  margin-top: 8px;
  margin-left: 5px;
  font-size: 16px; }
  .header__location select {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    background: #009fb3 url("../img/icon-angle-down.png") no-repeat right center;
    border: none;
    color: #ffffff;
    padding: 0 20px 0 5px;
    cursor: pointer; }
  .header__location #width_tmp_select {
    display: none; }

@media (min-width: 1200px) {
  .header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
    margin-top: 0; } }
@media (max-width: 1199.98px) {
  .header .container-fluid {
    padding-right: 10px;
    padding-left: 10px; }

  .header-menu__top {
    padding: 5px 10px; } }
@media (max-width: 575.98px) {
  .header__location select {
    max-width: 240px; } }
@media (max-width: 400px) {
  .header__location select {
    max-width: 200px; } }
@media (max-width: 320px) {
  .header__location select {
    max-width: 130px; } }
/* Footer */
.footer .container-fluid {
  max-width: 1150px; }

/* Responsive Main Structure */
body {
  background: #f7f7f7; }

.body .container-fluid {
  max-width: 990px; }

/* loading */
.loading::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 111; }
.loading::after {
  content: '';
  width: 40px;
  height: 43px;
  background: url("../img/loading.gif");
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  z-index: 111; }

body.loading {
  position: relative; }
  body.loading::before {
    background: rgba(255, 255, 255, 0.75); }
  body.loading::after {
    position: fixed; }

/* Buttons */
/* Form */
/* Menu Search */
.menu-search {
  min-height: 40px;
  text-align: center;
  padding: 0 0;
  margin: 30px 0; }
  .menu-search input {
    display: inline-block; }

.menu-search__wrapper {
  width: 100%;
  position: relative;
  font-size: 16px; }
  .menu-search__wrapper i {
    position: absolute;
    left: 15px;
    top: 12px;
    font-size: 20px;
    color: #666666; }
  .menu-search__wrapper input {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-left: 20px;
    padding: 10px;
    background: transparent;
    padding-left: 40px;
    border: 1px solid #999999;
    border-radius: 25px;
    outline: none;
    height: 40px;
    -webkit-box-shadow: none;
            box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none; }
    .menu-search__wrapper input:focus {
      outline: none; }

/*
@media (min-width: 1200px) {
  .menu-search{
    position: fixed;
    z-index: 11;
    top: 0;
    right: 0px;
    width: 250px;
    border-bottom: 0;
  }

  .menu-search__wrapper{
    width: 100%;
    position: relative;
    font-size: 16px;
    background:#ffffff;
    border-radius: 25px;

    i{
      position: absolute;
      left: 15px;
      top: 12px;
      font-size: 20px;
    }

    input{
      border:0;
    }
  }

}
*/

JavaScript / jQuery

/* Common scripts */

/* Dom loading */
var body = $('body');


/* loading... */
$(document).ready(function(){
  body.addClass('loading');
});
$(window).on('load', function(){
  setInterval(function(){ body.removeClass('loading'); }, 1000);
});


/* Header menu */
$(document).ready(function(){
  var toggleHeaderMenu = $('.header__menu-btn, .header-menu__close, .header-menu-bg');

  toggleHeaderMenu.click(function(){
    body.toggleClass('header-menu--active');
  });
});



/* Resize select width according to selected text */
$(document).ready(function() {
  $("#width_tmp_option").html($('#resizing_select option:selected').text());
  $('#resizing_select').width($("#width_tmp_select").width());

  $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width());
  });
});

Download Layout

responsive-menu-layoutDownload