Здравствуйте.
Никак не могу организовать меню вида:
<div id="example1">
<ul id="menu1" class="example_menu">
<li><a class="expanded">Компьютеры</a>
<ul>
<li><a href="#">Видеокарты</a></li>
<li><a href="#">Материнские платы</a></li>
<li><a href="#">Процессоры</a></li>
<li class="active"><a href="#">Звуквые платы</a></li>
</ul>
</li>
<li><a class="collapsed">Сотовые телефоны</a>
<ul>
<li><a href="#">Розовенький телефончик</a></li>
<li><a href="#">Ретро труба</a></li>
<li><a href="#">Барабанный телефон</a></li>
<li><a href="#">Мобила</a></li>
</ul>
</li>
</ul>
</div>
collapsed - закрытое меню
expanded - раскрытое меню
javascript используется...
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
// Slide
$(’#menu1 > li > a.expanded + ul’).slideToggle(’medium’);
$(’#menu1 > li > a’).click(function() {
$(this).toggleClass(’expanded’).toggleClass(’collapsed’).parent().find(’> ul’).slideToggle(’medium’);
});
$(’#example1 .expand_all’).click(function() {
$(’#menu1 > li > a.collapsed’).addClass(’expanded’).removeClass(’collapsed’).parent().find(’> ul’).slideDown(’medium’);
});
$(’#example1 .collapse_all’).click(function() {
$(’#menu1 > li > a.expanded’).addClass(’collapsed’).removeClass(’expanded’).parent().find(’> ul’).slideUp(’medium’);
});
}, 250);
});
</script>
/* Menu */
#example1 {
float: left;
}
.expand_all,
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 240px;
}
.example_menu ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
#menu1 {
margin: 0;
}
#menu1 li,
.example_menu li {
background-image: none;
margin: 0;
padding: 0;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 220px;
}
.example_menu a {
color: white;
cursor: pointer;
display: block;
text-decoration:underline;
margin-left: 0;
font-size:13px;
padding: 13px 20px 11px 24px;
width: 196px;
}
* html .example_menu a { width:240px; }
.example_menu a.expanded {
background: url(’images/pipi.gif’) no-repeat 22px top;
}
.example_menu a.collapsed {
background: url(’images/pipi.gif’) no-repeat 22px top;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul {
padding:5px 0 7px 0;
margin:0 0 0 1px;
width:238px;
background:url(images/ttp.gif) top center no-repeat #036283;
}
.example_menu ul a {
color: #00baf8;
display: block;
font-weight: normal;
font-size:12px;
border:0;
padding: 4px 10px 4px 31px;
background:url(images/tochka_sin.gif) 22px 10px no-repeat;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background:url(images/tochka_sin.gif) 22px 10px no-repeat;
text-decoration: none;
}
.example_menu li.active a {
background:url(images/tochka_sin2.gif) 22px 10px no-repeat;
color:#ff7d51;
text-decoration:none;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
.example_menu .footer {
background: transparent url(’images/footer.jpg’) no-repeat 0 0;
height: 9px;
width: 202px;
}
.example_menu .footer span {
display: none;
}
wikibooks(ru) Ditto(en) | Wayfinder e-book | Заметки и о MODx
