Post date: Dec 9, 2013 10:57:28 AM
HTML код:
<style type="text/css">
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0px;
padding: 0px;
width: 250px;
}
ul#menu a,ul#menu span { display: block; text-decoration: none; }ul#menu li { margin-top: 1px; }ul#menu li a,ul#menu li span {background: #333333;color: #FFFFFF;padding: 7px;}ul#menu li a:hover,ul#menu li span:hover { background: #000000; }
ul#menu li ul li a {
background: #CCCCCC;
color: #000000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #AAAAAA;
border-left: 5px #000000 solid;
padding-left: 15px;
}
</style>
HTML код:
<ul id="menu">
<li><span>Скрипты</span>
<ul>
<li><a href="log_info.php">Скрипт записи логов</a></li>
<li><a href="current_time.php">Текущая дата и время</a></li>
<li><a href="slide_show_jquery.php">Слайдшоу на jQuery</a></li>
<li><a href="scroll_to_top.php">Кнопка вверх</a></li>
</ul>
</li>
<li><span>Онлайн сервисы</span>
<ul>
<li><a href="csscompressor.php">Сжатие CSS кода онлайн</a></li>
<li><a href="javascriptcompressor.php">Сжатие JavaScript кода</a></li>
<li><a href="opennet.php">Калькулятор диапазонов IP</a></li>
<li><a href="qrcoder.php">Онлайн генератор QR кодов</a></li>
<li><a href="gtmetrix.php">Анализ скорости сайта</a></li>
</ul>
</li>
<li><a href="http://usefulscript.ru/support.php">Поддержка</a></li>
<li><a href="http://usefulscript.ru/forum/">Форум</a></li>
<li><span>Хитрости</span>
<ul>
<li><a href="csssprites.php">Использование CSS спрайтов</a></li>
<li><a href="rgb_cod_color.php">HEX и RGB коды цветов</a></li>
<li><a href="no_www.php">Убрать www из адреса сайта</a></li>
</ul>
</li>
</ul>
<script>
function init_menu() {
$('#menu ul').hide();
$("#menu li ul:has(li.active)").show();
$('#menu li span').click(
function() {
var checkElement=$(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; }
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
</script>