По вопросам сотрудничества и рекламы на портале MixliP, обращаться на почту admin@turklib.ru

MixliP - Территория вебмастера! На нашем сайте вы найдете все для веб-мастеров и не только =) ! Различные скрипты для вашего сайта. И еще на нашем сайте немало софта! Заходи не пожалеешь!

МЕНЮ В СТИЛЕ WINDOWS ДЛЯ UCOZ

Автор: Вячеслав 18-02-2013, 14:42 Все для СайтА » Иконки для uCoz

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

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

Установка.

В CSS:

Код

.bottom_bar{  
  font-family:'Arial';  
font-size:10pt;  
opacity:0.9;  
height:29px;  
background:-webkit-linear-gradient(right,#074286,#0874B4);  
  background:-moz-linear-gradient(right,#074286,#0874B4);  
  background:-o-linear-gradient(right,#074286,#0874B4);  
  background:linear-gradient(right,#074286,#0874B4);  
width:100%;  
position:fixed;  
bottom:0;  
border-top:1px solid #00466E;  
-webkit-box-shadow:inset 0 1px #73C3F4,0 0 3px black;  
  -moz-box-shadow:inset 0 1px #73C3F4,0 0 3px black;  
  -o-box-shadow:inset 0 1px #73C3F4,0 0 3px black;  
  box-shadow:inset 0 1px #73C3F4,0 0 3px black;  
z-index:1;  
}  
.time{  
  font-family:'Arial';  
font-size:10pt;  
float:right;  
color:white;  
text-shadow:0px 0px 6px black;  
font-family:'Arial';  
font-size:10pt;  
padding:7px 7px 6px 7px;  
  margin-right:5px;  
}  
.punkt_menu{  
float:left;  
opacity:1;  
color:white;  
  background:url("/punkt.png");  
border-radius:1.5px;  
margin-left:4px;  
width:159px;  
height:29px;  
margin-top:-1px;  
  font-family:'Arial';  
font-size:10pt;  
}  
.punkt_menu:hover{  
cursor:pointer;  
width:158px;  
margin-left:5px;  
  background:url("/punkt_vyd.png");  
}  
.punkt_menu:active{  
  background:url("/punkt_nazh.png");  
width:159px;  
margin-left:4px;  
}  
.start{  
display:inline-block;  
float:left;  
  background:url("/pusk1.png");  
width:48px;  
height:29px;  
margin-top:-1px;  
}  
.start:hover{  
  background:url("/pusk.png");  
cursor:pointer;  
}  
.droper{  
padding:9px;  
position:absolute;  
background:-webkit-linear-gradient(top,#0C95C8,#0D5570);  
  background:-moz-linear-gradient(top,#0C95C8,#0D5570);  
  background:-o-linear-gradient(top,#0C95C8,#0D5570);  
  background:linear-gradient(top,#0C95C8,#0D5570);  
border-top-left-radius:6px;  
border-top-right-radius:6px;  
border:1px solid #202020;  
-webkit-box-shadow:inset 0 1px 1px #ccc,2px 2px 5px #02161E;  
  -moz-box-shadow:inset 0 1px 1px #ccc,2px 2px 5px #02161E;  
  -o-box-shadow:inset 0 1px 1px #ccc,2px 2px 5px #02161E;  
  box-shadow:inset 0 1px 1px #ccc,2px 2px 5px #02161E;  
width:290px;  
height:auto;  
bottom:28px;  
z-index:2;  
display:none;  
cursor:default;  
  opacity:0;  
}  
.punkt_menu:hover #text{  
margin-left:14px !important;  
}  
.punkt_menu:active #text{  
margin-left:15px !important;  
}  
#text{margin-top:7px;margin-left:15px;font-size:10pt;text-shadow:0px 0px 6px black;font-family:'Arial';disply:inline-block;}  
#text a{  
text-decoration:none;  
color:white;  
}  
.icons{  
margin-top:5.5px;  
  background:url("/razd1.png");  
width:18px;  
height:18px;  
float:left;  
}  
.sites{  
width:auto;  
height:29px;  
float:right;  
display:inline-block;  
-webkit-transition:all 0.3s ease;  
  -moz-transition:all 0.3s ease;  
  -o-transition:all 0.3s ease;  
  transition:all 0.3s ease;  
margin-right:5px;  
}  
.profile{  
border-radius:3px;  
border:1px solid #606060;  
-webkit-box-shadow:0px 0px 2px #c0c0c0;  
  -moz-box-shadow:0px 0px 2px #c0c0c0;  
  -o-box-shadow:0px 0px 2px #c0c0c0;  
  box-shadow:0px 0px 2px #c0c0c0;  
background:white;  
padding:3px;  
width:282px;  
height:50px;  
  font-family:'Arial';  
font-size:10pt;  
  margin-bottom:37px;  
}  
.profile:hover{  
cursor:pointer;  
}  
.logoprofile{  
  background:url("/prof.png");  
width:50px;  
height:48px;  
}  
.li a{  
color:black;  
padding:3px;  
width:276px;  
height:auto;  
display:inline-block;  
margin-bottom:1.5px;  
margin-top:1.5px;  
text-decoration:none;  
border-radius:2px;  
-webkit-transition:all 0.3s ease;  
  -moz-transition:all 0.3s ease;  
  -o-transition:all 0.3s ease;  
  transition:all 0.3s ease;  
  font-family:'Arial';  
font-size:10pt;  
}  
.li:hover a{  
background:#00D0FF;  
cursor:pointer;  
-webkit-transition:all 0.3s ease;  
  -moz-transition:all 0.3s ease;  
  -o-transition:all 0.3s ease;  
  transition:all 0.3s ease;  
}  
.ramka{  
  font-family:'Arial';  
font-size:10pt;  
border-radius:3px;  
border:1px solid #606060;  
-webkit-box-shadow:0px 0px 2px #c0c0c0;  
  -moz-box-shadow:0px 0px 2px #c0c0c0;  
  -o-box-shadow:0px 0px 2px #c0c0c0;  
  box-shadow:0px 0px 2px #c0c0c0;  
background:white;  
padding:3px;  
width:282px;  
height:auto;  
margin-top:10px;  
margin-bottom:37px;  
-webkit-transition:all 0.3s ease;  
  -moz-transition:all 0.3s ease;  
  -o-transition:all 0.3s ease;  
  transition:all 0.3s ease;  
  display:none;  
}  
.off{  
  background:url("/vykl.png");  
width:54px;  
height:24px;  
position:absolute;  
bottom:3px;  
}  
#off:hover .off{  
  background:url("/vykl_2.png");  
cursor:pointer;  
width:54px;  
height:22px;  
bottom:4px;  
}  
#off{  
width:auto;  
height:24px;  
display:inline-block;  
color:white;  
position:absolute;  
bottom:7px;  
right:9px;  
padding:3px;  
-webkit-transition:all 0.2s ease;  
border-radius:3px;  
border:1px solid black;  
-webkit-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  -moz-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  -o-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
}  
#off:hover{  
-webkit-transition:all 0.2s ease;  
  -moz-transition:all 0.2s ease;  
  -o-transition:all 0.2s ease;  
  transition:all 0.2s ease;  
cursor:pointer;  
-webkit-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  -moz-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  -o-box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
  box-shadow:inset 0 1px 1px #ccc,0px 0px 2px #c0c0c0;  
}  
#off:active{  
-webkit-transition:all 0.2s ease;  
  -moz-transition:all 0.2s ease;  
  -o-transition:all 0.2s ease;  
  transition:all 0.2s ease;  
-webkit-box-shadow:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
  -moz-box-shadow:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
  -o-box-shadow:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
  box-shadow:0px 0px 2px #c0c0c0,inset 0 1px 1px #202020;  
}  
.pstrue{  
border-radius:100%;  
width:15px;  
height:15px;  
background:red;  
border:1px solid black;  
-webkit-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  -moz-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  -o-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
margin-top:6px;  
margin-left:2px;  
display:inline-block;  
}  
.pstrue:hover{  
cursor:pointer;  
}  
.pstrue:active{  
-webkit-box-shadow:inset 0 1px 3px black,inset 0 1px 2px #404040,0 0 2px #ccc;  
  -moz-box-shadow:inset 0 1px 3px black,inset 0 1px 2px #404040,0 0 2px #ccc;  
  -o-box-shadow:inset 0 1px 3px black,inset 0 1px 2px #404040,0 0 2px #ccc;  
  box-shadow:inset 0 1px 3px black,inset 0 1px 2px #404040,0 0 2px #ccc;  
}  
.psfalse{  
border-radius:100%;  
width:15px;  
height:15px;  
background:green;  
border:1px solid black;  
-webkit-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  -moz-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  -o-box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
  box-shadow:0 0 3px black,inset 0 1px 1px #ccc,0 0 2px #ccc;  
margin-top:6px;  
margin-left:2px;  
display:inline-block;  
}

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

Код

<div class="bottom_bar">  
  <div class="start" onclick="start()"></div>  
  <div class="droper">  
  <?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$" target="_blank" title="Войти в профиль" about="_blank" style="color:black;"><div class="profile"><div style="float:right;margin-top:17px;margin-right:140px;">$USERNAME$</div><div class="logoprofile"></div></div></a><?else?><a href="$LOGIN_LINK$" title="Войти на сайт" style="color:black;"><div class="profile"><div style="float:right;margin-top:17px;margin-right:130px;">Войдите на сайт</div><div class="logoprofile"></div></div></a><?endif?>  
  <?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$" title="Выход" style="color:white;"><div id="off"><div class="off"></div><div style="margin-left:54px;margin-top:4px;"></div></div></a><?ELSE?><a href="$LOGIN_LINK$" title="Вход" style="color:white;"><div id="off"><div class="off"></div><div style="margin-left:54px;margin-top:4px;"></div></div></a><a href="$REGISTER_LINK$" title="Регистрация" style="color:white;"><div id="off" style="right:80px;"><div style="margin-top:4px;padding-left:6px;padding-right:6px;">Регистрация</div></div></a><?endif?>  
  <div class="ramka"><?if($MODULE_ID$='load')?>$MYINF_25$<style>.ramka{display:block;}  
  .profile{margin-bottom:0 !important;}</style><?endif?><?if($MODULE_ID$='publ')?>$MYINF_26$<style>.ramka{display:block;}  
  .profile{margin-bottom:0 !important;}</style><?endif?><?if($MODULE_ID$='news')?>$MYINF_27$<style>.ramka{display:block;}  
  .profile{margin-bottom:0 !important;}</style><?endif?><?if($MODULE_ID$='forum')?>$MYINF_28$<style>.ramka{display:block;}  
  .profile{margin-bottom:0 !important;}</style><?endif?></div>  
  </div>  
  <div class="punkt_menu"><div id="text"><a href="$HOME_PAGE_LINK$">Главная</a></div></div><div class="punkt_menu"><div id="text"><a href="$HOME_PAGE_LINK$forum">Форум</a></div></div><div class="punkt_menu"><div id="text"><a href="$HOME_PAGE_LINK$load">Каталог файлов</a></div></div><div class="punkt_menu"><div id="text"><a href="$HOME_PAGE_LINK$news">Новости</a></div></div><div class="punkt_menu"><div id="text"><a href="$HOME_PAGE_LINK$publ">Каталог статей</a></div></div><div class="time" title="$DATE$">$TIME$</div><div class="sites"><div class="icons"></div><?if($IS_NEW_PM$)?><a href="$PM_URL$" title="Личных сообщений:$UNREAD_PM$" target="_blank"><div class="pstrue"></div></a><?else?><div class="psfalse" title="Личных сообщений нет"></div><?endif?></div></div>  
<script>  
function start(){  
  $(".droper").css("display","block");  
  $(".droper").animate({opacity:1},300);  
  $(".start").attr("onclick","start2()");  
};  
function start2(){  
  $(".droper").fadeOut(300);  
  $(".droper").animate({opacity:0},300);  
  $(".start").attr("onclick","start()");  
};  
</script>

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

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

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

Код

<style>  
.li a{  
color:black;  
padding:3px;  
width:276px;  
height:auto;  
display:inline-block;  
margin-bottom:1.5px;  
margin-top:1.5px;  
text-decoration:none;  
border-radius:2px;  
-webkit-transition:all 0.3s ease;  
  font-family:'Arial';  
font-size:10pt;  
}  
.li:hover a{  
background:#00D0FF;  
cursor:pointer;  
-webkit-transition:all 0.3s ease;  
}  
</style>  
<div class="li"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></div>

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

Код

<style>  
.li a{  
color:black;  
padding:3px;  
width:276px;  
height:auto;  
display:inline-block;  
margin-bottom:1.5px;  
margin-top:1.5px;  
text-decoration:none;  
border-radius:2px;  
-webkit-transition:all 0.3s ease;  
  font-family:'Arial';  
font-size:10pt;  
}  
.li:hover a{  
background:#00D0FF;  
cursor:pointer;  
-webkit-transition:all 0.3s ease;  
}  
</style>  
<div class="li"><a href="$THREAD_URL$">$THREAD_TITLE$</a></div>

Обязательно подключаем библиотеку jQuery!

Готово!

Просмотры: 2124 Комментарии (0)

Теги: МЕНЮ, В, СТИЛЕ, WINDOWS, ДЛЯ, uCoz, uCoz

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Владельцы и пользователи сайта MixliP.ru не осуществляют никакой продажи либо перепродажи программных и иных продуктов интеллектуальной собственности. На нашем сайте не хранится ни одного файла или документа, который нарушал бы смежное или авторское право.

Сайт MixliP.ru представляет собой набор новостей и ссылок на внешние общедоступные источники в сети Интернет, не подконтрольные администрации сайта MixliP.ru, а, следовательно, не несет никакой ответственности за их содержание.

Вся информация о программном обеспечении и скриптах, размещенная на данном сайте, предоставлена исключительно в ознакомительных целях и только для просмотра, и призвана помочь посетителям сайта MixliP.ru выбрать для себя и в последствии приобрести соответствующие лицензионные авторские программные продукты.

Читать полностью информацию правообладателям.

Наши друзья

Работы читателей:

Вордпресс. Как установить тему TemplateMonster на WordPress 2.5?

ДАМП САЙТА WEB2WORK

Магазин авто запчастей

Магазин наушников Monster Beats

Шаблон Freehold для CMS Sitebill

Дизайн для любого проекта

шаблон для фруктовой фермы

Шаблоны на Simpla CMS

Полезное