固定在右側的CSS導航菜單_菜單導航特效

固定顯示在網頁右側的CSS菜單，在一些博客中通常會看到，一般作為輔助菜單，它懸浮在主菜單的上部，像著名的WordPress博客程序就采用有這種形式。同時，通過這個菜單你還可以了解到CSS定位的題目，一舉兩得。

<!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</a>">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>固定在右側的CSS菜單</title>
<style type="text/css">
<!--
div#navcontainer
{
font-family: arial;
font-weight: bold;
background: #642;
position: absolute;
right: 0px;
margin: 0;
padding: 9px;
border: 0;
}

div#navcontainer ul
{
display: inline;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px #642;
}

div#navcontainer h2
{
border: solid 1px #642;
padding: 4px;
text-align: center;
}

div#navcontainer ul li
{
display: inline;
margin: 0;
}

div#navcontainer ul li a
{
color: #a10;
background: #ffc;
margin: 0;
padding: 2px 5px 2px 5px;
text-decoration: none;
}

div#navcontainer ul li a:hover
{
background: #e8db6f;
border-bottom: solid 9px #ffc;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/" id="current">mb5u.com</a></li>
<li><a href="/sort/list_1_1.shtml">ASP</a></li>
<li><a href="/sort/list_11_203_1.shtml">AJAX</a></li>
<li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li>
<li><a href="/sort/list_11_1.shtml">EXT</a></li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

固定在右側的CSS導航菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些