KODERS.KZ


Альфа-версия сайта

CSS меню с помощью Java Script

В этом уроке я расскажу Вам, как оформить красивое меню с выпадающим списком у себя на сайте, с помощью CSS и JavaScript. В коде присутствует тег<dt> (Definition Term). Он в основном используется для обозначения названия термина. Тег<ul> - создание списка.<li> - создание элемента списка.

Вот примерный код, который должен получиться:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>CSS меню с использованием Java Script</title>

<style type="text/css">
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

ul li a {
display: block;
background-color: #0a0698;
color: #ffffff;
width: 100px;
padding: 2px 0px 2px 5px;
text-decoration: none;
}

ul li a:hover {
background-color: #a50542;
color: #fff;
}

dt a {
display: block;
background-color: #0a0698;
color: #FFF;
width: 100px;
padding: 2px 0px 2px 5px;
text-decoration: none;
}

dt a:hover {
background-color: red;
color: #369;
}
</style>

</head>
<body>

<script type="text/javascript">
//<![CDATA[
function menu(ThisObj){
nav=document.getElementById(ThisObj).style
if(nav.display=="none"){
nav.display='block';
}else{
nav.display='none';
}
}
//]]>
</script>

<ul>
<li><a href="#" onclick="menu('div1');">Раздел 1</a></li>
<div style="display: none;" id="div1">
<dl>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
</dl>
</div>
</ul>
<ul>
<li><a href="#" onclick="menu('div2');">Раздел 2</a></li>
<div style="display: none;" id="div2">
<dl>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
</dl>
</div>
</ul>
<ul>
<li><a href="#" onclick="menu('div3');">Раздел 3</a></li>
<div style="display: none;" id="div3">
<dl>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
<dt><a href="#">Под раздел 1</a></dt>
</dl>
</div>
</ul>
</body>
</html>

Новое на сайте



Партнерка



Спонсоры

Студия KazART



При использовании любого материала с сайта, ссылка на koders.kz обязательна.