Chia sẻ code menu của trang web homedy.com

Nếu bạn đang tìm kiếm thanh menu có thiết kế đẹp chuyên nghiệp reponsive, sub menu, tương tự như trang web chuyên đăng tin về bất động sản www.homedy.com thì đây là bài viết dành cho bạn. Code này mình sao chép hầu như nguyên mẫu nhưng có lược bỏ một vài chỗ và sử dụng jquery thay thế.

Một vài hình ảnh

Giao diện menu kích thước màn hình 1024px trở lên

Giao diện trên Mobile

Giao diện sub menu trên desktop

Giao diện sub menu trên Mobile

Dưới đây là code của thanh menu

1. Code HTML

Copy

<div class='header fixed'>

  <div class='left'>

    <!-- Chỉ sử dụng cho Mobile -->

    <div class='ic-menu-bar'>

      <div class='bar1'/>

      <div class='bar2'/>

      <div class='bar3'/>

    </div>

    <a href='/' title='Việt Blogger Demo'>

    <img alt='Việt Blogger Demo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikD0P2b_NZ0LN74A6Ee-OAiUKasj62jI-E3426hgIyeyp6x_AePZLC70Lvay4uuVRAFFGjqc5N34NvyKX4rSrZjaqGeuH1TMJ92IVOKSx4B4Fe_NutWReMi7i_0YWDI3sEOh7yil3-3U3j/s1600/logo.png' width='166'/>

    </a>

  </div>

  <div class='center' id='menu-bar'>

    <!-- Chỉ sử dụng cho Mobile -->

    <button aria-label='Đăng tin' class='btn-blue post-product' role='product' type='button'>Đăng tin</button>

    <nav itemscope='' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

      <!-- Sử dụng cho Desktop/Mobile -->

      <ul class='menu-bar' id='menu'>

        <li>

          <div class='login-mobile'>

            <a href='#' title='Đăng ký'>Đăng ký</a>

            <a href='#' title='Đăng nhập'>Đăng nhập</a>

          </div>

        </li>

        <li itemprop='name'>

          <a class='url-project' href='#' itemprop='url' title='Dự án bất động sản, dự án nhà đất'>Dự án</a>

          <ul class='parent-menu'>

            <li class='parent-item'><a href='#' title='Dự án căn hộ'>Căn hộ</a></li>

            <li class='parent-item'><a href='#' title='Dự án nhà mặt phố, shophouse'>Nhà mặt phố, shophouse</a></li>

            <li class='parent-item'><a href='#' title='Dự án nhà biệt thự liền kề'>Nhà biệt thự liền kề</a></li>

            <li class='parent-item'><a href='#' title='Dự án đất'>Đất</a></li>

            <li class='parent-item'><a href='#' title='Dự án văn phòng'>Văn phòng</a></li>

            <li class='parent-item'><a href='#' title='Dự án bất động sản khác'>Bất động sản khác</a></li>

          </ul>

          <button class='accordion' onclick='arrow_animate(this)'/> <!-- Chỉ sử dung cho Mobile -->

        </li>

        <li itemprop='name'>

          <a class='url-sell' href='#' title='Mua bán nhà đất - bất động sản'>Mua bán</a>

          <ul class='parent-menu'>

            <li class='parent-item'>

              <a href='#' title='Bán căn hộ'>Căn hộ <span class='arrow-left'/> </a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Bán căn hộ giá rẻ'>Căn hộ giá rẻ</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ mini'>Căn hộ mini</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ trung cấp'>Căn hộ trung cấp</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ cao cấp'>Căn hộ cao cấp</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Penthouse'>Căn hộ Penthouse</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Duplex'>Căn hộ Duplex</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Skyvilla'>Căn hộ Skyvilla</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Loft-house'>Căn hộ Loft-house</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Studio'>Căn hộ Studio</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Condotel'>Căn hộ Condotel</a></li>

                <li class='menu-item'><a href='#' title='Bán căn hộ Officetel'>Căn hộ Officetel</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button class='accordion' onclick='arrow_animate(this)'/>

            </li>

            <li class='parent-item'><a href='#' title='Bán nhà riêng'>Nhà riêng</a></li>

            <li class='parent-item'>

              <a href='#' title='Bán nhà mặt phố, shophouse'>Nhà mặt phố, shophouse <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Bán bán nhà mặt phố'>Nhà mặt phố</a></li>

                <li class='menu-item'><a href='#' title='Bán nhà phố thương mại (Shophouse)'>Nhà phố thương mại (Shophouse) </a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button class='accordion ' onclick='arrow_animate(this)'/>

            </li>

            <li class='parent-item'>

              <a href='#' title='Bán nhà biệt thự, liền kề'>Nhà biệt thự, liền kề <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Bán nhà liền kề'>Nhà liền kề</a></li>

                <li class='menu-item'><a href='#' title='Bán biệt thự'>Biệt thự</a></li>

                <li class='menu-item'><a href='#' title='Bán biệt thự nghỉ dưỡng'>Biệt thự nghỉ dưỡng</a></li>

                <li class='menu-item'><a href='#' title='Bán biệt thự đơn lập'>Biệt thự đơn lập</a></li>

                <li class='menu-item'><a href='#' title='Bán biệt thự song lập'>Biệt thự song lập</a></li>

                <li class='menu-item'><a href='#' title='Bán biệt thự tứ lập'>Biệt thự tứ lập</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button class='accordion ' onclick='arrow_animate(this)'/>

            </li>

            <li class='parent-item'>

              <a href='/ban-dat' title='Bán đất?src=mega_menu'>Đất <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Bán đất nền dự án'>Đất nền dự án</a></li>

                <li class='menu-item'><a href='#' title='Bán đất nền thổ cư'>Đất nền thổ cư</a></li>

                <li class='menu-item'><a href='#' title='Bán đất du lịch, nghỉ dưỡng'>Đất du lịch, nghỉ dưỡng</a></li>

                <li class='menu-item'><a href='#' title='Bán đất công nghiệp'>Đất công nghiệp</a></li>

                <li class='menu-item'><a href='#' title='Bán đất nông, lâm nghiệp'>Đất nông, lâm nghiệp</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button class='accordion ' onclick='arrow_animate(this)'/>

            </li>

            <li class='parent-item'>

              <a href='#' title='Bán bất động sản khác'>Bất động sản khác <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Bán mặt bằng bán lẻ'>Mặt bằng bán lẻ</a></li>

                <li class='menu-item'><a href='#' title='Bán nhà xưởng, kho bãi'>Nhà xưởng, kho bãi</a></li>

                <li class='menu-item'><a href='#' title='Bán mặt bằng văn phòng'>Mặt bằng văn phòng</a></li>

                <li class='menu-item'><a href='#' title='Bán khách sạn'>Khách sạn</a></li>

                <li class='menu-item'><a href='#' title='Bán nhà trọ, phòng trọ'>Nhà trọ, phòng trọ</a></li>

                <li class='menu-item'><a href='#' title='Bán trang trại'>Trang trại</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button class='accordion ' onclick='arrow_animate(this)'/>

            </li>

          </ul>

          <button class='accordion' onclick='arrow_animate(this)'/> <!-- Chỉ sử dung cho Mobile -->

        </li>

        <li itemprop='name'>

          <a class='url-lease' href='#' itemprop='url' title='Cho thuê nhà đất - bất động sản'>Cho thuê</a>

          <ul class='parent-menu'>

            <li class='parent-item'>

              <a href='#' title='Cho thuê căn hộ'>Căn hộ <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ giá rẻ'>Căn hộ giá rẻ</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ mini'>Căn hộ mini</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ trung cấp'>Căn hộ trung cấp</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ cao cấp'>Căn hộ cao cấp</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Penthouse'>Căn hộ Penthouse</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Duplex'>Căn hộ Duplex</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Skyvilla'>Căn hộ Skyvilla</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Loft-house'>Căn hộ Loft-house</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Studio'>Căn hộ Studio</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê căn hộ Condotel'>Căn hộ Condotel</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

            </li>

            <li class='parent-item'><a href='#' title='Cho thuê căn hộ dịch vụ'>Căn hộ dịch vụ</a></li>

            <li class='parent-item'><a href='#' title='Cho thuê nhà riêng'>Nhà riêng</a></li>

            <li class='parent-item'>

              <a href='#' title='Cho thuê nhà mặt phố, shophouse'>Nhà mặt phố, shophouse <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Cho thuê nhà mặt phố'>Nhà mặt phố</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê nhà phố thương mại (Shophouse)'>Nhà phố thương mại (Shophouse)</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

            </li>

            <li class='parent-item'>

              <a href='#' title='Cho thuê nhà'>Nhà biệt thự, liền kề <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Cho thuê nhà liền kề'>Nhà liền kề</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê biệt thự'>Biệt thự</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê biệt thự nghỉ dưỡng'>Biệt thự nghỉ dưỡng</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê biệt thự đơn lập'>Biệt thự đơn lập</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê biệt thự song lập'>Biệt thự song lập</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê biệt thự tứ lập'>Biệt thự tứ lập</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

            </li>

            <li class='parent-item'><a href='#' title='Cho thuê nhà trọ, phòng trọ'>Nhà trọ, phòng trọ</a></li>

            <li class='parent-item'>

              <a href='#' title='Cho thuê văn phòng'>Văn phòng <span class='arrow-left'/></a>

              <ul class='sub-menu'>

                <li class='menu-item'><a href='#' title='Cho thuê mặt bằng văn phòng'>Mặt bằng văn phòng</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê Căn hộ Officetel'>Căn hộ Officetel</a></li>

                <li class='menu-item'><a href='#' title='Cho thuê Co-working space'>Co-working space</a></li>

              </ul>

              <!-- Chỉ sử dung cho Mobile -->

              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

            </li>

            <li class='parent-item'><a href='#' title='Cho thuê cửa hàng, mặt bằng bán lẻ'>Cửa hàng, mặt bằng bán lẻ</a></li>

            <li class='parent-item'><a href='#' title='Cho thuê đất, nhà xưởng, kho bãi'>Đất, nhà xưởng, kho bãi</a></li>

            <li class='parent-item'><a href='#' title='Cho thuê bất động sản khác'>Bất động sản khác</a></li>

          </ul>

          <!-- Chỉ sử dung cho Mobile -->

          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

        </li>

        <li itemprop='name'><a class='url-myhomedy' href='#' itemprop='url' rel='nofollow' target='_blank' title='Thiết kế nhà đẹp'>Thiết kế nhà đẹp</a></li>

        <li itemprop='name'><a class='url-tinh-lai' href='#' itemprop='url' title='Tính lãi suất vay'>Tính lãi suất vay</a></li>

        <li itemprop='name'>

          <a class='url-agency url-company' href='javascript:void(0)' itemprop='url' title='Danh bạ'>Danh bạ</a>

          <ul class='parent-menu'>

            <li class='parent-item'><a href='#' itemprop='url' title='Danh sách nhà môi giới bất động sản'>Môi giới</a></li>

            <li class='parent-item'><a href='#' itemprop='url' title='Danh sách công ty bất động sản'>Doanh nghiệp</a></li>

          </ul>

          <!-- Chỉ sử dung cho Mobile -->

          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

        </li>

        <li itemprop='name'>

          <a class='url-news' href='#' itemprop='url' title='Tin tức'>Tin tức</a>

          <ul class='parent-menu'>

            <li class='parent-item'><a href='#' title='Thị trường'>Thị trường</a></li>

            <li class='parent-item'><a href='#' title='Review Bất động sản'>Review Bất động sản</a></li>

            <li class='parent-item'><a href='#' title='Hướng dẫn mua nhà'>Hướng dẫn mua nhà</a></li>

            <li class='parent-item'><a href='#' title='Hướng dẫn thuê nhà'>Hướng dẫn thuê nhà</a></li>

            <li class='parent-item'><a href='#' title='Dành cho môi giới'>Dành cho môi giới</a></li>

            <li class='parent-item'><a href='#' title='Nhà hạnh phúc'>Nhà hạnh phúc</a></li>

          </ul>

          <!-- Chỉ sử dung cho Mobile -->

          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button'/>

        </li>

      </ul>

    </nav>

    <!-- Chỉ sử dụng cho Mobile -->

    <div class='box-bottom'>

      <a class='ic ic-facebook' href='#' title='Facebook'/>

      <a class='ic ic-youtube' href='#' title='Youtube'/>

      <a class='ic ic-call' href='#' title='Call'/>

      <a class='ic ic-email' href='#' title='Email'/>

    </div>

  </div>

  <div class='right'>

    <div class='not-logged-in'>

      <a href='#' title='Đăng ký'>Đăng ký</a>

      <span>/</span>

      <a href='#' title='Đăng nhập'>Đăng nhập</a>

    </div>

    <a class='btn-white' href='#' title='Đăng tin mới'>Đăng tin</a>

  </div>

</div>

2. Code CSS

Copy

body {

    padding-top: 50px;

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

    font-size: 13px;

    font-weight: normal;

}

.header.fixed {

    position: fixed;

    top: 0;

    z-index: 1001;

    border-bottom: 1px solid #ebebeb;

}

.header {

    width: 100%;

    height: 50px;

}

.header .left {

    width: 20%;

    background: #fff;

    float: left;

    height: 100%;

    border-bottom: 1px solid #ebebeb;

}

.header .left .ic-menu-bar {

    float: left;

    margin: 8px 16px;

    display: none;

}

.header .left .bar1, .header .left .bar2, .header .left .bar3 {

    width: 25px;

    height: 3px;

    background-color: #333;

    margin: 6px 0;

    transition: .4s;

}

.header .left .change .bar1 {

    -webkit-transform: rotate(-45deg) translate(-6px,6px);

    transform: rotate(-45deg) translate(-6px,6px);

}

.header .left .change .bar2 {

    opacity: 0;

}

.header .left .change .bar3 {

    -webkit-transform: rotate(45deg) translate(-7px,-7px);

    transform: rotate(45deg) translate(-7px,-7px);

}

.header .left img {

    max-width: 100%;

    height: auto;

    margin-top: 4px;

    margin-left: 16px;

}

.header .center {

    width: 55%;

    background: #fff;

    float: left;

    height: 100%;

    border-bottom: 1px solid #ebebeb;

}

.btn-blue {

    text-transform: uppercase;

    padding: 10px 32px;

    border-radius: 4px;

    color: #fff;

    background: #0098da;

    display: inline-block;

    border: none;

    display: none;

}

#menu-bar ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    position: absolute;

}

.center .menu-bar {

    list-style: none;

    margin: 0;

}

#menu-bar li {

    float: left;

    margin-right: 1px;

}

.accordion, .header .center .login-mobile, .header .center .box-bottom {

    display: none;

}

#menu-bar li a {

    display: block;

}

.center .menu-bar li a {

    float: left;

    padding: 16px;

    font-size: 14px;

    color: #27406d;

    text-transform: uppercase;

}

#menu-bar li ul {

    display: none;

    background-color: #fff;

    position: absolute;

    top: 49px;

    border-radius: 4px;

    z-index: 2;

    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);

    max-width: 220px;

}

#menu-bar li ul.parent-menu::after {

	content:'';

	position:absolute;

	top:0;

	left:25%;

	width:0;

	height:0;

	border:6px solid transparent;

	border-bottom-color:#c8c8c8;

	border-top:0;

	margin-left:-6px;

	margin-top:-6px;

}

#menu-bar li ul.parent-menu::before {

	content:'';

	position:absolute;

	top:0;

	left:25%;

	width:0;

	height:0;

	border:5px solid transparent;

	border-bottom-color:#fff;

	border-top:0;

	margin-left:-5px;

	margin-top:-5px;

	z-index:1;

}

#menu-bar li:nth-child(2) ul.parent-menu::before, #menu-bar li:nth-child(2) ul.parent-menu::after {

	left:16%;

}

#menu-bar li ul li {

	display:block;

	float:none;

}

#menu-bar li ul li a {

	width:100%;

	white-space:nowrap;

	padding:10px;

	float:none;

	position:relative;

}

#menu-bar li ul li a:hover {

	background:#f5f5f5;

	color:#4c98da;

}

#menu-bar li a.active {

	color:#4c98da;

	font-weight:500;

}

#menu-bar ul li a:hover+.parent-menu, #menu-bar .parent-menu:hover {

	display:block;

}

.menu-bar .parent-menu .sub-menu {

	position:absolute;

	max-width:unset !important;

	left:100%;

	background:#f5f5f5 !important;

	top:auto !important;

	margin-top:-38px !important;

	overflow:hidden;

}

.menu-bar .parent-menu .sub-menu .menu-item a {

	border-bottom:1px solid #e8e8e8;

}

.menu-bar .parent-menu .parent-item {

	display:inline-block !important;

	width:100%;

	padding:0;

	margin:0;

	border-bottom:1px solid #e8e8e8;

}

.menu-bar .parent-menu .parent-item .arrow-left {

	position:absolute;

	top:12px;

	right:4px;

	width:20px;

	height:20px;

	background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqdPz_TyMiRa2gWkhkwlpXyLZ6ROLSejRkOdGQPIFEaiZbQv5v-RUOsV30A-BKgspCV36QTAany5CL86QhtcQmnNCaE0KhL2hyDqlQUksOYg0QGW-bbql4k0PtGNrrQsBaTP9NaQv_ySR/s1600/icon-desktop.png) no-repeat center;

	background-position:-35px -51px;

	background-size:601%;

	opacity:.6;

}

.menu-bar .parent-menu .parent-item a:hover+.sub-menu, .sub-menu:hover {

	display:block !important;

}

.accordion, .header .center .login-mobile {

	display:none;

}

.header .right {

    width: 25%;

    background: #fff;

    display: inline-block;

    height: 100%;

    text-align: right;

    border-bottom: 1px solid #ebebeb;

}

.right .not-logged-in {

    text-align: right;

    padding: 16px 0;

    display: inline-block;

    margin-right: 8px;

}

.right .not-logged-in a {

    color: #27406d;

}

.right .btn-white {

    margin-top: 8px;

    margin-right: 16px;

}

.btn-white {

    border: 1px solid rgba(39,64,109,.22);

    border-radius: 5px;

    font-size: 15px;

    color: #27406d;

    font-weight: 600;

    text-transform: uppercase;

    padding: 5px 24px;

    display: inline-block;

}

@media (max-width: 1024px) {

    .header .center {

        width: 80%;

    }

    .header .right {

        display: none;

    }

}

@media (max-width: 960px) {

    .header.fixed {

        text-align:center;

        width:100%;

    }

    .header .left {

        width: 100%;

    }

    .header .left .ic-menu-bar {

        display: block;

        position: absolute;

        z-index: 9999;

    }

    .header .center {

        position: fixed;

        height: 100%;

        background: #fff;

        width: 284px;

        top: 0;

        left: -284px;

        z-index: 1;

        transition: .5s;

        padding-top: 50px;

        border-right: 1px solid #e8e8e8;

    }

    .header .center.open {

        left: 0;

    }

    .header .center .post-product {

        display: block !important;

        position: absolute;

        top: 8px;

        right: 8px;

        padding: 8px 16px;

    }

    #menu-bar nav {

        position: unset;

        overflow: auto;

        height: calc(100% - 50px);

        position: relative;

    }

    #menu-bar ul {

        position: unset;

        overflow: auto;

        position: relative;

        height: auto;

    }

    #menu-bar li {

        width: 99% !important;

        float: none !important;

        display: inline-block !important;

        text-align: left;

        border-top: 1px solid #e8e8e8;

        position: relative;

    }

    .menu-bar .parent-menu .sub-menu {

        position: unset !important;

        max-height: 0;

        margin-top: unset !important;

        background: #e8e8e8 !important;

    }

    #menu-bar li ul.parent-menu::before, #menu-bar li ul.parent-menu:after {

        content: unset;

    }

    .menu-bar .parent-menu .parent-item .arrow-left {

        display: none !important;

    }

    .header .center .login-mobile {

        display: block;

        border-top: 1px solid #ebebeb;

    }

    .header .center .login-mobile a {

        padding: 16px 0;

        display: inline-block !important;

        width: 49% !important;

        text-transform: uppercase;

        text-align: center;

    }

    .header .center .login-mobile a:first-child {

        border-right: 1px solid #ebebeb;

    }

    #menu-bar li a {

        width: calc(100% - 64px);

    }

    #menu-bar li ul {

        display: block;

        transition: max-height .2s ease-out;

        position: unset;

        max-height: 0;

        overflow: hidden;

        background: #f5f5f5;

        border-radius: 0;

        border: none;

        width: 100%;

        margin-bottom: -3px;

        max-width: unset;

        box-shadow: none;

    }

    .menu-bar .parent-menu .parent-item {

        border-bottom: none;

    }

    #menu-bar li ul.parent-menu li a {

        color: #54657e;

    }

    #menu-bar li ul li a {

        border: unset;

    }

    .accordion {

        display: block;

        border: none;

        background: #fff;

        color: #8493a8;

        font-size: 22px;

        position: absolute;

        right: 6px;

        top: 4px;

        margin-top: 12px;

        width: 22px;

        height: 22px;

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqdPz_TyMiRa2gWkhkwlpXyLZ6ROLSejRkOdGQPIFEaiZbQv5v-RUOsV30A-BKgspCV36QTAany5CL86QhtcQmnNCaE0KhL2hyDqlQUksOYg0QGW-bbql4k0PtGNrrQsBaTP9NaQv_ySR/s1600/icon-desktop.png);

        background-position: -294px -95px;

        opacity: .5;

        outline: none;

    }

    .accordion.animate {

        -webkit-transform: rotate(-90deg);

        transform: rotate(90deg);

        transition: .5s;

    }

    .header .center .box-bottom {

        display: block !important;

        position: absolute;

        height: 50px;

        z-index: 2;

        bottom: 0;

        left: 0;

        width: 100%;

        background: #fff;

    }

    .header .center .box-bottom .ic {

        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQr1sL_LnToezgYiP00op2Y_W6AM51IrtJorak7uqlejMfRfRnAs2j8g1brU1AU4DGMmN8IhE4mk7Ro2timsCOVPjc9Xoku5Ld3U1EXYzZ06PcxshZb232xhKso0-EwGc5laEY3D55F7rA/s1600/ic-orther-menu.png) no-repeat;

        width: 24px;

        height: 24px;

        float: left;

        margin-left: 12px;

        margin-top: 12px;

    }

    .header .center .box-bottom .ic.ic-facebook {

        background-position-x: -2px;

    }

    .header .center .box-bottom .ic.ic-youtube {

        background-position-x: -42px;

    }

    .header .center .box-bottom .ic.ic-call {

        background-position-x: -82px;

    }

    .header .center .box-bottom .ic.ic-email {

        background-position-x: -119px;

    }

}

@media (max-width: 414px) {

    .header .center {

        width:100%;

        left:-100%;

    }

}

3. Code script chèn trước </body>

Copy

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

<script>//<![CDATA[

$('.header .left .ic-menu-bar').click(function(e) {

  e.stopPropagation()

  $(this).toggleClass('change')

  $('.header .center').toggleClass('open')

})

$('#menu-bar nav').click(function(e) {

  e.stopPropagation()

})

$('html').click(function() {

  $('.header .center').removeClass('open')

})

var self = this;

self.arrow_animate = function(e) {

  e.classList.toggle("animate");

  var panel = e.previousElementSibling;

  panel.style.maxHeight = panel.style.maxHeight ? null : "unset"

}

//]]></script>

Xem demo tại: https://demo.vietblogdao.com

Nội dung chính