Привет, с возвращением.
Угадай что?
Мы собираемся сделать еще одну, и
нашу последнюю, навигационную панель вместе, в этом обзоре кода.
Этот, однако, немного отличается не только
тем, как мы настраиваем вещи, но и потому, что я хочу поговорить с вами о
доступности того, сколько людей делают свои навигационные панели.
Новый способ, который
я использовал таким образом, - создать ваши навигационные ссылки как часть списков.
Так что вы видите, у нас тут уже немного отличается.
У меня есть неупорядоченный список с одним, двумя, тремя, четырьмя элементами списка, и
некоторые из этих элементов списка имеют неупорядоченные списки сами.
Так что, хотя это очень распространено,
есть некоторые проблемы юзабилити, когда вы понимаете, это действительно списки?
Потому что если нет, это семантический тег, который мы используем, которого мы можем избежать.
Но это так часто, что я хочу показать вам это и позволить вам играть с ним и
принимать собственные решения.
Другая проблема, когда мы делаем эту панель навигации,
связана с доступностью людей, которые могут наводить
курсор на определенные вещи, которые вы хотите активировать.
Я думаю, что мы все были там, когда мы были на веб-странице, и
мы пытаемся навести курсор на что-то, чтобы щелкнуть ссылку.
И он продолжает выпрыгивать, потому что наша рука слишком шаткая или
мы должны парить над тремя вещами одновременно.
Опять же, хотя это техника, которую я хочу поделиться с вами и
помочь вам понять, я надеюсь, что вы убедитесь, что любые приложения, которые вы делаете,
вы делаете все возможное, чтобы убедиться, что это как можно более доступно.
Итак, опять же, давайте начнем с этого простого, скучного HTML-кода и
посмотрим, не можем ли мы заставить его выглядеть что-то немного более захватывающее.
То, что мы имеем здесь сейчас, - это горизонтальная навигационная панель
, которая будет иметь выпадающие элементы.
Итак, когда я перехожу домой, нет ничего лишнего, чтобы увидеть, но, когда я перехожу по
картинкам, вы можете видеть, что у меня есть три дополнительные ссылки, которые я могу попробовать сделать, и
то же самое с рецептами, и контакт, опять же, это все само по себе.
Так как я это сделал?
Как у меня это было так, чтобы 2015, 14 и 13 не появились, если я не зависаю?
И то же самое с рецептами?
Давайте взглянем.
Ладно, я пропущу тело в навигаторе,
потому что я думаю, ты знаешь, как это сделать.
Вместо этого давайте поговорим о разных списках сами.
Извините, перечислите сами элементы в ссылках.
То, что я сделал, так это то, что я вошел сюда, чтобы
вы могли видеть оба одновременно.
И он очень слабый, и я бы хотел, чтобы я сделал другой цвет.
Но у меня есть граница между каждым из этих вариантов.
Для
меня было бы немного странно иметь границу прямо здесь, на стороне.
Так что мне нужно было сделать, так это я пошел и сказал, что знаешь что?
Для этого последнего элемента списка, самого последнего, давайте не будем ставить границу в.
Это те маленькие крошечные настройки, которые вы можете поместить в свой код,
чтобы он выглядел немного более профессиональным.
Мы также не хотим границ по подпунктам, верно?
Потому что ничего нет.
Поскольку они заблокированы, нам не нужны границы на стороне.
Итак, я сделал то же самое здесь, где я сказал, знаешь что?
Я не хочу использовать здесь какие-либо границы.
Довольно прямо, надеюсь.
Теперь давайте посмотрим еще раз.
Я сделал простой стиль на моих навигационных ссылках, хорошо?
Единственное, что я сделал, это снова,
я хотел показать вам пример использования перехода.
Переход здесь - это то, что медленно меняет цвет при наведении курсора,
а не быстрое изменение.
Итак, вы видите, это немного более постепенное, чем внезапное, ясно?
Активный такой же, как в прошлый раз.
Вот интересная часть.
Мы поговорим о подменю, хорошо?
Итак, как браузер знает, когда что-то подменю?
Ну, он может смотреть на DOM, и он может смотреть вниз и идти, о, я в навигации.
И теперь я нахожусь в неупорядоченном списке, и здесь я нахожусь в элементе списка.
Если он найдет другой пункт списка ниже, это своего рода цепь вниз,
он знает, о, о, о, я в подменю.
Так что прямо здесь, он знает, что я в навигаторе, я внутри списка,
и я только что нашел там неупорядоченный список.
Итак, как мы настроили его так, чтобы он не показывался в начале, это то, что я
установил положение на абсолютное, и я установил отображение на none.
Таким образом, он не будет отображаться по умолчанию. Этого
не случится.
Хорошо?
Итак, как мне это сделать
, чтобы оно вдруг всплыло, если мы хотим сделать что-то на этой линии?
Ну, мы хотим узнать, как изменить его здесь, когда я наведите курсор на элемент списка
, который имеет неупорядоченный список под ним, измените этот дисплей с none на block.
Итак, эти две строки кода прямо здесь, это действительно его настраивает.
Таким образом, когда я перехожу сюда, по умолчанию,
дисплей отсутствует, но когда я наводим курсор, дисплей становится блоком.
Это очень простой, очень короткий код, очень мощная концепция для понимания.
Поэтому я показал вам несколько разных способов, которые вы можете стилизовать свои навигационные панели.
У нас есть горизонтальный, у нас вертикальный, у нас падение вниз.
Я очень надеюсь, что вы выберете тот, с которым вы чувствуете себя наиболее комфортно, или
на самом деле, наиболее взволнованным, и создадите его для
вашего окончательного проекта здесь, в этом классе CSS.
Не волнуйтесь, если у вас возникнут проблемы.
Публикация на доске обсуждения.
Перейдите в Интернет и найдите ответы.
Но на самом деле я надеюсь, что вы сможете создать что-то, чем гордитесь,
и красивое, и доступное.
Удачи.