скачать сборник меню для 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 с графикой