类似门户网站的CSS双行导航菜单

2024-09-05 12:20:09

字体：大中小

来源：转载

供稿：网友

类似门户网站的导航效果，双行排列，完全基于CSS代码实现，单个菜单像按钮，组合成一块效果就更精致了，用到3张背景图片，不要忘记下载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>双行导航菜单</title><style type="text/css"></style><script type="text/javascript">function area_nav(index){for(var i=1;i<=2;i++){        if( document.getElementById("nav"+i.toString()) != null )        {                document.getElementById("nav"+i.toString()).style.display = 'none';                }}        document.getElementById("nav"+index.toString()).style.display = 'block';}</script></head><body><div id="nav1" class="nav">	<div class="menu">		<div class="middle" style="width: 670px; height: 74px">			<ul>				<li>					<b style="color:#FF0000">源码首页</b>				</li>				<li>										最新更新				</li>				<li>					源码分类				</li>				<li>					下载排行				</li>				<li>					ASP源码				</li>				<li>					<b style="color:#FF0000">PHP源码</b>				</li>				<li>					Ajax源码				</li>				<li>					Delphi源码				</li>				<li>					VC++源码				</li>				<li>					网页特效				</li>				<li>					菜单导航				</li>				<li>					层和布局				</li>				<li>					<b style="color:#330099">文字链接</b>				</li>				<li>					<b style="color:#FF0000">图片特效</b>				</li>				<li>					<b style="color:#FF0000">表单按钮</b>				</li>				<li>					游戏娱乐				</li>				<li>					计算转换				</li>				<li>					广告特效				</li>			</ul>		</div>    </div></div></body></html>

上一篇：向上滑动的蓝色大气导航菜单

下一篇：左侧动画展开的辅助菜单