Разработка - Мобильная панель навигации | Все для вебмастера

Пишем разметку:

HTML:

<div id="smartphone">
  <div id="content">
    <div class="page page_active" id="page1">
      <h3>An awesome design !</h3>
      <p>This is the first page.</p>
    </div>
    <div class="page" id="page2">
      <h3>Brillant ideas</h3>
      <p>This is the second page.</p>
    </div>
    <div class="page" id="page3">
      <h3>This challenge is cool</h3>
      <p>This is the third page.</p>
    </div>
    <div class="page" id="page4">
      <h3>Visit my website</h3>
      <p>This is the fourth page.</p>
    </div>
  </div>
 
  <div id="nav">
    <div id="circle"></div>
    <button class="button_icon button_icon_selected" onclick="select_page(0)"><i class="fas fa-home"></i></button>
    <button class="button_icon" onclick="select_page(1)"><i class="fas fa-bell" style="padding-left: 4px"></i></button>
    <button class="button_icon" onclick="select_page(2)"><i class="fas fa-comments"></i></button>
    <button class="button_icon" onclick="select_page(3)"><i class="fas fa-search"></i></button>
  </div>
</div>

Пишем стиль:

CSS:

*:focus {
  outline: none;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  background-color: #CCC;
  display: flex;
  align-items: center;
  justify-content: center;
}

#smartphone {
  position: relative;
  width: 300px;
  height: 500px;
  background-color: #FFF;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

@media (max-width: 500px) {
  #smartphone {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: 0;
  }
  #link_website {
    top: 20px;
    height: 20px;
  }
}

#content {
  position: relative;
  height: calc(100% - 60px);
  width: 100%;
}

#nav {
  position: relative;
  height: 60px;
  width: 100%;
  background-color: #EEE;
  display: flex;
  justify-content: center;
}

.button_icon {
  background: none;
  border: none;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.button_icon > i {
  font-size: 2em;
  color: #777;
}

.button_icon_selected > i {
  color: #000;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(100%, 0);
}

.page_active {
  display: flex;
  left: 0;
  transform: translate(0, 0);
}

#circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid #a18cd1;
  border-radius: 50%;
  transform: translate(-18%, 17%);
  transition: left .2s ease-in-out;
}

h3 {
  font-weight: 100;
  color: #333;
  font-size: 1.3em;
}

p {
  color: #555;
}

#link_website {
  position: absolute;
  display: inline;
  bottom: 10px;
  color: #333;
}

#page1 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
#page2 {
  background-image: linear-gradient(45deg, #a18cd1 0%, #fbc2eb 100%);
}
#page3 {
  background-image: linear-gradient(45deg, #fad0c4 0%, #ffd1ff 100%);
}
#page4 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.in_right {
  animation: in_right_anim .2s ease-in-out;
}

.in_left {
  animation: in_left_anim .2s ease-in-out;
}
.out_left {
  animation: out_left_anim .2s ease-in-out;
}
.out_right {
  animation: out_right_anim .2s ease-in-out;
}

@keyframes in_right_anim {
  from {
    transform: translate(100%, 0)
  }
  to {
    transform: translate(0, 0)
  }
}
@keyframes in_left_anim {
  from {
    transform: translate(-100%, 0)
  }
  to {
    transform: translate(0, 0)
  }
}
@keyframes out_left_anim {
  from {
    transform: translate(0, 0)
  }
  to {
    transform: translate(-100%, 0)
  }
}
@keyframes out_right_anim {
  from {
    transform: translate(0, 0)
  }
  to {
    transform: translate(100%, 0)
  }
}

Пишем jquery:

JavaScript:

var tabs_buttons = document.querySelectorAll(".button_icon")
var pages = document.querySelectorAll(".page")
var circle = document.querySelector("#circle")

var current = 0

set_circle_position(current)

function select_page(n)
{
  for (var i = 0; i < tabs_buttons.length; i++)
  {
    pages[i].classList.remove('out_left')
    pages[i].classList.remove('in_left')
    pages[i].classList.remove('out_right')
    pages[i].classList.remove('in_right')
    if (i == n)
    {
      tabs_buttons[i].classList.add('button_icon_selected')
      pages[i].classList.add('page_active')
    } else
    {
      tabs_buttons[i].classList.remove('button_icon_selected')
      pages[i].classList.remove('page_active')
    }
  }
  set_circle_position(n)
 
  if (n > current)
  {
    pages[current].classList.add('out_left')
    pages[n].classList.add('in_right')
  }
  if (n < current)
  {
    pages[current].classList.add('out_right')
    pages[n].classList.add('in_left')
  }
  current = n
}

function set_circle_position(n)
{
  var left = tabs_buttons[n].querySelector("i").getBoundingClientRect().left - document.querySelector("#nav").getBoundingClientRect().left
  circle.style.left = left + "px"
}

window.onresize = function()
{
  set_circle_position(current)
}

Смотрим наш результат:

Разработка Мобильная панель навигации

Ещё ресурсы от baltun