скачать сборник меню для CSS – красивого и готового к работе
Для любителей CSS, я покажу пример как сделать простое горизонтальное меню, только используя CSS и графики. Хоть это горизонтальное меню простое в написании, но зато красивое, лёгкая для загрузки и смотрится шикарно.
– просмотр горизонтального меню (пример)
– скачать исходник меню для CSS
Скопируйте и вставьте
<html>
<head>
<style type=”text/css”>
body {font: 11px Arial, Helvetica, sans-serif;
}
#menu {font: 11px Arial, Helvetica, sans-serif;
background-image:url(‘/wp-content/uploads/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;
}
#menu li {list-style-type:none;
float:left;
padding-left:10px;
}
#menu a {height:30px;
display:block;
background-image:url(‘/wp-content/uploads/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;
}
#menu a:hover{color: gray;
}
</style>
</head>
<body>
<div id=”menu”>
<ul>
<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>
<li><a href=”#”><span>Контакты</span></a></li>
</ul>
</div>
</body>
</html>
bc_separator.png – картинка прилагается к исходнику.
По теме:
Горизонтальное меню на CSS с графикой
