Главная » Файлы » Скрипты для uCoz » Меню
Горизонтальное меню в стиле Vista для uCoz
21.06.14, 17:47:33



Установка:

Управление дизайном сайта -- Таблица стилей (CSS)

В самый верх вставляем:
Код
img{border: 0pt;}
  #vista_toolbar {
  float:left;
  font:normal 12px 'Trebuchet MS','Arial';
  margin:0;
  padding:0;
  }
  #vista_toolbar ul {
  background-image:url(back.gif);
  background-repeat:repeat-x;
  float:left;
  line-height:32px;
  list-style:none;
  margin:0;
  padding:0 10px 0 10px;
  width:500px;
  }
  #vista_toolbar li {
  display:inline;
  padding:0;
  }
  #vista_toolbar a {
  color:#FFF;
  float:left;
  padding:0 3px 0 3px;
  text-decoration:none;
  }
  #vista_toolbar a span {
  display:block;
  float:none;
  padding:0 10px 0 7px;
  }
  #vista_toolbar a span img {
  border:none;
  margin:8px 4px 0 0;
  }
  #vista_toolbar a:hover{
  background: url(left.png) no-repeat left center;
  }
  #vista_toolbar a:hover span {
  background:url(right.png) no-repeat right center;
  }
  #vista_toolbar a.right {
  float:right;
  }


Следующий код туда, где хотим видеть меню:
Код
<head>
  <title>Vista toolbar с помощью CSS</title>
  <link href="style.css" media="all" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div>
  <h1>Vista toolbar с помощью CSS</h1>
  </div>
  <div id="vista_toolbar">
  <ul>
  <li><a href="#"><span><img align="left" src="add.gif" alt="Добавить" />Добавить</span></a></li>
  <li><a href="#"><span><img align="left" src="mail.gif" alt="Почта" />Почта</span></a></li>
  <li><a href="#"><span><img align="left" src="chart.gif" alt="Статистика" />Статистика</span></a></li>
  <li><a href="#"><span><img align="left" src="mona.gif" alt="Фотогалерея" />Фотогалерея</span></a></li>
  <li><a class="right" href="#"><span><img align="left" src="sos.gif" alt="Помощь" />Помощь</span></a></li>
  </ul>
  </div>
  </body>


Всё smile
Категория: Меню | Добавил: Apocalypse | Теги: горизонтальное, ucoz, Vista, стиле, для, Меню
Просмотров: 365 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: