Выдвигающиеся меню на css для uCoz и не только.

Раздел uCoz

Photoshop

Мини-чат

Мы ВКонтакте

Выдвигающиеся меню на css для uCoz и не только.

Простое без лишних наворотов выдвигающиеся меню для uCoz, можно использовать не только в юкозе, но и на других движках или даже на динамичных html файлах!

Это в то место где хотите видеть меню

Код

<div class="blogroll">
  <p>проверка</p>
  <ul>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  <li><a href="#">Проверка</a></li>
  </ul>
  </div>

Это в css вашего дизайна

Код

.blogroll {
  position:relative;
  width:274px;
}
.blogroll p {
  font:13px Verdana,Arial,Helvetica, sans-serif; color:#666;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff;
  width:274px;
  height:25px;
  background:url(http://uc-life.ru/Blog_fon-1-.png) 0 0 no-repeat;
  margin:0;
  padding: 4px 0px 0px 10px;
}

.blogroll ul {
  list-style:none;
  width:272px;
  background:#F4F5F6;
  border:1px solid #d0d0d0;
  border-bottom: none;
  border-width:0 1px 1px 1px;
  position:absolute;
  left:0;
  top:25px;
  margin:0;
  padding:0;
}

.blogroll ul a:link,
.blogroll ul a:visited {
  display:block;
  color:#555;
  font-weight:normal;
  text-decoration:none;
  width:252px;
  padding:4px 10px 4px 10px;
  border-bottom: 1px solid #d0d0d0;
  border-top: 1px solid #fff;
}

.blogroll ul a:hover,
.blogroll ul a:active {
  background:#fff;
}

.blogroll {
  height:25px;
  overflow:hidden;
}

.blogroll:hover {
  overflow:visible;
}

Всего комментариев: 0