Форма входа

    Бесплатный раздел

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Красивое и очень простое меню Enestife.

    Дата добавления: 01.04.2017 - 01:45
    Добавил: Buger
    Количество просмотров: 1.6k
    Количество комментариев: 0
    Размер файла: 9.7 Kb
    Рейтинг материала: 5.0 / 3
    Красивое и очень простое меню Enestife.
    БЕСПЛАТНО
    рейтинг 5.0
    /
    голосов 3
    Enestife - красивое и очень простое в использовании и адаптации меню. Вы можете использовать его для любых тем сайта. Не содержит javascript, только HTML и CSS. Вы можете изменить цветовую гамму под свой проект.

    ВАЖНО
    В будущем мы обновим меню, мы сделаем больше функциональности и возможностей.

    Особенности:

    • Шрифт Font Awesome
    • Адаптивная дизайн
    • Поисковая строка
    • Современный стиль
    • Легко настроить


    Подключаем иконочный шрифт Font Awesome
    Код
    <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css ">


    HTML разметка
    Код
    <nav id="fast-menu">
      <form class="fm-search-box">
      <input type="text" placeholder="Поиск..." required>
      <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
      </form>
      <ul class="fastmenu-ul-list ">
      <li class="fm-list-item"><a href=""><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
      <li class="fm-list-item"><a href="">Дизайн</a></li>
      <li class="fm-list-item fm-sub-list"><a href="">Изображения<i class="fa fa-angle-down" aria-hidden="true"></i></a>
      <ul class="fm-dropdown">
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 1</a></li>
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 2</a></li>
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 3</a></li>
      </ul>
      </li>
      <li class="fm-list-item"><a href="">О нас</a></li>
      <li class="fm-list-item fm-sub-list"><a href="">Загрузки<i class="fa fa-angle-down" aria-hidden="true"></i></a>
      <ul class="fm-dropdown">
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 1</a></li>
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 2</a></li>
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 3</a></li>
      <li class="fm-sub-list"><a class="fm-sub-size" href="#">Sub Menu 3</a></li>
      </ul>
      </li>
      <li class="fm-list-item"><a href="">Сервис</a></li>
      <li class="fm-list-item"><a href="">Контакты</a></li>
      </ul>
    </nav>


    CSS стили
    Код
    #fast-menu {
      background-color: #f7f7f7;
      line-height: 45px;
      }
      #fast-menu .fm-list-item {
      border-color: #e9e9e9;
      }
      #fast-menu a {
      text-decoration: none;
      font-family: 'Open Sans', sans-serif;
      font-size: 11.4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      font-weight: 600;
      }
      #fast-menu a:hover {
      color: #fff;
      }
      .fastmenu-ul-list {
      margin: 0;
      padding: 0;
      font-size: 0;

      }
      .fastmenu-ul-list a {
      padding: .75em 1.5em;
      color: #424242;
      }
      .fm-list-item {
      border-style: solid;
      border-width: 0 0 1px;
      }
      .fm-list-item,
      .fm-list-item a {
      display: block;
      }

      .fm-dropdown{
      display: none;
      position: absolute;
      background: #f7f7f7;
      line-height: 25px;
      width:100%;
      }
      .fastmenu-ul-list .fm-sub-list:hover > .fm-dropdown{
      display: block;
      transition: 1s;
      border-left: 3px solid #9ccc65;
      }
      .fm-sub-size{
      min-width: 100px;
      }
      .fm-sub-size:hover {
      color: #fff;
      }
      #fast-menu .fastmenu-ul-list .fm-list-item:hover{
      background-color:#9ccc65;
      transition: all .25s ease-in-out;
      }
      .fm-sub-list:hover{
      background-color:#9ccc65;
      transition: all .20s ease-in-out;
      }
      .fm-sub-size:hover {
      transition: all 0.25s ease-in-out;
      transform: translateX(10px);
      }
      .fm-title {
      width: 100%;
      text-align: center;
      padding-top: 55px;
      font-size: 40px;
      font-family: 'Montserrat', sans-serif;
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 2px 2px rgba(0, 0, 0, 0.28);
      }
      .fm-small-title{
      width: 55%;
      margin: 0 auto;
      text-align: center;
      color: #f8f8f8;
      line-height: 21px;
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      padding-top: 15px;
      }
      .fm-button{
      width: 100%;
      text-align: center;
      padding-top: 15px;
      }
      .btn:hover{
      background-color: #8BC34A;
      transition: all .25s ease-in-out;
      }
      .btn {
      background-color: #9CCC65;
      border: none;
      color: white;
      padding: 13px 25px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 13px;
      margin: 4px 2px;
      cursor: pointer;
      }
      .fa.fa-home {
      padding-right: 5px;
      }
      .fa.fa-angle-down {
      padding-left: 5px;
      }
      .fa.fa-search {
      padding: 25px 24px 24px 24px;
      font-size: 13px;
      background-color: #9CCC65;
      color: #fff;
      }
      .fa.fa-search:hover {
      background-color: #8BC34A;
      transition: all .2s ease-in-out;
      color: #fff;
      }

      .fm-search-box{
      float: right;
      border-left: 1px solid #e9e9e9;
      height: 62px;
      }
      input[type="text"] {
      outline: none;
      border: none;
      width: 70px;
      background: none;
      color: #a6a6a6;
      }

      input[type="text" i] {
      padding: 22px 20px 22px 20px;
      font-family: 'Open Sans', sans-serif;
      font-size: 12px;
      color: #9CCC65;
      }

      input[type="text"]:hover {
      width: 120px;
      transition: all 0.25s ease-in-out;
      }

      @media screen and (min-width: 768px) {

      #fast-menu .fastmenu-ul-list {
      display:block;
      }

      .fm-sub-list .fm-dropdown {
      width: auto;
      }

      .fastmenu-ul-list > .fm-list-item {
      border-width: 0 1px 0 0;
      }

      .fastmenu-ul-list > .fm-list-item,
      .fastmenu-ul-list > .fm-list-item a {
      display: inline-block;
      }  
      }

      @media screen and (max-width: 860px) {

      .fm-search-box{
      display:none;
      }

      .fm-logo-img{
      width: 120px;
      }

      }


    Источник: http://art-ucoz.ru/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: