• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура HTML элемента » Простая навигация CSS в адаптивном стиле (Оригинальный стиль горизонтальной навигаций для сайта)
Простая навигация CSS в адаптивном стиле
Kosten
Дата: Суббота, 2020-05-23, 20:24 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


В статье представлена горизонтальное меню, которое выполнена с эффектами при наведение курсора. Где подключены шрифтовые кнопки, и сделано в горизонтальном виде. Что можно поставить под любую страницу, так как она адаптивна под мобильные аппараты, что на всех размерах экранах, эта навигация смотрится корректно.

Когда дело доходит до адаптивного дизайна, мы сталкиваемся с различными методами, позволяющими наилучшим образом изменить наши навигационные меню для небольших экранов. Все концепции меню в этой статье основаны на этой простой структуре HTML, которую я называю базовым меню . Атрибут роли используются для указания конкретной концепции, как полное горизонтальное меню.



HTML

Код
<div class="wrapper">

  <input type="checkbox" id="open_menu" class="open_menu">

  <label for="open_menu" class="burger"><i class="fa fa-bars"></i>Open Menu</label>

  <nav>

    <div class="menu_item">
      <a href="#design">
        <i class="fa fa-paint-brush"></i>
        <span>Design</span>
      </a>
    </div>

    <div class="menu_item">
      <a href="#code">
        <i class="fa fa-code"></i>
        <span>Coding</span>
      </a>
    </div>

    <div class="menu_item">
      <a href="#ecommerce">
        <i class="fa fa-credit-card"></i>
        <span>E-Commerce</span>
      </a>
    </div>

    <div class="menu_item">
      <a href="#marketing">
        <i class="fa fa-bullhorn"></i>
        <span>Marketing</span>
      </a>
    </div>

  </nav>

</div>

CSS

Код
.wrapper {
  max-width: 60rem;
  width: 100%;
  margin: 5rem auto;
  position: relative;
}
a {
  text-decoration: none;
}
nav {
  display: flex;
  justify-content: center;
  font-size: 1.2em;
}
nav .menu_item {
  height: 3em;
  line-height: 3em;
}
nav .menu_item:last-of-type a {
  border-right: 0;
}
nav .menu_item .fa {
  display: block;
  position: absolute;
  left: 0;
  background: #2980b9;
  height: 100%;
  line-height: inherit;
  width: 3em;
  text-align: center;
  transition: all 0.35s;
}
nav a {
  position: relative;
  display: block;
  padding-right: 2em;
  height: 100%;
  background: #3498db;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-right: 0.25em solid #fff;
}
nav a span {
  display: block;
  margin-left: 4.5em;
}
nav a::after {
  content: "";
  background: #2980b9;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  transition: all 0.35s;
}
.open_menu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.burger {
  display: none;
  font-size: 1.2em;
  position: relative;
  background: #3498db;
  color: #fff;
  width: 3em;
  height: 3em;
  overflow: hidden;
  text-align: center;
  margin-bottom: 0.25em;
  cursor: pointer;
  transition: background 0.35s;
}
.burger .fa {
  pointer-events: none;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3em;
}
@media (min-width: 55rem) {
  nav a:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.35s;
  }
  nav a:hover .fa {
    font-size: 1.25em;
    width: 3.6em;
    transition: all 0.35s;
  }
}
@media (max-width: 55rem) {
  nav a span {
    margin-left: 1em;
    width: 0;
    transition: margin-left 0.5s ease;
  }
  nav a:hover span {
    margin-left: 4.5em;
    width: auto;
    transition: margin-left 0.5s ease;
  }
}
@media (max-width: 30rem) {
  .burger {
    display: block;
  }
  .open_menu:checked + .burger {
    background: #2980b9;
    transition: background 0.35s;
  }
  .open_menu:checked + .burger + nav {
    right: 0;
    transition: all 0.35s;
  }
  nav {
    position: absolute;
    z-index: 99;
    width: 100%;
    right: 100%;
    flex-direction: column;
    transition: all 0.35s;
  }
  nav div {
    border-bottom: 0.25em solid #fff;
  }
  nav a {
    border-right: 0;
  }
  nav a span {
    margin-left: 4.5em;
    width: auto;
    transition: margin-left 0.5s ease;
  }
  nav a:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.35s;
  }
  nav a:hover .fa {
    font-size: 1.25em;
    width: 3.6em;
    transition: all 0.35s;
  }
}

Для маленьких экранов мы скрываем основное меню и показываем метку. Чтобы помочь пользователю распознать, что это меню, мы также добавляем псевдоэлемент, виде кнопок.

Демонстрация
Прикрепления: 8961305.png(11.2 Kb) · simple-css-navi.zip(4.4 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2020-05-29, 21:07 | Сообщение 2
Оффлайн
Администраторы
Сообщений:27204
Награды: 61


Адаптивная навигация по меню



HTML

Код
<nav>
<ul>
    <li><a href="https://facebook.com">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Work</a></li>
</ul>
<div class="button">
    <a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
    <div class="wrap">
  <ul class="wrap-nav">
   <li><a href="#">About</a>
   <ul>
    <li><a href="#">About Company</a></li>
    <li><a href="#">Designers</a></li>
    <li><a href="#">Developers</a></li>
    <li><a href="#">Pets</a></li>
   </ul>
   </li>
   <li><a href="#">Services</a>
   <ul>
    <li><a href="https://www.google.hr/">Web Design</a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Apps</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Branding</a></li>
   </ul>
   </li>
   <li><a href="#">Work</a>
   <ul>
    <li><a href="#">Web</a></li>
    <li><a href="#">Graphic</a></li>
    <li><a href="#">Apps</a></li>
   </ul>
   </li>
  </ul>
  <div class="social">
   <a href="http://mario-loncarek.from.hr/">
   <div class="social-icon">
    <i class="fa fa-facebook"></i>
   </div>
   </a>
   <a href="#">
   <div class="social-icon">
    <i class="fa fa-twitter"></i>
   </div>
   </a>
   <a href="#">
   <div class="social-icon">
    <i class="fa fa-codepen"></i>
   </div>
   </a>
   <a href="#">
   <div class="social-icon">
    <i class="fa fa-behance"></i>
   </div>
   </a>
   <a href="#">
   <div class="social-icon">
    <i class="fa fa-dribbble"></i>
   </div>
   </a>
   <p>
    From: Zagreb, Croatia<br>
     Site: <a href="http://mario-loncarek.from.hr/">mario-loncarek.from.hr</a>
   </p>
  </div>
    </div>
</div>

CSS

Код
ul {
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
li {
    padding:0;
    margin:0;
}
nav {
    text-align:center;
    width:100%;
    position:relative;
    height:auto;
    overflow:hidden;
    background:none;
}
nav ul {
    text-align:center;
}
nav ul li {
    display:inline-block;
}
nav ul li a {
    color:#333;
    display:inline-block;
    padding:1em 3em;
    text-decoration:none;
    border-bottom:2px solid #fff;
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
    font-size:16px;
}
nav ul li a:hover {
    color: #34B484;
}
/*styling open close button*/
.button {
    display:inline;
    position:absolute;
    right:50px;
    top:6px;
    z-index:999;
    font-size:30px;
}
.button a {
    text-decoration:none;
}
.btn-open:after {
    color:#333;
    content:"\f0c9";
    font-family:"FontAwesome";
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
    color:#34B484;
}
.btn-close:after {
    color:#fff;
    content:"\f00d";
    font-family:"FontAwesome";
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
    color: #34B484;
}
/*overlay*/
.overlay {
    display:none;
    position:fixed;
    top:0;
    height:100%;
    width:100%;
    background:#333;
    overflow:auto;
    z-index:99;
}
.wrap {
    color:#e9e9e9;
    text-align:center;
    max-width:90%;
    margin:0 auto;
}
.wrap ul.wrap-nav {
    border-bottom:1px solid #575757;
    text-transform:capitalize;
    padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
    font-size:20px;
    display:inline-block;
    vertical-align:top;
    width:24%;
    position:relative;
}
.wrap ul.wrap-nav li a {
    color:#34B484;
    display:block;
    padding:8px 0;
    text-decoration:none;
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
    color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
    padding:20px 0;
}
.wrap ul.wrap-nav ul li {
    display:block;
    font-size:13px;
    width:100%;
    color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
    color:#f0f0f0;
}
.wrap ul.wrap-nav ul li a:hover {
    color:#34B484;
}
.social {
    font-size:25px;
    padding:20px;
}
.social p {
    margin:0;
    padding:20px 0 5px 0;
    line-height:30px;
    font-size:13px;
}
.social p a {
    color:#34B484;
    text-decoration:none;
    margin:0;
    padding:0;
}
.social-icon {
    width:80px;
    height:50px;
    background:#e9e9e9;
    color:#333;
    display:inline-block;
    margin:0 20px;
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
}
.social-icon:hover {
    background:#34B484;
    color:#f0f0f0;
}
.social-icon i {
    margin-top:12px;
}
@media screen and (max-width:48em) {
    .wrap ul.wrap-nav>li {
  width:100%;
  padding:20px 0;
  border-bottom:1px solid #575757;
    }
    .wrap ul.wrap-nav {
  padding:30px 0px 0px;
    }
    nav ul {
  opacity:0;
  visibility:hidden;
    }
    .social {
  color:#c1c1c1;
  font-size:25px;
  padding:15px 0;
    }
    .social-icon {
  width:100%;
  height:50px;
  background:#fff;
  color:#333;
  display:block;
  margin:5px 0;
    }
}
.content {
    width:100%;
    margin-top:200px;
    font-size:20px;
    color#333;
    text-align: center;
}

JS

Код
$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});



See the Pen
Responsive overlay menu navigation
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 2357382.png(19.3 Kb) · responsive-over.zip(6.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура HTML элемента » Простая навигация CSS в адаптивном стиле (Оригинальный стиль горизонтальной навигаций для сайта)
  • Страница 1 из 1
  • 1
Поиск: