<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Меню</title>
</head>
<body>
<nav class="b-topnav">
<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
<ul class="b-topmenu__list js-topmenu__list">
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 1</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item active">
<a href="" class="topmenu__link">Пункт меню 2</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 3</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 4</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 5</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
</ul>
</nav>
<div class="same-block">
<code>
Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
</code>
</div>
<style>
*{
margin:0;
padding: 0;
line-height: 1;
}
li {
list-style-type: none;
}
html{
font-size: 16px;
font-family: Arial, sans-serif;
}
.same-block{
background-color: lightblue;
height: 500px;
padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
width: 34px;
height: 34px;
margin: 3px;
background: none;
border: solid 1px #666;
padding: 4px;
border-radius: 3px;
cursor: pointer;
outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
content: "";
position: absolute;
left: 0;
top: -9px;
}
.menu-toggle__line:after {
top: 9px;
}
.menu-toggle__line {
position: relative;
display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
width: 100%;
height: 2px;
background-color: #333;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
.b-topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 99999999;
overflow-y: auto;
box-shadow: 0 1px 3px rgba(100,100,100,0.9);
max-height: 400px;
max-height: 90vh;
}
.b-topmenu__list {
margin: 0 0 0.5em 3px;
max-height: 0;
overflow:hidden;
transition: max-height ease-out .3s;
}
.b-topmenu__list.on {
max-height: 1000px;
}
.topmenu__item {
display: block;
padding: 0.5em 0;
}
.topmenu__link {
color: #333;
text-transform: uppercase;
}
/* level 2 */
.topmenu__sublist{
margin: 0.5em 0 0.5em 1em;
}
.topmenu__sublink {
color: #333;
}
.topmenu__item.active .topmenu__link,
.topmenu__link:hover,
.topmenu__subitem.active .topmenu__sublink,
.topmenu__sublink:hover {
color: #007eff;
}
}
@media (min-width: 768px){
.b-menu-toggle {
display: none;
}
.b-topnav {
position: relative;
top: 0;
left: 0;
right: 0;
background-color: #007eff;
z-index: 0;
overflow-y: initial;
box-shadow: none;
max-height: none;
margin-bottom: 20px;
}
.b-topmenu__list {
margin-left: 0;
display: table;
width: 100%;
background-color: #007eff;
overflow: visible;
}
.topmenu__item {
display: table-cell;
padding: 0.5em 0;
text-align: left;
position: relative;
}
.topmenu__link{
padding: 0 1em;
color: #fff;
}
.topmenu__link:hover,
.topmenu__item.active .topmenu__link{
color: #333;
}
/*level 2 */
.topmenu__sublist{
margin:0;
display: none;
background-color: #007eff;
}
.topmenu__item:hover>.topmenu__sublist,
.topmenu__item>.topmenu__sublist:hover {
display: block;
position: absolute;
top:25px;
left:0;
right: 0;
}
.topmenu__subitem {
display: block;
padding: 0.5em 1em;
text-align: left;
}
.topmenu__sublink {
color: #fff;
line-height: 1.3;
}
.topmenu__subitem.active>.topmenu__sublink,
.topmenu__subitem:hover>.topmenu__sublink {
color: #333;
}
}
/* /NAVBAR */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
/*Мобильное меню*/
$(".js-menu-toggle").on('click', function() {
$(this).toggleClass('on');
$(".js-topmenu__list").toggleClass('on');
return false;
});
</script>
</body>
</html>
Я более менее уверенно знаю CSS и HTMLуверяю тебя, ты не знаешь и 1%.
JS/PHP/Bootstrap/CMSу тебя в голове каша
$('.nav-item-1').on('click', function() {
$('html,body').animate({scrollTop:$('.reviews').offset().top+"px"},{duration:1E3});
});
