Вертикальное выпадающее меню скачать
Вертикальное выпадающее меню.В данном уроке будет подробно рассмотрено создание вертикального меню с выпадающими пунктами. Для основы возьмём меню из предпредыдущего урока. Для создания меню будет применён класс .drop_vert_menu; В коде несколько раз встретиться запись подобно этой .drop_vert_menu > li Стрелка > указывает на дочерний селектор ( li ) Для того что бы добавить подпункты к пункту меню - нужно перед закрывающимся тегом «вставить как бы» ещё одно меню (то есть теги внутри которых будут пункты ). Основные параметры в CSS-стилях для выпадающего меню: top: 2px; - определяет на сколько пикселей вниз будет отступать раскрывающееся подменю; left: 195px; - размер отступа от левого края; position: relative; - пункты будут располагаться один за другим, а не сожмутся в кучу; position: absolute; - означает, что пункты основного меню будут находиться в фиксированном положении относительно подпунктов; display: none; - элемент невидим (его как бы нет). display: block; - означает что подпункты этого меню будут «резиновыми, как блок» - если название подпункта большое, то он растянется в высоту. Так же в CSS – коде будет присутствовать параметр: border-top: 1px solid White; - с помощью него можно регулировать размер и цвет отступа между пунктами меню; То есть вы будете регулировать толщину и цвет верхней рамки. А отступы ещё можно регулировать с помощью атрибута – margin … ; Значение остальных параметров вам должно быть знакомо из предыдущих уроков по CSS, а так же уроков HTML. Создайте два файла: drop_vert_menu.css и test_menu.html . Предпологается, что эти файлы находятся в одной директории. Содержание файла drop_vert_menu.css. Содержание файла test_menu.html. Безусловно можно сделать нечто более интересное, чем это меню. Всё что вам нужно – это найти примеры меню, которые примерно похожи на те, что у вас в воображении и изучить их, для того что бы потом переделать. Самый лучший способ изучения в таком случае будет – «метод тыка». То есть вы видите параметр задающий цвет или размера -> изменяете это параметр на другой и смотрите, что произойдёт и т.д. И уже после нескольких переделок вы сможете самостоятельно (без чужих примеров) сделать то, что вам нужно. | |
 | |