Вторник, 12.12.2017, 15:06


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 84
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » 2013 » Июль » 25 » Боковое Меню Цветное и серое
20:33
Боковое Меню Цветное и серое
Интернет Технологии [2]Телефоны [0]uCoz CSS КодыСкрипты [94]



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

Красивые 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>  
    
  <li> <a class="m_vixod" href="$LOGOUT_LINK$"><span>Выход</span></a>  
  </li>  
    
  <li>  
  <a class="m_vxod" href="$LOGIN_LINK$"><span>Вход</span></a>  
  </li>  
    
  </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;  
  }


Категория: uCoz CSS КодыСкрипты | Просмотров: 398 | Добавил: DoG | Теги: для uCoz, скрипт для ucoz | Рейтинг: 0.0/ 0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Новое на сайте

 

Самое популярное

 

 Коды скрипты

Случайная статья

  • Cities XL Platinum 2013 73
  • Чудо ферма \ Virtual farm 87
  • Именем короля 3. Коллекционное издание 89
  • Браузер Maxthon 189
  • Download Master 5.12.1.1283 178
  • Articles – лучшая Wikipedia в кармане 173
  • Улесье. Коллекционное издание 148
  • RIFT – многопользовательская онлайн игра 203
  • Будущее настоящего прошлого_скачать 336
  • Darck Orbit – браузерная игра 194
  • iSendSMS - для отправки SMS и MMS 228
  • Lunascape 6.2 Универсальный браузер 184
  • XnView Full-один из лучших просмотрщиков -конверторов графических файлов 214
  • Графический редактор PhotoFiltre 222
  • FileZilla — лучший бесплатный FTP-менеджер 195

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29887
  • FrontPage 2003 Русская версия 11650
  • Игра "Фараон и Клеопатра" скачать бесплатно 6895
  • Mozilla Firefox 8.0.1 - русская версия скачать 4211
  • Новый Супер Марио 4128
  • Игра в Длинные нарды 4053
  • Медитация для привлечения Любви 3761
  • Сборник_Программа настроев Г.Н.Сытина скачать 2906
  • FFrontPage 2007 Русская версия 2831
  • Авто выключение компьютера_WinMend Auto Shutdown 2662
  • Астрон Дизайн - 3D моделирование Вашего дома 2114
  • Спец эффекты с ВебКамерой 2094
  • Штука - игра в карты 1788
  • Если хочешь быть счастливым - Литвак Михаил 1532
  • Программа для быстрого создания Flash-анимации 1522

  • Еще один вид опросов 278
  • Скрипт синий мини-профиль + форма входа для uCoz 361
  • Как сделать топ пользователей,по количеству файлов,и постов 274
  • Сегодня нас посетило N человек для uCoz 304
  • Топ пользователей для ucoz 388
  • Новая форма опроса для ucoz 412
  • Новый вид комментариев v.1.0 + Модер-панель для uCoz 299
  • Блок нужные программы 269
  • Отображаем информацию ваш браузер на uCoz 367
  • Флеш игра Крабы и волейбол 375
  • 7 каналов радиостанций высочайшего уровня на любой вкус! 271
  • Флеш Часы для uCoz 304
  • Новый цветной вид опроса v.2.0 uCoz 271
  • Скрипт войти на сайт в углу странички 286
  • Вместительная статистика ucoz ver 3.1 353

  • Кнопка "Вверх" для сайта, блога или форума 267
  • Коте для вашего сайта 267
  • Cоц. закладки для сайта 267
  • Пожертвование на развитие сайта. 267
  • Перевод на другие языки для uCoz 267
  • Топ пользователей для сайта ucoz 268
  • Перевод сайта на 7 языков 268
  • Скрипт статистика сайта для uCuz 268

  • TextKit Массовый импорт файлов 334
  • Будущее настоящего прошлого_скачать 336
  • Zombies, Run! — бегом от зомби в реале! 285
  • ЛЕЧЕБНЫЕ СИСТЕМЫ КИСТЕЙ И СТОП 610
  • Формула богатства-Рене Эгли 477
  • Paint.Net_Фото редактор 374
  • Игра "Фараон и Клеопатра" скачать бесплатно 6895


  • Внимание!

    ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
    Все файлы и программы взяты с интернет пространства.
    Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

    Вверх Главная Регистрация RSS
    Приветствую Вас, Гость