我正在创建一个类似于Very.co.uk的导航菜单
任何人都可以指出我在哪里开始和最佳做法的正确方向?
由于
答案 0 :(得分:4)
尝试Mega Drop Down Menus w/ CSS & jQuery
它有一个很好的教程和演示。
答案 1 :(得分:2)
这样的事情是基本的想法......
...的jQuery
$('#menu span').hide();
$('#menu li').hover(function() {
var offset = $(this).offset();
$(this).find('span').css('marginLeft', offset.left + 'px');
$(this).find('span').show();
var offsetRight = offset.left + $(this).find('span').width();
var ww = $(window).width();
var fixed = offset.left + $(this).width() - $(this).find('span').width();
if (offsetRight > ww) {
$(this).find('span').css('marginLeft', fixed + 'px');
}
else {
$(this).find('span').css('marginLeft', offset.left + 'px');
}
}, function() {
$(this).find('span').hide();
});
... CSS
var offset = $(this).offset();
$(this).find('span').css('marginLeft', offset.left + 'px');
$(this).find('span').show();
var offsetRight = offset.left + $(this).find('span').width();
var ww = $(window).width();
var fixed = offset.left + $(this).width() - $(this).find('span').width();
if (offsetRight > ww) {
$(this).find('span').css('marginLeft', fixed + 'px');
}
else {
$(this).find('span').css('marginLeft', offset.left + 'px');
}
HTML ...
#menu {
margin: 20px;
}
#menu LI {
display: block;
float: left;
border-right: 1px solid #fff;
background-color: #ccc;
padding: 5px;
cursor: pointer;
}
#menu SPAN {
display: block;
position: absolute;
width: 200px;
height: 100px;
background-color: #E2E2E2;
left: 0px;
margin-top: 5px;
padding: 5px;
}
答案 2 :(得分:0)
最好的开始是制作像
这样的结构<ul>
<li><a href="">Menu</a><div class="subnav">any popunder content</div></li>
...
</ul>
然后,make&lt; li&gt;相对左浮动块和.subnav绝对定位:
ul li { float: left; display: block; position: relative }
ul li .subnav { display: none; position: absolute; top: 0; left: 0 }
/* you may need to edit top and left to fit your needs */
然后通过css你可以做到:
ul li:hover .subnav { display: block }
并通过jquery复制旧学校浏览器
$('ul li').hover(
function() { $(this).find('.subnav').css('display', 'block') },
function() { $(this).find('.subnav').css('display', 'none') }
);
这可能是你学习的开始:)