Создаём красивое меню на CSS без использования JavaScript.
Задача создать меню сайта постает каждый раз когда, когда хочется сделать сайт непохожий на предыдущий. Сейчас существует множество разных DHTML MENU Builder, которые сами могут сделать красивые меню, или заготовки для меню. Конечно, это всё хорошо, но как быть, когда заказчик хочет только такое меню, как в макете? (Шаг влево, шаг вправо расстрел.) В принципе можно подредактировать автоматически созданное меню, но там иногда бывают такие вещи, что не каждый программист разберёт. А чуть не забыл, в автоматическом меню слишком много ненужного кода, и там очень часто проскакивает JavaScript, а заказчик хочет без JavaScript. Как быть в такой ситуации?
Я предлагаю создать меню самому с помощью CSS. Все меню, созданные на основе свойств CSS базируются на таких событиях ссылки, как:
a:hover – наведен курсор на ссылку;
a:link – ни разу не посещаемая вами ссылка;
a:visited – вы уже здесь были;
a:active – вы нажали на ссылку.
Думаю, более опытные пользователи уже поняли, как можно использовать эти события, ну а для тех кто только учиться объясню более подробно, и приведу пример CSS динамичного, красивого меню. Для того, чтобы создать меню достаточно объединить события hover и active, а также link и visited.
Пример CSS меню:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<style>
*{
background:none;
padding:0;
margin:0;
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
font-family:"Times New Roman";
font-size:14px;
}
ul{
position:relative;
left:100px;
width:200px;
background-color:#CCCCCC;
height:auto;
list-style-type:none;
}
ul li a{
color:#FFFF00;
text-decoration:none;
}
ul li a div{
padding-left:20px;
width:180px;
height:20px;
border-bottom:1px dotted #FF0000;
}
ul li a:link div, ul li a:visited div{
background-color:#3399FF;
}
ul li a:hover div, ul li a:active div{
background-color:#FF0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><div>1</div></a></li>
<li><a href="#"><div>2</div></a></li>
<li><a href="#"><div>3</div></a></li>
</ul>
</body>
</html>
В этом примере показано, как с помощью смены цвета можно сделать интересное меню для html страницы. Этот стиль: ul li a:link div, ul li a:visited div сработает когда ссылка не будет активная, а этот ul li a:hover div, ul li a:active div, когда над ссылкой проводятся какие-то действия.
Динамическое меню можно делать не только со сменой цвета, можно экспериментировать с display, width … Это ваша фантазия, с чем придумаете, с тем и экспериментируйте.