Симпатичное простое вертикальное меню для Вашего сайта выполнено с использованием 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;}
