Меню в стиле Windows
21.11.2013 в 22:44
Автор: babygirl | Комментариев (0) | Просмотров: 658 | Скачали: 0
Меню в стиле Windows
Описание файла:
Оригинальное меню расположенное в самом низу сайта, как на Windows. Не требует скачивания, и прост в установке.
Этот код вставляем в CSS:





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

А этот в HTML(вверх сайта):

Код
<span style="font-size: 8pt;"><div class="bottom_bar">  </span></div><div>  <div class="start" onclick="start()"></div>  </div><div>  <div class="droper">  </div><div>  <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><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>  </div><div>  <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><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>  </div><div>  <div class="ramka">$MYINF_25$<style>.ramka{display:block;}  </div><div>  .profile{margin-bottom:0 !important;}</style>$MYINF_26$<style>.ramka{display:block;}  </div><div>  .profile{margin-bottom:0 !important;}</style>$MYINF_27$<style>.ramka{display:block;}  </div><div>  .profile{margin-bottom:0 !important;}</style>$MYINF_28$<style>.ramka{display:block;}  </div><div>  .profile{margin-bottom:0 !important;}</style></div>  </div><div>  </div>  </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><a href="$PM_URL$" title="Личных сообщений:$UNREAD_PM$" target="_blank"><div class="pstrue"></div></a><div class="psfalse" title="Личных сообщений нет"></div></div></div>  </div><div><script>  </div><div>function start(){  </div><div>  $(".droper").css("display","block");  </div><div>  $(".droper").animate({opacity:1},300);  </div><div>  $(".start").attr("onclick","start2()");  </div><div>};  </div><div>function start2(){  </div><div>  $(".droper").fadeOut(300);  </div><div>  $(".droper").animate({opacity:0},300);  </div><div>  $(".start").attr("onclick","start()");  </div><div>};  </div><div></script>

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

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

В шаблон всех информеров кроме 4 вставляем этот код:

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

А в информерa форума вставляем этот код:

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

Незабудьте подключить библиотеку jQuerry!


Скачать файл

Инструкция по установке шаблонов:
Инструкция, приведенная ниже, поможет Вам быстро установить скачанный у нас с сайта шаблон. Для правильной установки прочтите, пожалуйста, внимательно все пункты инструкции, дабы не возникло дополнительных вопросов.
1. Прежде всего загружаем содержимое папки Файловый Менеджер на Ваш сайт.
2. Далее заходим в Дизайн - Управление дизайном (CSS), копируем содержимое файла Таблица стилей и вставляем с заменой. После используем текстовый файл Конструктор шаблонов для создания каркаса дизайна (Дизайн - Конструктор шаблонов).
3. И в заключении устанавливаем сами модули, находятся они в папках с названием, соответствующему названию модуля.


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]