• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Простая адаптивная верхняя навигация на CSS3 (Идеи и советы для создания навигаций для сайта)
Простая адаптивная верхняя навигация на CSS3
Kosten
Вторник, 23 Октября 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Вашему вниманию горизонтальное меню, что просто адаптированное под мобильные устройства. Если просто, это не означает, что только поверхностно сделано. По сути это простая навигация, которая может отлично смотреться на отдельных страницах. В мануале, который здесь предоставлен, мы создадим полностью отзывчивую навигационную панель с полного нуля, где не будет Javascript, что безусловно идет в плюс, так как совершенно не станет грузить страницы.

Все проверено на работоспособность, включая функций на элементе при наведение курсора.

1.



2.



Приступаем к установке:

HTML

Код
  <header>
        <div class="sagonu-avigation" id="sagonu-avigation">
            <hr class="kolprusa-ramewten">
            <a class="navlink first" href="#" title="Главная">Главная</a>
            <hr class="kolprusa-ramewten">
            <a class="navlink" href="#" title="Скрипты">Скрипты</a>
            <hr class="kolprusa-ramewten">
            <a class="navlink" href="#" title="Шаблоны">Шаблоны</a>
            <hr class="kolprusa-ramewten">
            <a class="navlink last" href="#" title="Zorner.Ru">Zorner.Ru</a>
        </div>
    </header>


CSS

Код
/* Top Navigation */
header {
    width: 100%;
    min-height: 48px;
    margin: 0 0 0% 0;
    background: #919191;
  /* remove ugly highlighter effects */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0 none;
}

.sagonu-avigation {
    width: 92%;
    margin: 0 auto;
    line-height: 1.28em;
    overflow: hidden;
    background-color: #187E91;
}
.sagonu-avigation a {
    float: left;
    display: block;
    color: #fff;
    /*padding-top: 19px;
    padding-bottom: 17px;*/
    text-decoration: none;
    font-size: 18px;
    font-weight: normal;
}
.sagonu-avigation a:hover {
    background-color: #fff;
    color: #187E91;
}
.sagonu-avigation .icon {
    border: 0;
    width: 25px;
    height: 25px;
}
.navlink {
    width: 100%;
    padding-top: 19px;
    padding-bottom: 17px;
    padding-left: 18px;  
    text-align: left;
}

.kolprusa-ramewten {
    margin: 0;
    padding: 0;
    width: 760px;
    border: 1px solid transparent;
}
@media only screen and (min-width: 760px) {
    .kolprusa-ramewten {
        display: none;
    }    
  
    .navlink {
        margin: 0;
        width: 120px;
        max-width: 15%;
        text-align: center;
        padding-left: 6px;
        padding-right: 6px
    }

   header {
        background: #187E91;
    }
    
    }


Также используется мобильный подход для создания навигационной панели, да именно панели, где можно самостоятельно установить логотип и самому ее доработать до оригинальности.

Демонстрация
Прикрепления: 2965922.png (6.9 Kb) · 1261832.png (6.0 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Простая адаптивная верхняя навигация на CSS3 (Идеи и советы для создания навигаций для сайта)
  • Страница 1 из 1
  • 1
Поиск: