Пополнить WebMoney
Вывод WebMoney
Обмен WebMoney
Кредит WebMoney

Горизонтальное меню на CSS - простое



на главную nocrisise.ruназ к меню на CSS


скачать сборник меню для CSS - красивого и готового к работе

Простое горизонтальное меню за 5 сек. Скопируйте и вставьте на вашу веб – страницу этот код (HTML/CSS).
Меню сделано чисто на CSS и без вмешательства графики.

Cоздайте конструкцию меню в HTML


<div id="menu">
<ul>
<li><a href="#" class="current">

<span>Домой</span></a></li>
<li><a href="#"><span>
о нас</span></a></li>
<li><a href="#"><span>
работы</span></a></li>
<li><a href="#"><span>
партнёры</span></a></li>
<li><a href="#"><span>
Контакты</span></a></li>
</ul>
</div>


Можно создать на вашем сайте простое, светлое меню. чайник, HTML ДЛЯ ЧАЙНИКОВ

горизонтального меню на CSS

В CSS файле пишем.

#menu {
font-size: 0.85em;
height:2.8em;
color: #000;
}

#menu span {
float:left;
color: #555;
background-color: #e8e8e8;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 7px 18px;
margin-right: 2px;
}

#menu a {
display:block;
float:left;
color: #003388;
background-color: #f5f5f5;
text-align:center;
padding: 8px 18px;
margin-right: 2px;
}

#menu a:hover {
color: #333;
background-color: #fff;
}


Можно создать на вашем сайте простое, тёмное меню.

 


Пример горизонтального меню на CSS в темном фоне с низу.

Поменяйте кодировку CSS на следующий код.

горизонтального меню на CSS

В CSS файле пишем.

#menu {
font-size: 0.85em;
height:3.2em;
color: #000;
text-align:center;
background-color: #232323;
}

#menu div {
width:44em;
margin: auto;
}

#menu span {
float:left;
color: #999;
background-color: #000;
padding: 10px 18px;
}

#menu a {
display:block;
float:left;
color: #e8e8e8;
background-color: #232323;
text-align:center;
padding: 10px 18px;
text-decoration: none;
}

#menu a:hover {
color: #ccc;
background-color: #000;
border-top: 4px solid #e8e8e8;
padding: 6px 18px 8px 18px;
}



По теме:

CSS

меню для сайтов ucoz

 

 

 

 

 

Горизонтальное меню на CSS с графикой


Понравилась статья? - добавь ее себе!


 





сайт-визитка / шаблон сайта / обработка фотографий / дизайн афиши, обложки книг, журнал, флаеры и т.д.
 
 
Подробней





nocrisise.ru © 2009-2012