файлы
| Главная » Файлы » Все для ucoz » Скрипты для ucoz |
Симпатичное простое вертикальное меню для сайта
| 04.03.2014, 10:52 | |
| Симпатичное простое вертикальное меню для Вашего сайта выполнено с использованием html и css. Простое меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков. Установка: Вставляем в то место, где хотим видеть это простенькое меню Разметка html: Код <ul class="navigation"> <li><a href="/">ССЫЛКА 1<span class="ui_icon home"></span></a></li> <li><a href="/">ССЫЛКА 2<span class="ui_icon aboutus"></span></a></li> <li><a href="/">ССЫЛКА 3<span class="ui_icon services"></span></a></li> <li><a href="/">ССЫЛКА 4<span class="ui_icon icon gallery"></span></a></li> <li><a href="/">ССЫЛКА 5<span class="ui_icon contactus"></span></a></li> <li><a href="/">ССЫЛКА 6<span class="ui_icon other"></span></a></li> <li><a href="/">ССЫЛКА 7<span class="ui_icon user"></span></a></li> </ul> Разметка CSS: Код ul.navigation { width: 270px; list-style: none; margin: 0; padding: 0; text-align: left;} ul.navigation li { display: inline-block; margin: 0px; padding: 0;} ul.navigation a { display: block; width: 190px; height: 33px; padding: 12px 0 0 80px; margin-bottom: 5px; color: #8a8980; font-size: 16px; font-weight: normal; text-decoration: none; position: relative;} ul.navigation a .ui_icon { position: absolute; top: 0; left: 15px; width: 40px; height: 40px; } ul.navigation a .home { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_home.png) no-repeat; } ul.navigation a .aboutus { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_aboutus.png) no-repeat; } ul.navigation a .services { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_services.png) no-repeat; } ul.navigation a .gallery { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_portfolio.png) no-repeat; } ul.navigation a .contactus { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_contact.png) no-repeat; } ul.navigation a .other { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_other.png) no-repeat; } ul.navigation a .user { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_user.png) no-repeat; } ul.navigation a .home2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_home_hover.png) no-repeat; } ul.navigation a .aboutus2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_aboutus_hover.png) no-repeat; } ul.navigation a .services2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_services_hover.png) no-repeat; } ul.navigation a .gallery2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_portfolio_hover.png) no-repeat; } ul.navigation a .contactus2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_contact_hover.png) no-repeat; } ul.navigation a .other2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_other_hover.png) no-repeat; } ul.navigation a .user2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_user_hover.png) no-repeat; } ul.navigation a:hover, ul.navigation a.selected { color: #201f1b; background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_menu_hover.png) no-repeat left;} ul.navigation a:hover .home, ul.navigation a.selected .home { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_home_hover.png) no-repeat;} ul.navigation a:hover .aboutus, ul.navigation a.selected .aboutus { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_aboutus_hover.png) no-repeat;} ul.navigation a:hover .services, ul.navigation a.selected .services { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_services_hover.png) no-repeat;} ul.navigation a:hover .gallery, ul.navigation a.selected .gallery { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_portfolio_hover.png) no-repeat;} ul.navigation a:hover .contactus, ul.navigation a.selected .contactus { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_contact_hover.png) no-repeat;} ul.navigation a:hover .other, ul.navigation a.selected .other { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_other_hover.png) no-repeat;} ul.navigation a:hover .user, ul.navigation a.selected .user { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_user_hover.png) no-repeat;} ul.navigation a:hover .home2, ul.navigation a.selected .home2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_home_hover.png) no-repeat;} ul.navigation a:hover .aboutus2, ul.navigation a.selected .aboutus2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_aboutus_hover.png) no-repeat;} ul.navigation a:hover .services2, ul.navigation a.selected .services2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_services_hover.png) no-repeat;} ul.navigation a:hover .gallery2, ul.navigation a.selected .gallery2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_portfolio_hover.png) no-repeat;} ul.navigation a:hover .contactus2, ul.navigation a.selected .contactus2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_contact_hover.png) no-repeat;} ul.navigation a:hover .other2, ul.navigation a.selected .other2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_other_hover.png) no-repeat;} ul.navigation a:hover .user2, ul.navigation a.selected .user2 { background: url(http://megascripts.ru/demo/prostoe_menu/templatemo_user_hover.png) no-repeat;} ul.navigation a:focus {outline: none;} Вот и всё. Удачи | |
| Просмотров: 276 | Загрузок: 0 | | |
| Всего комментариев: 0 | |