Здравствуйте. В этом уроке мы вместе с Вами смастерим интересное и до невозможного простое меню, используя только CSS. Оригинальность этого меню будет заключаться в том, что вместо пункта "Главная" будет подобрано специальное изображение, а уже дальше пойдут все остальные пункты меню. Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:
Шаг 1. HTML-конструкция меню.
Да, если Вы уже заметили наше меню будет напоминать меню с сайта Apple.com. Как и всегда, сначала мы должны составить HTML-конструкцию нашего будущего меню. Она будет конечно же очень простой. Вы и сами могли ее, в принципе, сделать, однако я уже позаботился об этом и разместил специально для для Вас нижеприведенный код:
HTML:
<ul id="menu">
<li><a href="http://ruseller.com/index.php" title="Главная"><img src="images/home.png" alt="Home" class="home" /></a></li>
<li><a href="http://evgeniypopov.ru" title="Форум поддержки">Форум поддержки</a></li>
<li><a href="http://evgeniypopov.com" title="Блог">Блог</a></li>
<li><a href="http://ruseller.com/goodies.php" title="Товары">Товары</a></li>
<li><a href="http://ruseller.com/about.php" title="О нас">О нас</a></li>
</ul>
Шаг 2. Дизайн меню
Теперь приступим к заключительной фазе разработки нашего меню. Т. к. наше меню сделано только лишь с помощью CSS, то нам остается всего вставить между тегами <head> и </head> следующий css-код:
CSS:
<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;
}
#menu {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;
}
#menu li {list-style-type:none;
float:left;
padding-left:10px;
}
#menu 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;
}
#menu a:hover{color: gray;
}
</style>
Заключение.
Ну вот и все, наше простое меню на CSS готово! Теперь Вы можете наслаждаться результатом своей работы. А у меня на этом все, до новых встреч, друзья!
С искренним уважением Ваш проводник в мире CSS - М. К.Wink