CCS高级菜单技巧

前面已经讲了一个利用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; }

demo

 

示例二：菜单跟随箭头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;

}

demo