Блог
Главная » Меню » Простое стильное горизонтальное меню на css3
18:21



Простое горизонтальное меню, которое, думаю, прекрасно впишется в любой дизайн

Для начала посмотрите ДЕМО

Переходим к установке:

После /head вставляйте:
Code

<style>  
#breadcrumb  
{  
  font: 11px Arial, Helvetica, sans-serif;  
  background-image:url('/images/bc_bg.png');  
  background-repeat:repeat-x;  
  height:30px;  
  line-height:30px;  
  color:#9b9b9b;  
  border:solid 1px #cacaca;  
  width:100%;  
  overflow:hidden;  
  margin:0px;  
  padding:0px;  
}  
#breadcrumb li  
{  
  list-style-type:none;  
  float:left;  
  padding-left:10px;  
}  
#breadcrumb a  
{  
  height:30px;  
  display:block;  
  background-image:url('/images/bc_separator.png');  
  background-repeat:no-repeat;  
  background-position:right;  
  padding-right: 15px;  
  text-decoration: none;  
  color:#454545;  
}  
.home  
{  
  border:none;  
  margin: 8px 0px;  
}  

#breadcrumb a:hover  
{  
  color:#35acc5;  
}  
</style>


Далее код самого меню (Вставляйте сразу после предыдущего кода):
Code

<ul id="breadcrumb">  
  <li><a href="#" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>  
  <li><a href="#" title="Sample page 1">Sample page 1</a></li>  
  <li><a href="#" title="Sample page 2">Sample page 2</a></li>  
  <li><a href="#" title="Sample page 3">Sample page 3</a></li>  
  <li>Current page</li>  
</ul>


Теперь залейте все картинки из прикреплённого архива в папку images

Категория: Меню

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?