Главная | Регистрация | Вход Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Всё для ucoz » Меню для ucoz » Меню в стиле Windows для ucoz
Меню в стиле Windows для ucoz
АдминДата: Понедельник, 19.11.2012, 20:13 | Сообщение # 1
Майор
Группа: Администраторы
Сообщений: 83
Репутация: 0
Статус:

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

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

Установка.
В CSS:
Code
.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(в верх сайта):
Code
<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

В шаблон каждого информёра вставляем код
Code
<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>

А в шаблон информёра форума вставляем:
Code
<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!

Готово!
Прикрепления: 2505_images.rar (51.5 Kb)
 
Форум » Всё для ucoz » Меню для ucoz » Меню в стиле Windows для ucoz
  • Страница 1 из 1
  • 1
Поиск:

QuesT.ucoz.ua
Бесплатный конструктор сайтов - uCoz