46321 (Навигация в списках и блочные ссылки)

2016-07-31СтудИзба

Описание файла

Документ из архива "Навигация в списках и блочные ссылки", который расположен в категории "". Всё это находится в предмете "информатика" из , которые можно найти в файловом архиве . Не смотря на прямую связь этого архива с , его также можно найти и в других разделах. Архив можно найти в разделе "рефераты, доклады и презентации", в предмете "информатика, программирование" в общих файлах.

Онлайн просмотр документа "46321"

Текст из документа "46321"

Навигация в списках и блочные ссылки

Когда-то навигационные панели делались из таблиц, заполненных нарисованными в Фотошопе кнопками. В последнее время, когда появилась возможность все больше и больше полагаться на возможности CSS, происходит движение в сторону большей семантичности. С точки зрения семантики, навигационнное меню — это список ссылок. С этой точки зрения мы на него и будем смотреть.

С помощью CSS можно с легкостью достичь множества эффектов, для которых ранее пришлось нарезать бы множество графических элементов. Разумеется, чем сложнее эффект, тем лучше браузер требуется для его поддержки, поэтому стоит в любой сложный эффект включать какой-нибудь простой элемент, чтобы обеспечить удобство для посетителей со старыми версиями. Сейчас мы рассмотрим несколько любопытных эффектов для вертикального меню. Горизонтальные меню в настоящее время менее удобны в реализации списками, поскольку обычно требуют поддержки псевдоклассов :before, :after, :first-child, свойства content и прочих сложных вещей.

Подготовительная работа

Нам понадобится список из нескольких ссылок и простейшие базовые стили для начала работы:

ul {border:1px solid black; width:30%; padding:0; margin:1em}

ul li {list-style:none}

ul li a {text-decoration:none; color:blue}

ul li a:hover {color:red}

  • Первая ссылка
  • Вторая ссылка
  • Третья ссылка
  • Еще какая-то ссылка
  • Пара замечаний по этому коду. Во-первых, тут мы уже задали один простой эффект: перемену цвета при наведении мыши. Это самый простой элемент, и я бы рекомендовал включать его во все hover-эффекты, поскольку он понятен любому браузеру, понимающему hover, тогда как более сложные эффекты кто-то может и не понять. Второе замечание: list-style, конечно, можно написать в ul, ничего от этого не изменится. Просто мне захотелось сразу обозначить те четыре селектора, с которыми мы будем работать в дальнейшем.

    Блокировка

    Вообще мысль оформить навигацию списком довольно очевидна. Но у графических кнопок есть большое преимущество перед текстовыми ссылками: на кнопки можно нажимать по всей площади, тогда как у ссылки клику поддается только сам текст. Раньше люди клали жизнь на алтарь, пытаясь сделать "кликабельной" клетку таблицы. Теперь есть куда более простое (и что немаловажно, легальное) средство: display:block.

    Установка этого атрибута сделает нашу ссылку нажимаемой по всей ширине списка. Чтобы нам было легче это заметить, добавим изменение фона у ссылки:

    ul {border:1px solid black; width:30%; padding:0; margin:1em;}

    ul li {list-style:none;}

    ul li a {text-decoration:none; color:blue; display:block}

    ul li a:hover {color:red; background:#eff}

    Два очень важных замечания по MSIE 5.0 (что-то, возможно, верно и для более новых). Во-первых, он норовит вставить лишние пробелы между строками:

    Эта проблема решается неэлегантно, но просто: нужно убрать переносы строк между элементами списка:

    • Первая ссылка
    • Вторая ссылка
    • Третья ссылка
    • Еще какая-то ссылка

    Вторая проблема куда серьезнее, и у нее, кажется, нет решения: если у списка или у какого-либо родительского элемента задана ширина (возможно даже 100%), ссылка не становится нажимаемой вне области текста. Правда, при наведении мыши на текст ссылки фоновый цвет меняется на всей ширине списка. Таким образом, заключаем, что MSIE5.0 более или менее правильно обрабатывает стили, но не инициализирует событие onMouseOver в согласии со свойством display. Что интересно: если список является непосредственным ребенком элемента body и ширина у него не задана, то display:block приносит ожидаемый эффект. Удивительно, не правда ли?

    Кроме того, если у самого списка задана ширина (вне зависимости от его предков), то MSIE создает левый отступ (виден на картинке выше), от которого, кажется, никак не избавиться. Разве что насильственным text-indent:-1em.

    Ссылка в рамке

    Очень интересных эффектов можно достичь с помощью рамок. Рамки бывают толстые и тонкие, сплошные и прерывистые, и многие другие (смотря в каком браузере, разумеется). При создании эффекта, основанного на изменении свойств рамки, следует учитывать следующее: ширина рамки в общем случае должна быть задана заранее, а изменяться должен только цвет (например, с прозрачного на какой-то, или наоборот), иначе может возникнуть нежелательное дрожание: едва ли дрожание может быть желательным, а обеспечивать сохранение размеров блока другими средствами - полями или отступами - обычно более беспокойно.

    А вот стиль для такого эффекта (я добавил отступ у списка, чтобы граница подсвеченной ссылки не сливалась с границей списка):

    ul {border:1px solid black; width:35%; padding:1em; margin:1em;}

    ul li {list-style:none;}

    ul li a {text-decoration:none; color:blue; display:block; border-width:0 0 1px 0.5em; border-style:solid; border-color:white}

    ul li a:hover {color:red; border-color:#00f}

    Похожего эффекта (маркер слева при выбранной ссылке) можно достичь с помощью ul li:hover {list-style:square}, но на даный момент это не сработает почти ни в одном браузере (в NS7, например, работает, а в NS6 - нет).

    Рисуем кнопку

    Вернемся на исходные позиции: представьте, что мы захотели оформить навигацию в виде кнопок (мне лично такой стиль не кажется привлекательным, но он бесспорно достоин обсуждения). Кнопка - это то, что покрашено серым цветом, выпукло и вдавливается. Все это вполне осуществимо с помощью CSS.

    Я нарочно не хочу использовать сложных средств вроде малоизвестных border-style, и никогда не пользуюсь ими, поскольку они не слишком надежны: многие браузеры и с border-style:solid справляются с трудом. Все, что мне нужно - это solid рамка да небольшой padding.

    ul {border:1px solid black; width:35%; padding:1em; margin:1em;}

    ul li {list-style:none; margin:1px;}

    ul li a {text-decoration:none; color:black; display:block; border-width:1px; border-style:solid; border-color:#eee #666 #666 #eee; background:#ccc; padding:2px 3px 3px 2px;}

    ul li a:hover {color:black; border-color:#666 #eee #eee #666; padding:3px 2px 2px 3px;}

    Тут нет ничего сложного: изменение цвета границы создает эффект нажимания кнопки, а изменение отступов необходимо для того, чтобы текст двигался вместе с "поверхностью кнопки", а не повисал в воздухе (к сожалению, в Opera изменение отступов отработано не будет, поэтому css-кнопки в ней выглядят немного хуже, чем в прочих браузерах). Кто-то сочтет мои комбинации цветов или размеры отступов неоптимальными - что ж, тут, как и в других эффектах, есть место фантазии.

    Экстремальное вождение

    Еще несколько идей, для тех, кто любит экспериментировать и не заботится о совместимости: стили, которые не сработают в большинстве браузеров.

    Стиль, основанный на content'е. Это более требовательная (и более мощная) версия эффекта с передвигающимся маркером. Можно описывать свойство content для псевдоклассов :before и :after активной ссылки, добавляя маркер произвольного вида перед ссылкой или после нее.

    Перенос на другую сторону. Несложный эффект, практическое применение которого, увы, исключено из-за глюка в MSIE, который я описывал в начале: изменять по :hover атрибут text-align, перенося активную ссылку слева направо (или наоборот). В Explorer'е вызывает хаотическое прыгание текста из стороны в сторону, если при переносе текст выходит из под курсора.

    Игры с li:hover. Работает только с новейшими браузерами (все проверить не могу, но в NS6, как я уже говорил, не работает). Ключевой плюс - возможность менять маркер: его форму, цвет, расположение. Кстати, замечание: маркер, расположенный inside, принципиально конфликтует с a {display:block}, особенно перемены с outside на inside и обратно. Во всяком случае, мне не придумать эффект, в котором бы они разумно соседствовали. А вообще, на подходе XHTML2.0, где ссылками можно будет делать сами элементы списка, не вставляя в них . Вот тогда-то и повеселимся.

    Список литературы

    Для подготовки данной работы были использованы материалы с сайта http://www.i2n.ru

    Свежие статьи
    Популярно сейчас
    А знаете ли Вы, что из года в год задания практически не меняются? Математика, преподаваемая в учебных заведениях, никак не менялась минимум 30 лет. Найдите нужный учебный материал на СтудИзбе!
    Ответы на популярные вопросы
    Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
    Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
    Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
    Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
    Отзывы студентов
    Ставлю 10/10
    Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
    Лучшая платформа для успешной сдачи сессии
    Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
    Студизба ван лав ❤
    Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
    Отличный сайт
    Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
    Маленький отзыв о большом помощнике!
    Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
    Студ. Изба как крупнейший сборник работ для студентов
    Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
    Спасательный островок
    Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
    Всё и так отлично
    Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
    Отзыв о системе "Студизба"
    Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
    Отличный помощник
    Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
    Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
    Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
    Спасибо за шикарный сайт
    Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
    Популярные преподаватели
    Нашёл ошибку?
    Или хочешь предложить что-то улучшить на этой странице? Напиши об этом и получи бонус!
    Бонус рассчитывается индивидуально в каждом случае и может быть в виде баллов или бесплатной услуги от студизбы.
    Предложить исправление
    Добавляйте материалы
    и зарабатывайте!
    Продажи идут автоматически
    5075
    Авторов
    на СтудИзбе
    455
    Средний доход
    с одного платного файла
    Обучение Подробнее