Xlam Portal

Неплохое горизонтальное меню с использованием css

☠Вагид☠™ — Sun, 12 Apr 2026 08:18:44 GMT

Довольно простое меню, но мне оно очень понравилось. Здесь не используются скрипты и изображения. Только html и css.

В то место, где вам нужно меню, ставим следующий код:

Code

Главная

Новости

Контакты

Портфолио

Форум

Редактируйте ссылки по своему усмотрению.

Затем, в ПУ-->Управление дизайном-->CSS. В любое место добавляем это:

Code

ul {
   font-family: Georgia;
   list-style-type: none;
   font-size: 14px;
   color: #fff;
   height: 50px;
   width: 510px;
   margin: 0 auto;
   padding-top: 15px;
   }
  ul li {
   float: left;
   padding: 1px;
   text-align: center;
   }
  ul li a {
   float: left;
   display: block;
   background: #0094D6;
   text-decoration: none;
   color: #fff;
   position: relative;
   }
  ul li a:hover {
   background: #FF7700;
   z-index: 10;
   margin: 0 -10px;
   top: -10px;
   opacity: 0.7;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   }
  ul li a span {
   float: left;
   display: block;
   padding: 10px 0;
   text-decoration: none;
   color: #fff;
   width: 100px;
   cursor: pointer;
   }
  ul li a:hover span {
   width: 120px;
   padding: 20px 0;
   }

выдвижное меню

☠Вагид☠™ — Sun, 31 Jul 2011 13:58:51 GMT

Неплохое выдвижное меню для ucoz для темных дизайнов.

Сначала скачайте картинки и залейте в корень сайта.

В СSS это:

Code

/* МЕНЮ */
    a.menu_tip1 {display:block; width:172px; height:18px; text-align:left; background:url('/menu_playcheat/b_nab_mn.png'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 14px;}
    a.menu_tip2 {display:block; width:152px; height:18px; text-align:left; background:url('/menu_playcheat/b_nab_mn.gif'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 35px;}
    a.menu_tip3 {display:block; width:152px; height:18px; text-align:left; background:url('/menu_playcheat/b_nab_mn.gif'); font-size:8pt; font-family:tahoma, arial; padding:5px 0 0 35px;}
    a.menu_tip1:link, a.menu_tip2:link, a.menu_tip3:link { text-decoration:none; color:#848484;}
    a.menu_tip1:visited, a.menu_tip2:visited, a.menu_tip3:visited { text-decoration:none; color:#848484;}
    a.menu_tip1:hover, a.menu_tip2:hover, a.menu_tip3:hover { text-shadow:0 0 5px #fff; -moz-border-radius:3px;-webkit-border-radius:3px; border-radius: 3px; color:#fff; background-position:0px -23px;}
    a.menu_tip1:active, a.menu_tip2:active, a.menu_tip3:active { text-shadow:0 0 5px #fff; -moz-border-radius:3px;-webkit-border-radius:3px; border-radius: 3px; color:#fff; background-position:0px -23px;}
    /* ---- */

В любое место где хотите чтоб было меню:

Code