分享一个常用的三级导航分类,鼠标悬浮在各个导航按钮试试吧。
HTML
<ul class="menu ul">
<li><h3 class="selected"><a href="http://www.sucaihuo.com" class="depth_1">网站首页</a></h3></li>
<li><h3><a href="http://www.sucaihuo.com/templates" class="depth_1">我的素材火</a></h3></li>
<li>
<h3 id="menu_01"><a href="http://www.sucaihuo.com" class="depth_1">设计素材</a></h3>
<ul id="children_01" class="children">
<li>
<h3 id="menu_02c"><a href="http://www.sucaihuo.com" class="depth_2"><span class="icon10"></span>PSD分层</a></h3>
<ul id="children_02c">
<li><a href="http://www.sucaihuo.com" class="depth_3">其他</a></li>
</ul>
</li>
</ul>
</li>
<li><h3><a href="http://www.sucaihuo.com" class="depth_1">原创作品</a></h3></li>
<li><h3><a href="http://www.sucaihuo.com/js" class="depth_1">网页特效</a></h3></li>
<li><h3><a href="http://www.sucaihuo.com/topic" class="depth_1">设计趋势</a></h3></li>
</ul>
jQuery
$(function() {
var navstr = '';
for (c in vars = '0'.split(',')) {
$('#menu_' + vars[c]).addClass('selected');
}
$('#wrap-nav ul.menu > li').hover(function() {
$(this).find('.children').show();
if ($(this).find('.children').length) $(this).addClass('hover');
},
function() {
$('.children').hide();
$(this).removeClass('hover');
});
$('#wrap-nav ul.menu h3, #wrap-nav ul.menu ul.children > li, #wrap-cats h3').hover(function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791