Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
  • Страница 1 из 1
  • 1
Вертикальное меню 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;    
   }    
   /* ----------------------- */

Все готово!



  • Страница 1 из 1
  • 1
Поиск:

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