Меню в стиле Windows


Меню в стиле Windows

3062
8.4 из 10
Проголосовало: 10






Меню в стиле Windows.

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

Минус: плохая графика, если есть время нарисуйте графику хорошую, я заменю.

Пишите пожелания, чего ещё добавить. В ЛС пишем если нужно настроить меню под ваш сайт.

Приступим к установке:

1)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;  
  }


2)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>


3)Создаём информёры:

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!

Готово!
Автор публикации: Загрузка
Загрузка
Supermenыч, это его n материал
  • Всего комментариев: 5

Вовчик
0
Вовчик написал: Написано 19 Ноября 2012 в 20:19
Комментарий №4
Supermenыч, ты делал или нет?

Supermenыч
0
Supermenыч написал: Написано 20 Ноября 2012 в 15:12
Комментарий №5
Я, а кто ещё-то

Supermenыч
0
Supermenыч написал: Написано 18 Ноября 2012 в 12:45
Комментарий №3
когда кинете в корень, то название станет на английском языке, ничё менять ненадо

Supermenыч
0
Supermenыч написал: Написано 18 Ноября 2012 в 12:41
Комментарий №2
я одну фигню забыл написать: картинки кидаем в корень сайта, демо сайт:
, измените плиз

Muşatinu
0
Muşatinu написал: Написано 18 Ноября 2012 в 12:31
Комментарий №1
путы к картинками
Code
  background:url("/punkt.png");


Hommer Facepalm

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    402
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: