Например:
Понедельник, 16.09.2024, 02:01 Регистрация Карта сайта RSS Лента
Игровые новости Топ Сайтов Статьи Загрузить изображение Игровой форум Картинки
  • Страница 1 из 1
  • 1
Форум » Система Ucoz » Скрипты Меню » Меню в стиле Windows для Ucoz (Уникальный вид!)
Меню в стиле Windows для Ucoz
Dimas777
Дата: Пятница, 08.08.2014, 14:47 | Сообщение № 1
ICQ пользователя:
Skype пользователя:
Сайт пользователя:

Оффлайн
Сообщений: 300
Награды: 2
6
  


Красивое меню для ucoz в стиле Windows.

Особенности меню:
- Фиксированное
- В выпадающем меню категории меняются в зависимости от страницы на которой вы находитесь(у меня сделано только для новостей, каталога файлов, каталога статей и форума)
- В правой стороне есть индикатор показывающий есть личные сообщения или нет(красный-есть, зеленый-нет)

Установка.

Код
.bottom_bar{   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
непрозрачность:0.9;   
высота:29px;   
фон:-webkit-линейный-градиент(право,#074286,#0874B4);  
фон:-moz-линейный-градиент(право,#074286,#0874B4);  
фон:-o-линейный-градиент(право,#074286,#0874B4);  
фон:линейный-градиент(право,#074286,#0874B4);  
Ширина:100%;   
положение:Исправлена;   
дно:0;   
границы-топ:1px твердые #00466E;  
-webkit-коробка-тень:inset 0 1px #73C3F4,0 0 3px черный;  
   -moz-коробка-тень:inset 0 1px #73C3F4,0 0 3px черный;  
   -o-коробка-тень:inset 0 1px #73C3F4,0 0 3px черный;  
коробка-тень:inset 0 1px #73C3F4,0 0 3px черный;  
z-индекс:1;   
}   
.время{   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
float:право;   
цвет:белый;   
текст-тень:0px 0px 6px черный;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
обивка:7px 7px 6px 7px;   
маржа-право:5px;   
}   
.punkt_menu{   
float:слева;   
непрозрачность:1;   
цвет:белый;   
фон:url -("/punkt.png");   
границы-радиус:1.5px;   
маржа-слева:4px;   
Ширина:159px;   
высота:29px;   
маржа-топ:-1px;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
}   
.punkt_menu:hover{   
курсор:указатель;   
Ширина:158px;   
маржа-слева:5px;   
фон:url -("/punkt_vyd.png");   
}   
.punkt_menu:active{   
фон:url -("/punkt_nazh.png");   
Ширина:159px;   
маржа-слева:4px;   
}   
.пуск{   
дисплей:inline-блок;   
float:слева;   
фон:url -("/pusk1.png");   
Ширина:48px;   
высота:29px;   
маржа-топ:-1px;   
}   
.пуск:hover{   
фон:url -("/pusk.png");   
курсор:указатель;   
}   
.droper{   
обивка:9px;   
положение:абсолютная;   
фон:-webkit-линейный-градиент(топ,#0C95C8,#0D5570);  
фон:-moz-линейный-градиент(топ,#0C95C8,#0D5570);  
фон:-o-линейный-градиент(топ,#0C95C8,#0D5570);  
фон:линейный-градиент(топ,#0C95C8,#0D5570);  
границы-топ-слева-радиус:6px;   
границы-топ-право-радиус:6px;   
границы:1px твердые #202020;   
-webkit-коробка-тень:inset 0 1px 1px #ccc 2px 2px 5px #02161E;  
   -moz-коробка-тень:inset 0 1px 1px #ccc 2px 2px 5px #02161E;  
   -o-коробка-тень:inset 0 1px 1px #ccc 2px 2px 5px #02161E;  
коробка-тень:inset 0 1px 1px #ccc 2px 2px 5px #02161E;  
Ширина:290px;   
высота:авто;   
дно:28px;   
z-индекс:2;   
дисплей:нет;   
курсор:по умолчанию;   
непрозрачность:0;   
}   
.punkt_menu:hover #текст{  
маржа-слева:14px !важно;   
}   
.punkt_menu:active #текст{  
маржа-слева:15px !важно;   
}   
#text{margin-top:7px;margin-left:15px;font-size:10pt;text-shadow:0px 0px 6px black;font-family:'Arial';disply:inline-block;}  
#текст{  
текст-украшения:нет;   
цвет:белый;   
}   
.значки{   
маржа-топ:5.5px;   
фон:url -("/razd1.png");   
Ширина:18px;   
высота:18px;   
float:слева;   
}   
.сайты{   
Ширина:авто;   
высота:29px;   
float:право;   
дисплей:inline-блок;   
-webkit-переход:все 0.3с легкость;   
   -moz-переход:все 0.3с легкость;   
   -o-переход:все 0.3с легкость;   
переход:все 0.3с легкость;   
маржа-право:5px;   
}   
.профиль{   
границы-радиус:3px;   
границы:1px твердые #606060;   
-webkit-коробка-тень:0px 0px 2px #c0c0c0;  
   -moz-коробка-тень:0px 0px 2px #c0c0c0;  
   -o-коробка-тень:0px 0px 2px #c0c0c0;  
коробка-тень:0px 0px 2px #c0c0c0;  
фон:белый;   
обивка:3px;   
Ширина:282px;   
высота:50px;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
маржа-дно:37px;   
}   
.профиль:hover{   
курсор:указатель;   
}   
.logoprofile{   
фон:url -("/prof.png");   
Ширина:50px;   
высота:48px;   
}   
.li a{   
цвет:черный;   
обивка:3px;   
Ширина:276px;   
высота:авто;   
дисплей:inline-блок;   
маржа-дно:1.5px;   
маржа-топ:1.5px;   
текст-украшения:нет;   
границы-радиус:2px;   
-webkit-переход:все 0.3с легкость;   
   -moz-переход:все 0.3с легкость;   
   -o-переход:все 0.3с легкость;   
переход:все 0.3с легкость;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
}   
.li:навести курсор мыши на{   
фон:#00D0FF;  
курсор:указатель;   
-webkit-переход:все 0.3с легкость;   
   -moz-переход:все 0.3с легкость;   
   -o-переход:все 0.3с легкость;   
переход:все 0.3с легкость;   
}   
.ramka{   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
границы-радиус:3px;   
границы:1px твердые #606060;   
-webkit-коробка-тень:0px 0px 2px #c0c0c0;  
   -moz-коробка-тень:0px 0px 2px #c0c0c0;  
   -o-коробка-тень:0px 0px 2px #c0c0c0;  
коробка-тень:0px 0px 2px #c0c0c0;  
фон:белый;   
обивка:3px;   
Ширина:282px;   
высота:авто;   
маржа-топ:10px;   
маржа-дно:37px;   
-webkit-переход:все 0.3с легкость;   
   -moz-переход:все 0.3с легкость;   
   -o-переход:все 0.3с легкость;   
переход:все 0.3с легкость;   
дисплей:нет;   
}   
.off{   
фон:url -("/vykl.png");   
Ширина:54px;   
высота:24;   
положение:абсолютная;   
дно:3px;   
}   
#off:hover .off{  
фон:url -("/vykl_2.png");   
курсор:указатель;   
Ширина:54px;   
высота:22px;   
дно:4px;   
}   
#off{  
Ширина:авто;   
высота:24;   
дисплей:inline-блок;   
цвет:белый;   
положение:абсолютная;   
дно:7px;   
право:9px;   
обивка:3px;   
-webkit-переход:все 0.2s легкость;   
границы-радиус:3px;   
границы:1px сплошной черный;   
-webkit-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
   -moz-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
   -o-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
}   
#off:hover{  
-webkit-переход:все 0.2s легкость;   
   -moz-переход:все 0.2s легкость;   
   -o-переход:все 0.2s легкость;   
переход:все 0.2s легкость;   
курсор:указатель;   
-webkit-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
   -moz-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
   -o-коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
коробка-тень:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
}   
#off:active{  
-webkit-переход:все 0.2s легкость;   
   -moz-переход:все 0.2s легкость;   
   -o-переход:все 0.2s легкость;   
переход:все 0.2s легкость;   
-webkit-коробка-тень:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
   -moz-коробка-тень:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
   -o-коробка-тень:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
коробка-тень:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
}   
.pstrue{   
границы-радиус:100%;   
Ширина:15px;   
высота:15px;   
фон:красный;   
границы:1px сплошной черный;   
-webkit-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
   -moz-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
   -o-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
маржа-топ:6px;   
маржа-слева:2px;   
дисплей:inline-блок;   
}   
.pstrue:hover{   
курсор:указатель;   
}   
.pstrue:active{   
-webkit-коробка-тень:inset 0 1px 3px черный,inset 0 1px 2px #404040,0 0 2px #ccc;  
   -moz-коробка-тень:inset 0 1px 3px черный,inset 0 1px 2px #404040,0 0 2px #ccc;  
   -o-коробка-тень:inset 0 1px 3px черный,inset 0 1px 2px #404040,0 0 2px #ccc;  
коробка-тень:inset 0 1px 3px черный,inset 0 1px 2px #404040,0 0 2px #ccc;  
}   
.psfalse{   
границы-радиус:100%;   
Ширина:15px;   
высота:15px;   
фон:зеленый;   
границы:1px сплошной черный;   
-webkit-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
   -moz-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
   -o-коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
коробка-тень:0 0 3px черный,inset 0 1px 1px #ccc,0 0 2px #ccc;  
маржа-топ:6px;   
маржа-слева:2px;   
дисплей:inline-блок;   
}


- HTML(в верх сайта):

Код
<div класс="bottom_bar">   
   <div класс="старт" onclick="пуск()"></div>   
   <div класс="droper">   
   <?если($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$" целевой="_blank" название="Войти в профиль" о="_blank" стиль="цвет:черный;"><div класс="профиль"><div стиль="float:право;маржа-топ:17px;маржа-право:140px;">$USERNAME$</div><div класс="logoprofile"></div></div></a><?еще?><a href="$LOGIN_LINK$" название="Войти на сайт" стиль="цвет:черный;"><div класс="профиль"><div стиль="float:право;маржа-топ:17px;маржа-право:130px;">Войдите на сайт</div><div класс="logoprofile"></div></div></a><?endif?>   
   <?если($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$" название="Выход" стиль="цвет:белый;"><div id="off"><div класс="off"></div><div стиль="маржа-слева:54px;маржа-топ:4px;"></div></div></a><?Еще?><a href="$LOGIN_LINK$" название="Вход" стиль="цвет:белый;"><div id="off"><div класс="off"></div><div стиль="маржа-слева:54px;маржа-топ:4px;"></div></div></a><a href="$REGISTER_LINK$" название="Регистрация" стиль="цвет:белый;"><div id="off" стиль="право:80px;"><div стиль="маржа-топ:4px;обивка-слева:6px;обивка-право:6px;">Регистрация</div></div></a><?endif?>   
   <div класс="ramka"><?если($MODULE_ID$='load')?>$MYINF_25$<style>.ramka{дисплей:блок;}   
   .профиль{маржа-дно:0 !важно;}</style><?endif?><?если($MODULE_ID$='publ')?>$MYINF_26$<style>.ramka{дисплей:блок;}   
   .профиль{маржа-дно:0 !важно;}</style><?endif?><?если($MODULE_ID$='новости')?>$MYINF_27$<style>.ramka{дисплей:блок;}   
   .профиль{маржа-дно:0 !важно;}</style><?endif?><?если($MODULE_ID$="форум")?>$MYINF_28$<style>.ramka{дисплей:блок;}   
   .профиль{маржа-дно:0 !важно;}</style><?endif?></div>   
   </div>   
   <div класс="punkt_menu"><div id="текст"><a href="$HOME_PAGE_LINK$">Главная</a></div></div><div класс="punkt_menu"><div id="текст"><a href="$HOME_PAGE_LINK$forum">Форум</a></div></div><div класс="punkt_menu"><div id="текст"><a href="$HOME_PAGE_LINK$load">Каталог файлов</a></div></div><div класс="punkt_menu"><div id="текст"><a href="$HOME_PAGE_LINK$ " новости">Новости</a></div></div><div класс="punkt_menu"><div id="текст"><a href="$HOME_PAGE_LINK$publ">Каталог статей</a></div></div><div класс="время" название="$DATE$">$TIME$</div><div класс="сайты"><div класс="значки"></div><?если($IS_NEW_PM$)?><a href="$PM_URL$" название="Личных сообщений:$UNREAD_PM$" целевой="_blank"><div класс="pstrue"></div></a><?еще?><div класс="psfalse" название="Личных сообщений нет"></div><?endif?></div></div>   
<script>   
функция пуск(){   
   $(".droper").css("дисплей","блок");   
   $(".droper").анимировать({непрозрачность:1},300);   
   $(".start").attr("onclick","start2()");   
};   
функция start2(){   
   $(".droper").fadeOut(300);   
   $(".droper").анимировать({непрозрачность:0},300);   
   $(".start").attr("onclick","start()");   
};   
</script>


- Создаем информеры:

1)Каталог файлов · Категории · Колонки: 1
2)Каталог статей · Категории · Колонки: 1
3)Новости сайта · Категории · Колонки: 1
4)Форум · Материалы · Последние обновленные темы · Материалы: 10 · Колонки: 1

В шаблон каждого информера вставляем код:

Код
<style>   
.li a{   
цвет:черный;   
обивка:3px;   
Ширина:276px;   
высота:авто;   
дисплей:inline-блок;   
маржа-дно:1.5px;   
маржа-топ:1.5px;   
текст-украшения:нет;   
границы-радиус:2px;   
-webkit-переход:все 0.3с легкость;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
}   
.li:навести курсор мыши на{   
фон:#00D0FF;  
курсор:указатель;   
-webkit-переход:все 0.3с легкость;   
}   
</style>   
<div класс="ли"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>


А в шаблон информера форума вставляем:

Код
<style>   
.li a{   
цвет:черный;   
обивка:3px;   
Ширина:276px;   
высота:авто;   
дисплей:inline-блок;   
маржа-дно:1.5px;   
маржа-топ:1.5px;   
текст-украшения:нет;   
границы-радиус:2px;   
-webkit-переход:все 0.3с легкость;   
шрифт-семья:'Arial';   
шрифт-Размер:10pt;   
}   
.li:навести курсор мыши на{   
фон:#00D0FF;  
курсор:указатель;   
-webkit-переход:все 0.3с легкость;   
}   
</style>   
<div класс="ли"><a href="$THREAD_URL$">$THREAD_TITLE$</a></div>




Меню, в, стиле, Windows, для, Ucoz

    
Game-Portals.3dn.ru - The Best.
Форум » Система Ucoz » Скрипты Меню » Меню в стиле Windows для Ucoz (Уникальный вид!)
  • Страница 1 из 1
  • 1
Поиск: