Иногда нам требуется горизонтальная навигация, хоть ее в сети интернет можно найти на любой дизайн, но здесь вы можете сами создать ее, где она будет оригинальной. Так как полностью каркас уже выстроен, где он полностью рабочий, а по стилистике, здесь сам веб мастер может чем то вдохновится и сделать под тематику или основную стилистику ресурса.
Отнесем материал к панелям навигации с вкладками, раскрывающимся навигационным панелям и даже горизонтальным панелям навигации, где постараемся подробно изложить базовую горизонтальную навигационную панель без разных излишеств, чисто рабочий каркас, где безусловно эффект наведение присутствует.
Итак, сегодняшнее учебное пособие касается воссоздания основ, это то, что вам нужно знать, чтобы создать простую навигационную панель, подобную той, что изображена выше.
Как и в большинстве современных навигационных баров, наша будет основана на неупорядоченном списке ul. Это делает смысловой смысл, панель навигации - это не что иное, как список ссылок, ведущих на ваш сайт. Традиционная горизонтальная ориентация - это просто удобное средство для получения всех наших самых важных элементов списка «выше складки», поэтому пользователь может видеть их, не прокручивая страницу вниз.
Вы заметите, что я использовал один ID, поэтому мы могли бы рассказать о нашей навигационной панели отдельно от всех других неупорядоченных списков на странице. Но если бы это было заправлено в div с его собственным идентификатором (например, с «баннером» или «заголовком»), идентификатор, вероятно, не был бы необходим. Здесь можно добавить еще больше идентификаторов и классов, если бы захотел сделать этот фаворит, но сегодня мы все о простоте.
Здесь мы плаваем как с нашим списком, так и с нашими списками. Плавающие элементы списка слева - это то, что тянет их в хорошую горизонтальную строку для нас, складывая элементы слева направо. Однако из-за того, как ведут себя поплавки, наш содержащий список скроется до высоты нуля, если он не будет также оставлен слева.
И это не было бы серьезной проблемой, кроме того, что планируется позже добавить свой список в цвет фона, который я хочу отобразить за моими списками, и если мой список рухнет, этого не произойдет. Вот почему список шириной 100%: таким образом, он заполнит всю ширину страницы или ее контейнера, если он находится в контейнере с установленной шириной.
Я также удаляю большую часть полей и отступов, чтобы заставить список вести себя, где остается некоторый запас снизу, просто для эстетических целей и устанавливая стиль списка «none», который удаляет пули из мой список.
Из этой базовой структуры вы можете построить любое количество уникальных навигационных баров.
Во-первых, мы предоставим нашей навигационной панели фон и некоторые границы, обновив наш CSS #zosrkanubteg:
И давайте наши анкерные тэги немного передышки и стиля тоже:
Код
#zosrkanubteg li a { display: block; padding: 7px 14px; text-decoration: none; font-weight: bold; color: #165879; border-right: 1px solid #b7b0b0; }
Здесь задаем якорям отображение блока, чтобы убедиться, что они заполняют весь элемент списка и делают всю область доступной. Затем добавляем несколько дополнений, чтобы немного их расставить.
Где удаляем подчеркивание, делая шрифт полужирным, придавая нашему цвету синий цвет и добавляя границу в правую часть элемента, что соответствует границе, которую мы добавили в верхнюю и нижнюю часть нашего неупорядоченного списка.
Остается задать навигационным элементам другой цвет, когда наши пользователи перейдут к следующему:
