Симпатичное простое вертикальное меню для сайта - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1269
Статистика


Онлайн всего: 2
Гостей: 2
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Меню для сайта

Симпатичное простое вертикальное меню для сайта

Хочешь сказать спасибо? Кликни на рекламный баннер.

11.02.2014, 21: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;}


Вот и всё. Удачи wink





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 7365 | Загрузок: 396 | Рейтинг: 3.9/12
Теги: простое меню, для сайта, красивое меню, скрипт, меню для сайта, меню
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Золотая рыбка имеет временную память в 3 секунды.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта