前面已经讲了一个利用CSS制作菜单的例子,下面再讲两个:
示例一:通过模糊其它菜单项来突出显示当前,使用户关注选中的菜单项。
第一步:制作图片
第二步:HTML
<ul id="main_nav">
<li><a href="index.html" accesskey="3" id="home" title="Home Page">Home Page</a></li>
<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs">About Us</a></li>
<li><a href="web-design.html" accesskey="5" id="webdesign" class="active" title="Web Design and Development">Web Design</a></li>
<li><a href="graphic-design.html" accesskey="6" title="Graphic Design and Marketing" id="graphicdesign">Graphic Designs</a></li>
<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo">Search Engine Optimization SEO</a></li>
<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us">Contact Us</a></li>
</ul>
第三步:设置样式
#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
/*设置所有的显示背景为模糊的图片*/
#main_nav:hover li a#webdesign { background-position: -280px; }
#main_nav:hover li a#home { background-position: -206px; }
#main_nav:hover li a#graphicdesign { background-position: -340px; }
#main_nav:hover li a#contact { background-position: -232px; }
#main_nav:hover li a#about { background-position: -242px; }
#main_nav:hover li a#seo { background-position: -540px;
#home { background: url(../images/navigation/home.gif); width: 103px; }
/*设置当前的为清晰显示*/
#home:hover { background: url(../images/navigation/home.gif) 0 0 !important; }
#home.active { background: url../images/navigation/home.gif) -103px 0; }
#main_nav:hover li a#home { background-position: -206px; }
示例二:菜单跟随箭头CSS
ul.crawler li a:hover span{
position:absolute;
width:78px;
top:-12px;
left:auto;
margin-left:-30px;
z-index:3;
background:url(images/pointer.gif) no-repeat left top;
}