| ntsq | Дата: Понедельник, 10.12.2012, 21:35 | Сообщение # 1 |
|
| Здравствуйте. В этом уроке мы вместе с Вами смастерим интересное и до невозможного простое меню, используя только 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 готово! Теперь Вы можете наслаждаться результатом своей работы. А у меня на этом все, до новых встреч, друзья!
gg
|
| |
| |
