Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
ppippitto79 (12.09.2020)
oksanakisulka (04.09.2020)
frost154medium (12.08.2020)
jeri (11.08.2020)
sashazhi (09.08.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню HTML и CSS с интересным эффектом для Ucoz
Вертикальное меню HTML и CSS с интересным эффектом для Ucoz
Бармен
Бармен
Пропуск №: 63
Регистрация: 12.04.2014
Ранг: Познающий
Сообщений: 74
Карма: 1 | Хабар: 8
stalkers
Дата: Суббота, 06.06.2015, 17:13/ Сообщение №: 1

Информация: Многие веб - мастера при создании сайта не хотят тратить время на создание некоторых элементов сайта которые уже существуют, им только осталось скопировать код и подогнать под стиль сайта. В вертикальном меню навигации используется две части кода. Один CSSкод, который отвечает за внешний вид меню и второй HTML код, который отвечает за позиционирование меню. Поэтому опишу, куда вставить CSS код, а куда HTML код, если вы решили создать веб сайт своими руками.
Автор: ˙·٠•๑۩•Ooops•۩๑•٠·˙
Установка: Туда, где хотите видеть меню:
Код
<ul class="ca-menu">    
   <li><a href="/load/programmy/15" title=""><h2 class="ca-main"><b>•Программы</b></h2></a></li>    
   <li><a href="/load/video_uroki/16" title=""><h2 class="ca-main"><b>•Видеоуроки</b></h2></a></li>    
   <li><a href="/load/igry/4" title=""><h2 class="ca-main"><b>•Игры на PC</b></h2></a></li>    
   <li><a href="/load/drugoe/7" title=""><h2 class="ca-main"><b>•Другое</b></h2></a></li>    
   <li><a href="/load/web_masteram/6" title=""><h2 class="ca-main"><b>•Web разработки для Ucoz</b></h2></a></li>    
   <li><a href="/Photoshop/photoshop.html" target="_blank"><h2 class="ca-main"><b>•Photoshop online</b></h2></a></li>    
   <li><a href="/html-redactor.html" target="_blank"><h2 class="ca-main"><b>•HTML Редактор</b></h2></a></li>    
   <li><a href="http://codepen.io/pen" target="_blank"><h2 class="ca-main"><b>•Редактор PRO</b></h2></a></li>    
   <li><a href="/color-html.htm" target="_blank"><h2 class="ca-main"><b>•Web color</b></h2></a></li>    
   <li><a href="/sistemnye_peremennye_ucoz.html" target="_blank"><h2 class="ca-main"><b>•Code uCoz</b></h2></a></li>    
   <li><a href="http://your-world.at.ua/load/drugoe/kljuchi_dlja_eset_nod32_kaspersky_avast_dr_web_avira_pc/7-1-0-1240" title=""><h2 class="ca-main"><b>•Сборникключейкантивирусам</b></h2></a></li>    
   </ul>

Вставьте код в CSS:
Код
/* menu */    
   .ca-menu li a{    
   white-space:   
   text-transform: uppercase;    
   color: #000000;    
   padding: 1px 0px;    
   margin: 0px;    
   background: url(""); /* - фон ячейки кода*/    
   -webkit-transition: all 0.4s ease-in-out;    
   -moz-transition: all 0.4s ease-in-out;    
   -o-transition: all 0.4s ease-in-out;    
   -ms-transition: all 0.4s ease-in-out;    
   transition: all 0.4s ease-in-out;    

   }    
   .ca-menu li{    
   width: 100%;    
   overflow: hidden;    
   display: block;    
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);    
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);    
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);    
   margin-bottom: 4px;    
   -moz-box-shadow: 0px 0px 14px #0C0C0C;    
   -webkit-box-shadow: 0px 0px 14px #0C0C0C;    
   box-shadow: 0px 0px 14px #0C0C0C;    

   }    
   .ca-menu li:last-child{    
   margin-bottom: 0px;    

   }    
   .ca-menu li a{    
   text-align: center;    
   display: block;    
   width: 100%;    
   text-shadow:2px 2px 4px #000000;    
   position:relative;    
   }    
   .ca-menu:hover li a{    
   color: transparent;    
   }    
   .ca-menu li a:hover{    
   background:;    
   text-shadow:2px 2px 4px #000000;    
   color: ;    
   }    
   .ca-main{    
   width: 100%;    
   text-align: left;    
   font-size: 14px;    
   -webkit-transition: all 300ms linear;    
   -moz-transition: all 300ms linear;    
   -o-transition: all 300ms linear;    
   -ms-transition: all 300ms linear;    
   transition: all 300ms linear;    
   }    
   .ca-menu li:hover{    
   border-color:   
   background: url(""); /* - фон ячейки кода*/    
   }    
   .ca-menu li:hover .ca-main{    
   color: #000000;    
   font-size: 14px;    
   }    
   /* ----------------------- */

Все готово!




Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню HTML и CSS с интересным эффектом для Ucoz
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-21.09.2020