DIVCSS菜单:超炫的菜单一张图片实现鼠标的两种状态及CSS当前页效果_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

  今天我们继续深入学习相关的内容,今天的这个CSS菜单形式上比较炫,在实现的时候有几个需要注重的地方:
  1、具体的分析图片格局,确定好背景图片的定位;
  2、如何隐藏掉菜单内的链接文字。MB5U.com原创

  下面的图片是今天这个CSS菜单实例的最终效果(可点击放大):


  我们看下面的XHTML代码:

示例代码 [www.mb5u.com]
<body id="page_a">
<ul id="nav">
<li id="navind"><a href="http://www.mb5u.com/" id="cur1" title="MB5U.com">MB5U.com首页</a></li>
<li id="navxue"><a href="http://www.mb5u.com/" id="cur2" title="Div CSS教程">Div CSS教程</a></li>
<li id="navpei"><a href="http://www.mb5u.com/" id="cur3" title="CSS布局实例">CSS布局实例</a></li>
<li id="navren"><a href="http://www.mb5u.com/" id="cur4" title="CSS2.0教程">CSS2.0教程</a></li>
<li id="navkao"><a href="http://www.mb5u.com/" id="cur5" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</body>

  我们赋予了body一个id:page_a。这是用于实现当前页效果的,我们在后面再作说明。
  我们建立了一个id为nav的无序列表ul作为菜单的容器。在菜单中有列表项五个。我们作重说说第一个,其它的四个与之类似。
  li列表项的id为navind。这是作为列表项的选择符存在的,我们可以通过此选择符控制列表项及列表项内的链接的样式。MB5U.com原创
  a链接的id为cur1。这是方便用于实现当前页的效果。我们后面会介绍如何编写CSS代码。

示例代码 [www.mb5u.com]
#nav { width:585px; height:55px; overflow:hidden; margin:20px auto 0 auto;}

  我们定义无序列表ul的宽度和高度,设置溢出为隐藏,距离顶部20象素,左右方向居中对齐。
  我们预先制作好如下的图片,请注重,这是一个图片文件,我们在菜单的不同部分进行不同的定位即可:(可点击放大)


  最上面一排是菜单的正常形式,第二排是菜单的鼠标悬停时的形式,最下面一排是当前页的效果。
  或许你还没有明白一张图片是如何实现的,我们通过背景图片的定们来实现,看下面的图片:(可点击放大)


  我们模拟对菜单进行分割,得到了这样的N个小区域,这每一列就是我们菜单的三个状态,而红线也标出了我们应该如何对菜单进行定位了。我们看下面的表格:


  有了这样清楚的思路,我们就可以动手编写CSS代码了。MB5U.com原创

示例代码 [www.mb5u.com]
#navxue,#navxue a,#navpei,#navpei a,#navren,#navren a,#navkao,#navkao a {
display:block;
width:116px;
height:55px;
overflow:hidden;
}

  除了最左边的mb5u.com这个菜单之外,其它四个菜单的宽度是一致的,我们对其li及链接a进行CSS样式定制,设置为块元素,宽度与高度分别是:116px、55px。设置溢出为隐藏,防止内部元素撑开容器而使页面很难看。

示例代码 [www.mb5u.com]
#navind a,#navxue a,#navpei a,#navren a,#navkao a {
padding-top:60px;
overflow:hidden;
}

  我们设置所有五个菜单的a链接元素的填充距顶为60px。溢出为隐藏。这样我们就成功的实现了将菜单内的文字推到可视区域以外了。即:文字位于距顶部60px的地方,而我们的菜单高度为55px。所以文字是不可见的。仅当用户没有用完全下载CSS文件时,我们的菜单也不会失效,CSS文件未打开图片虽然看不到了,但这些文字就发挥它们的作用了,依然可以起到导航的作用。

示例代码 [www.mb5u.com]
#nav li { float:left; }

  设置所有的li列表项向左浮动。MB5U.com原创

示例代码 [www.mb5u.com]
#navind,#navind a {
display:block;
width:121px;
height:55px; float:left;
background:url(nav.jpg) 0 0
}
#navind a:hover { background:url(nav.jpg) 0 -55px }
#navxue a {background:url(nav.jpg) -121px 0 }
#navxue a:hover {background:url(nav.jpg) -121px -55px }
#navpei a {background:url(nav.jpg) -237px 0 }
#navpei a:hover {background:url(nav.jpg) -237px -55px }
#navren a {background:url(nav.jpg) -353px 0 }
#navren a:hover {background:url(nav.jpg) -353px -55px }
#navkao a {background:url(nav.jpg) -469px 0 }
#navkao a:hover {background:url(nav.jpg) -469px -55px }

  上面这一大段代码定义了鼠标的两种状态下菜单所表现出来的样子。结合上面两个分析图片,相应你能很快的理解这些代码的意义。只是第一个由于尺寸与其它菜单有所区别,所以单独的定义了宽与高。

示例代码 [www.mb5u.com]
#page_a #nav #navind a#cur1 {background:url(nav.jpg) 0 -110px }
#page_b #nav #navxue a#cur2 {background:url(nav.jpg) -121px -110px }
#page_c #nav #navpei a#cur3 {background:url(nav.jpg) -237px -110px }
#page_d #nav #navren a#cur4 {background:url(nav.jpg) -353px -110px }
#page_e #nav #navkao a#cur5 {background:url(nav.jpg) -469px -110px }

  我们用这些代码实现了CSS当前页的效果。我们所需要做的是给body赋予不同的id,即可实现了菜单背景图片的不同定位,而指示出当前页是在哪一个栏目。

来源:无忧整理//所属分类:DIV+CSS实例/更新时间:2007-05-22
相关DIV+CSS实例