« Полноэкранное CSS меню »

Описание материала:

Представляем вам полноэкранное меню. Оно состоит из CSS стилей, HTML кода и JS. На скриншоте видно как оно выглядит в свернутом виде, но если нажать на так сказать кнопку в центре, то оно красиво развернется и в центре экрана появится долгожданное меню. В нашем случае оно состоит из четырех категорий, но вы можете добавить в коде HTML. Меню в темных тонах, если вы захотите его изменить под свой сайт, то в CSS стилях, это легко сделать, конечно если вы понимаете что, где менять.

HTML код:

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="app-root">
<nav>
<div class="brand">uFive.Ru</div>
<div class="burger-btn cursor">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#f3be81" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
</div>
</nav>

<div class="menu">
<div class="menu-links">Главная</div>
<div class="menu-links">Форум</div>
<div class="menu-links">Материалы</div>
<div class="menu-links">Контакты</div>
</div>
</div>


CSS код:
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
:root,
:host,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.5px;
  text-rendering: geometricPrecision;
  color: #222;
  overflow: hidden;
}

.cursor {
  cursor: pointer;
}

.app-root {
  width: 100vw;
  height: 100vh;
  background: #fff;
}

nav {
  width: 100%;
  height: 50px;
  display: grid;
  background: #393939;
  display:flex;

.burger-btn{
svg{
  margin:auto;
  }
  display:grid;
  place-content:ceenter;
  height: 50px;
  width: 50px;
  position: fixed;
  right: 0;
  left: 0;
  margin:auto;
  }
   
.brand{
  color:#f3be81;
  align-self:center;
  font-size:18px;
  margin-left:1rem;
  }
}
.menu {
  background: #393939;
  display: grid;
  place-content: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  color: #f3be81;
  text-align: center;
  overflow: hidden;
  clip-path: circle(30px at 50% -15px);
  transition: all 0.4s;

&-links {
  margin-top: 1rem;
  }
}

.open {
  transition: all 0.4s;
  clip-path: circle(70.7% at 50% 50%);
}

a
{
color: #eee;
text-decoration: none;
}


JS код:
Код
$('.burger-btn').click(function() {
  $('.menu').toggleClass('open');
});

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Меню и навигация | Просмотров: 379
Теги к материалу: МЕНЮ, полноэкранное, css
Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
Войдите:
avatar