Digg 头部设计：方法和下载

Digg 的设计充满了巧妙的创意。 网站标识清晰醒目，但不会占用太多宝贵的垂直空间。 使用简单的下拉菜单压缩导航。 订阅、搜索和帐户信息等重要内容都位于您期望的位置的顶部。 它是流体宽度，但不会缩小太多或增长太大。

让我们设计 Digg 头部！

查看演示   下载文件

 

1. 页面包裹（智能流体宽度）

我们知道，如果页面允许增长过大或缩小过小，流体宽度 可能会带来负面影响。 我们可以通过设置最小和最大宽度来防止这种情况，然后对不支持最大/最小宽度的浏览器（IE）使用“表达式”。

#page-wrap {
	min-width: 960px; max-width: 1260px;
	margin: 0 auto; padding: 0 10px;
	width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");
}

 

2. 右上角个人资料信息

徽标图像默认情况下将左对齐，但我们需要将所有这些内容浮动到右侧。

#right-side {
	float: right;
	padding-top: 15px;
	}
	#right-side img {
		border: 1px solid white;
		vertical-align: middle;
	}

请注意右侧内容中 img 标签的代码。 我们为用户图标添加了一点白色边框，并将其垂直对齐设置为“中间”。 这使得右侧的文本保持良好居中，而无需使用表格或顶部填充（两者都不理想）。

 

3. 右上角搜索区域

form#main-search {
	display: inline;
	position: relative;
	padding-right: 10px;
	}
	form#main-search label {
		display: none;
	}
	#search-button {
		position: absolute;
		right: 0px;
		top: -6px;
	}

我们需要将表单区域设置为内联元素，以使其不会像块级元素那样换行。 在所有输入表单中包含标签元素是一种良好的做法，但由于设计不需要实际的文本标签，我们可以使用 display: none; 将其隐藏。 使用一点绝对定位，我们可以将放大镜按钮图像放置在搜索表单的右侧。

 

4. 滑动门悬停效果

为了使菜单区域尽可能地可扩展，它需要是常规的网页文本。 但是我们想要的漂亮的悬停效果需要图像。 由于网页文本可以增长，但图像不能，我们需要通过使用称为滑动门技术的技巧来弥补这一点。

这是一种相当常见的技术，但这种情况下的独特之处在于，此滑动门的两侧都需要应用为悬停状态。 我们需要像这样分别应用这些背景图像

#zone-bar ul li:hover {
	background: url(images/zonebar-navleft.png) center left no-repeat;
}
#zone-bar ul li a:hover {
	background: url(images/zonebar-navright.png) center right no-repeat;
}

由于某些浏览器（再次是 IE）不支持页面元素（锚链接除外）上的悬停伪类，因此“navright”图形是较短的一个，这本身应该看起来不错。

 

5. 下拉菜单（又名 jQuery 初学者之夜）

这是单个菜单项的代码示例

<li>
	<a href="#"><span>
		Science &nbsp;
		<em class="opener-science">
			<img src="images/zonebar-downarrow.png" alt="dropdown" />
		</em>
	</span></a>
	<ul class="sciencesublist">
		<li><a href="#">Enviornment</a></li>
		<li><a href="#">General Sciences</a></li>
		<li><a href="#">Space</a></li>
	</ul>
</li>

底部的无序列表是下拉部分。 我们将使用一些绝对定位将其推到条形下方，然后使用 display: none; 默认隐藏它。

#zone-bar ul li ul {
	display: none;
	position: absolute;
	top: 29px;
	left: 0px;
	width: 150px;
	border: 1px solid #ccc;
	background: white;
	padding: 10px 0 0 0;
}

这里需要注意两点。 使用绝对定位时，某些浏览器确实希望看到垂直值（顶部或底部）和水平值（左侧或右侧）。 即使默认值应该是 left: 0，但将其放在那里也是一个好主意。 确保为该菜单设置背景颜色，以便当它覆盖内容时，您不会看到菜单后面的内容。

特别需要注意的是标记中的 em 标签。 这是我用来使用 jQuery 定位以打开菜单的额外钩子。

$(document).ready(function(){
	$(".opener-technology").click(function(){
		$(".technologysublist").toggle();
	});
});

jQuery 中的“toggle”函数自动在 display: none; 和 display: block; 之间切换。 这可以解决问题，但这是一种非常业余的处理方式。 事后看来，我可能应该只将一个类应用于箭头本身的图像并使用它。 我知道也有更智能的方法来处理这个问题。 我所采用的笨方法需要为每个打开箭头和子菜单使用一个唯一的类。 我只是在学习，所以不要对我太苛刻 =)

已知问题

• 当您打开下拉菜单时，Opera 会折叠主菜单列表项的大小。 我的 jQuery 有问题吗？
• 菜单保持打开状态直到关闭。 如果菜单在打开另一个菜单时关闭会很好。 也许向上滑动并淡出？

查看演示   下载文件