HtmlGuide.ru

Выпадающий список со ссылками – 3 (+ CSS)

Автор admin | Дата: 22.09.2008

Выпадающий список со ссылками – 3 (+ CSS)

Как создать выпадающий список при помощи JS я уже писал, также мы продемонстрировали работу дизайнера со вторым видом выпадающего списка. При создании очередного сайта, мне попался еще один интересный вариант решения проблемы расположения большого количество ссылок на разделы сайта.

Т.к. в JS-файле находится функция создания выпадения, ничего интересного в ней нет. Поэтому рассмотрим файл style.css со стилями оформления списка. Вообще, для того чтобы изменить внешний вид списка достаточно знание основ HTML. Так, например в CSS, для того, чтобы прописать фон списка указывается параметр background-color.

#id {background-color: #000;}

Для того чтобы создать верхний бордюр border-top, а для нижнего бордюра соответственно border-bottom.

#id {border-top: 1px solid #000; border-bottom: 1px solid #ccc}

Где 1px – это толщина линии, solid – вид линии, #000 – ее цвет.
Для того чтобы указать используемый шрифт применяется font-family, а для указания его размера font-size.

#id {font-family: Tahoma, Arial, Verdana; font-size: 11px;}

Даже если вы ранее не сталкивались с каскадными стилями таблиц (CSS) попробуйте поменять значения описанных выше атрибутов. Именно таким вот методом “тыка” я в свое время начинал свое знакомство со стилями – CSS.

Если вы захотите сделать ссылки жирным начертанием, укажите в атрибуте font-weight параметр – bold, а если захотите оставить без изменений уберите его вообще.

#id {font-weight: bold;}

Цвет ссылки меняется в color. Вы можете задать как формат RGB, вида #000 или #dfdfdf, так и вписать английское значение цвета, например, orange или black.

#id {color: black;}

Если вы хотите сделать все ссылки подчеркнутыми, по умолчанию, все ссылки подчеркнуты примените в атрибуте text-decoration, параметр underline. Если наоборот убрать возможно, это надоевшее подчеркивание примените параметр none.

A {text-decoration: none}
A:hover {text-decoration: underline} – когда вы подводите курсор к ссылке, она становится подчеркнутой.

За ширину в CSS отвечает параметр width.

#id {width: 700px}

Также помимо этих тегов, которые встречаются в файле style.css вы можете воспользоваться классическими тегами HTML.

Скачать архив с файлами
Просмотреть, как выглядит выпадающий список