Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
История Джона 2 (ОБТ) (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1416)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
Fugaz56 (09.08.2023)
Пряня (22.06.2023)
yaroslavcohevis80 (16.11.2022)
61373872 (12.08.2022)
vhaack72 (15.06.2022)
  • Страница 1 из 1
  • 1
Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Меню » Вертикальное меню HTML и CSS с интересным эффектом для Ucoz
Вертикальное меню HTML и CSS с интересным эффектом для Ucoz
Бармен
Группа: Бывалые
Ранг: Отмычка
Сообщений: 74
Карма: 19
Сообщение # 1
Дата: 06.06.2015 в 17:13

Информация: Многие веб - мастера при создании сайта не хотят тратить время на создание некоторых элементов сайта которые уже существуют, им только осталось скопировать код и подогнать под стиль сайта. В вертикальном меню навигации используется две части кода. Один 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;    
   }    
   /* ----------------------- */

Все готово!



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

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