Удобное и понятное для пользователя меню — важная составляющая любого сайта в Интернете. Создавая меню, нужно учитывать не только его функциональную нагрузку, но думать и об эстетическом восприятии.
С помощью каскадных таблиц стилей CSS очень просто сделать привлекательное меню для вашего сайта. Именно это мы будем рассматривать на данном занятии.
Сегодня мы сделаем горизонтальное меню. Здесь можно скачать и посмотреть меню:
Красивое меню — HTML часть
Для того, чтобы сделать привлекательное меню на CSS, во-первых, необходимо вставить список в HTML. После того, как мы опишем его свойства в CSS, он преобразуется в настоящее меню.
1 2 3 4 5 6 7 8 | <div id="cssmenu"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>About</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div> |
Красивое меню — CSS часть
Теперь необходимо указать свойства в файле CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | @import url(http://fonts.googleapis.com/css?family=Capriola); /* Первая строка нужна для того чтобы скачать необходимые шрифты, если их нет на компьютере у клиента */ #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { padding: 0; margin: 0; line-height: 1; font-family: 'Capriola', sans-serif; } #cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after { content: ''; display: table; } #cssmenu:after, #cssmenu > ul:after { clear: both; } #cssmenu { zoom: 1; height: 69px; background: url(images/bottom-bg.png) repeat-x center bottom; border-radius: 2px; width: auto; } #cssmenu ul { background: url(images/nav-bg.png) repeat-x 0px 4px; height: 69px; } #cssmenu ul li { float: left; list-style: none; } #cssmenu ul li a { display: block; height: 37px; padding: 22px 30px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 15px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); font-weight: 400; opacity: .9; } #cssmenu ul li:first-child a { margin: 4px 2px 0 0; } #cssmenu ul li a:hover, #cssmenu ul li.active a { background: url(images/color.png) center bottom; display: block; height: 37px; margin-top: 0px; padding-top: 26px; color: #004f7c; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55); opacity: 1; } |
Выводы
У нас получилось горизонтальное меню. К тому же оно интересное, понятное и красивое. Оно обязательно пригодится вам в вашей работе и украсит ваш интернет-сайт. А главное – им очень удобно пользоваться.
Залишити відповідь