Welcome, Old Sport!

一款显示/隐藏的分类导航 HTML5 & jQuery

by ilikecss ON 2012/01/31 11404

显示/隐藏的导航见多不怪,在jQuery.com上看到一款不错的插件,可以用于许多效果,自己尝试着制作了一款显示/隐藏的效果,这款导航是基于HTML5基础制作的,对于IE的朋友我添加了HTML5 Fixed的脚本。

Step1. 创建HTML

<ul>						
<li><a href="#">Sunflowa Media</a></li>
<li><a href="#">Sunflowa Media</a></li>
<li><a href="#">Sunflowa Media</a></li>
</ul>
<ul>						
<li><a href="#">Sunflowa Media2</a></li>
<li><a href="#">Sunflowa Media2</a></li>
</ul>

分类以UL来分割

Step2. 创建CSS

#categoryMenu {
position: absolute;
top: 58px; right: 0;
width: 850px;
z-index: 11; }
#categoryMenu h2 {
position: absolute;
right: 0; bottom: -34px;
width: 146px; height: 34px;
background: url(../img/elements-v2.png) no-repeat -10px -20px; }
#categoryMenu h2 a {
display: block;
padding: 4px 0 7px 24px;
color: #eee;
font-size: 11px; }
#categoryMenu .open h2 { 
background-position: -190px -20px; }
#categoryMenu section {
display: none;
padding: 6px 0 10px 0;
background-color: #585966;
border-radius: 0 0 0 5px;
overflow: auto; }
#categoryMenu section.navi {
display: none;
padding: 6px 0 10px 0;
background-color: #585966;
border-radius: 0 0 0 5px;
overflow: auto; }
#categoryMenu section ul {
float: left;
width: 157px;
margin-left: 11px; }
#categoryMenu ul li.extra { 
padding-bottom: 6px; }
#categoryMenu ul li a {
display: block;
padding: 2px 8px 2px 8px;
color: #d1d3d4;
font-size: 11px;
line-height: 14px;
border: 1px solid #585966;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#categoryMenu ul li a:hover {
color: #fff;
text-shadow: #36363e 0 1px 1px;
background-color: #4d4d59;
border-color: #00b5f0;}

Step3. 插入jQuery和脚本包

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/vectorstock.js"></script>
$(function() {
VectorStock.setupCategoryMenu();
});

如果是IE

<!--[if IE]><script src="js/fixed.html5.js"></script><![endif]-->
3条评论
  1. 不U葱 可以做子分类 挺好的效果 :evil: :evil: :evil:




TOP