Главная → Программирование → by

Прогрессивные и отзывчивый навигации

Разработка приложений для Web может быть трудно еще награждение работу.Учитывая количество браузеров на нескольких платформах, иногда это может быть немного подавляющим.Но если мы начнем кодирование с немного предусмотрительности и применять принципы прогрессивного улучшения с самого начала и применить некоторые реагировать практику в конце концов, мы можем легко приспособить для менее способных браузеров и вознаграждать тех, с современными браузерами в настольных и мобильных средах.


screenshot

Общие Structure

Ниже приводится HTML структура меню навигации созданы WordPress.Это неупорядоченный список является довольно общим для систем управления контентом и ручного кодирования веб-сайтов, так.Это будет основой для нашего work.

Пожалуйста, обратите внимание: Любое эллипсы (…) в фрагментах ниже стоять за код, который мы уже рассмотрели.Мы использовали их, чтобы сократить код и выделить те части, которые имеют отношение к этой section.

<nav class="main-navigation">
   <ul>
      <li><a href="#home">Home</a></li>
      <li>
         <a href="#about">About Us</a>
         <ul class="children">
            <li><a href="#leadership">Leadership</a></li>
            <li><a href="#involvement">Involvement</a></li>
            <li><a href="#vision">Our Vision</a></li>
         </ul>
      </li>
      <li><a href="#clients">Our Clients</a></li>
      <li>
         <a href="#support">Support</a>
         <ul class="children">
            <li><a href="#blog">Blog</a></li>
            <li><a href="#downloads">Downloads</a></li>
            <li><a href="#faq">FAQ</a></li>
         </ul>
      </li>
      <li><a href="#contact">Contact Us</a></li>
   </ul>
</nav>

Unstyled Navigation Наши навигации, unstyled.

Наши Tools

  • CSS Reset
  • HTML5 elements
  • Меньше CSS
  • JQuery

CSS Reset

Сброс наш CSS стилей, где мы и начнем.Браузеры имеют разные стили по умолчанию для элементов, которые мы будем использовать, чтобы понять это и получает все элементы выглядят одинаково важно.В этом примере, так как мы используем неупорядоченный список, будет по умолчанию левый обивка, верхнее и нижнее поля и list-style.Вы можете иметь дело с этими индивидуально или, если вы проект будет включать в себя больше, чем просто эту навигацию, использовать Сброс, чтобы очистить все стили и начать все заново.Я предпочитаю Эрик Мейер Сброс CSS, но есть и несколько других на выбор, перечисленных ниже.Какой бы вы ни выбрали, убедитесь, что на его долю приходится новом HTML5 elements.

HTML5 и CSS3 Elements

Мы будем обертывание меню в ~ HTML5 в 18 | элемент, который является одним HTML5 особенность, которая мы должны использовать право now.Если вам нужно больше хороших причин, чтобы использовать HTML5 в своей повседневной работе, такие как доступность, то читать “ Топ 10 причин для использования HTML5 правой Now “по меньшей Codrops.

CSS3 даст нашим меню прогрессивной чувствую, что мы ищем.Мы можем использовать отличный эффекты, такие как линейные тени, градиенты, текст и коробку и закругленными углами, обеспечивая при этом разумный вид для браузеров, волоча ноги.Вы могли бы также рассмотреть возможность использования что-то вроде CSS3 Pie в процессе.Это даст те отстают браузеры большинство функций им не хватает для отображения CSS3 properties.

Меньше CSS

Чтобы сделать наш CSS более эффективным, мы будем использовать LESS вместе с классом файл облегчить difficulty борьбы со всеми этими браузера префиксов.Другие варианты, такие, как Sass и Compass, делать эффективно то же самое и, возможно, лучше подходит вашей среде разработки.Если вы заинтересованы в получении дополнительной информации о все меньшем и как они соотносятся с Sass, проверить другую мою статью “ Введение меньше, и сравнение с Sass“.

JQuery

Чтобы сделать нашу навигацию немного дружественный в небольших браузеры, такие как на мобильных устройствах, мы будем использовать JavaScript.По существу, мы будем собирать все элементы в нашем навигации и реорганизовать их в select элемента формы.Затем, когда пользователь выбирает опцию из списка, они будут перейти на соответствующую страницу.Взаимодействие с select элемент является одним из самых простых и лучших способов справиться с навигацией в небольшом окне.Эта практика довольно распространенная, так что кривая обучения для пользователей будет gentler.

Как Started

После применения сброс, мы получим что-то вроде следующего.Вы видите, что поля, отступы и стили списков были cleared.

Reset navigation Сброс navigation

Детский уровня Menus

В настоящее время, ребенок уровня меню будут только мешать.Лучше всего сделать, это удалить их из уравнения и добавить их обратно, когда пришло время оформлять их.Для достижения этой цели, мы будем применять position: relative для всех элементов списка и переместить детей от экрана, пока они не needed.

.main-navigation {
   li {
      position: relative;
   }
   .children {
      left: -999em;
      position: absolute;
   }
}

Применение left: -999em; position: absolute; будет двигаться детей в левой части экрана с большим отрывом.Этот метод предпочтительнее только с помощью display: none, потому что это более доступным для экрана readers.

Unstyled without children Без стилей без children

Общие навигации Styles

Каждое меню навигации, вероятно, имеют связи в нем.Но эти связи не такие, как мы видим, ссылки в основном тексте страницы, которые являются синий, подчеркнутый и отличается от окружающего текста.Скорее всего, ссылки в навигации будет стоять в одиночестве, и их функция будет очевидным.Это, как говорится, ссылки в nav элемент, вероятно, есть несколько особенностей их собственные, которые отличают их от типичных якорь tags.

nav {
   a {
      color: inherit;
      display: block;
      text-decoration: none;
   }
}

Таким образом, ссылка будет наследовать цвет текста возложенных на родительский элемент, в данном случае nav.Он будет установлен для отображения в качестве элемента уровня блока, потому что мы хотим активная область, чтобы быть большими, и мы не хотим подчеркивание (потому что это просто смешной)

Navigation with more functional links Навигация с более функциональной links

Пожалуйста, обратите внимание: color: inherit не поддерживается в IE 6 или 7.Если вам нужно поддерживать тех браузерах, то вам нужно явно задать цвет, который вы want.

Подкладка Up

Транспорт меню в соответствии призывает к использованию поплавков.Первоначально, мы будем плавать все элементы в nav элемента влево.Позже мы отменить это свойство для ребенка уровня меню, наряду с множеством других стилей, которые мы установим по way.

.main-navigation {
   ul, li, a {
      float: left;
   }
   …
}

Встроенные navigation

Потому что каждый элемент в nav элемент в настоящее время плавал, сам элемент рухнет, как если бы это были пустые.Есть несколько способов борьбы с этим.Одним из них является также плавают nav самого элемента, который будет расширять его, чтобы обернуть вокруг его содержание.При необходимости, вы можете установить его на width: 100% чтобы заполнить оставшиеся пространство с правой стороны.Или вы можете использовать Николя Галлахер “микро” clearfix решения, которые существенно добавляет clear: both непосредственно перед закрытием nav element.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Поскольку мы используем меньше для наших CSS, применяя Clearfix наших main-navigation класса без изменения разметки очень easy.

.main-navigation {
   .cf;
   …
}

Мы будем видеть больше этого, а также описание того, как это работает, в разделе под названием «закругленные углы и градиенты” below.

Styling

Все правша.В настоящее время, вы, вероятно, как устал смотреть на без стилей меню, как и я.Для начала, мы будем строить, что выглядит как кирпичная стена, а потом долбить хорошее меню из него.Мы не будем служить блока стены на устаревших браузеров, но это хорошее начало anyway.

Цвет фона и Borders

.main-navigation {
   font-size: 0.8em;
   
   ul, li, a {
      …
   }
   ul {
      background: #eee;
      border: 1px solid #ddd;
   }
   li {
      …
      border-right: 1px solid #ddd;
   }
   li:last-child {
      border-right: none;
   }
   a {
      height: 35px;
      line-height: 35px;
      margin: 3px;
      padding: 0 15px;
   }
   .children {
      …
   }
}

В коде выше, текст был слишком большим, поэтому мы сократилась это с font-size: 0.8em.Этот отель расположен на main-navigation класса, поэтому он применяется ко всей навигации.Верхнего уровня неупорядоченный список имеет border: 1px solid #ddd свойство ломаться его со страницы.Каждый элемент списка задается border-right: 1px solid #ddd;, чтобы отделить его от другого.li:last-child селектора нацелен на последний элемент списка элементов в неупорядоченный список, удаление правой границы, потому что ни один элемент не следует it.

Ссылки в навигации даны цвет фона и некоторых левых и правых обивка добавить различие и повысить их активная область.Мы фиксации height и line-height, вместо использования верхнего и нижнего отступов, так что мы можем предсказать более точно, где ребенок уровне меню будет позиционироваться по отношению к их общий родительский список item.

Навигация напоминающий блок wall

Закругленные углы и Gradients

.main-navigation {
   …
   text-shadow: 0 1px 1px #fff;

   ul {
      border: 1px solid #ddd;
      .border-radius();
      .linear-gradient();
   }
   …
}

.border-radius (@radius: 5px) {
   border-radius: @radius;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
   background: @start; /* Old */
   background: -moz-linear-gradient(top,  @start 0%, @end @percent); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
   background: -webkit-linear-gradient(top,  @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
   background: -o-linear-gradient(top,  @start 0%,@end @percent); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  @start 0%,@end @percent); /* IE 10+ */
   background: linear-gradient(top,  @start 0%,@end @percent); /* W3C */
}

Выше мы создали два новых класса, border-radius и linear-gradient.

border-radius класс на самом деле то, что МЕНЬШЕ разработчики называют параметрического mixin.По сути, это как класс, но вы можете передавать переменные в случае его значение по умолчанию не совсем то, что вы хотите.В этом случае, если 5 пикселей не то, что вы хотите, вы можете ссылаться на примесь в виде .border-radius(10px), а затем он будет использовать 10px вместо оригинального 5px.С border-radius собственность, вы можете также передать что-то вроде .border-radius(5px 0 0 5px), и было бы применить 5-пиксель округления только верхний левый и нижний левый углы.Для получения дополнительной информации и возможности на border-radius, см. “ границ Радиус действия: создать закругленные углы с CSS” в CSS3.info.

Другой параметрического примесь составляет linear-gradient.Но с меньшим, вы можете добавить классы для других селекторов, и она будет применять те же styles— тем самым отрицая необходимость изменить разметку просто добавить еще один класс (и, как следствие, его стили) к элементу.Оба класса я создал покрытия возможности браузера синтаксис.В настоящее время Webkit имеет два разных синтаксиса, потому что по какой-то причине производители браузеров решили проигнорировать спецификацию при первом ее реализации и составил свой собственный синтаксис.С Chrome 10 и Safari 5.1, они вернулись к спецификации, вступив в других браузерах, и сделал вещи немного легче для нас.Тем не менее, если вы все еще заботится о предыдущих версий, вам необходимо до …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.