不规则形状的jquery菜单

时间：2013-04-01 20:45 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不规则形状的jquery菜单导航</title>
<style>
.navi1 {
  width: 525px;
  position: relative;
  display: block;
  margin:0 auto;
  height: 72px;
}
.navi1 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi1 ul li {
  height: 72px;
  background-image: url(http://www.codefans.net/jscss/demoimg/201303/tab-1.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  position: absolute;
  padding-top: 5px;
}
.navi1 ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
.navi1 ul li.sm1 {
  background-position: 0px 0px;
  width: 125px;
  left: 0px;
}
.navi1 ul li.sm2 {
  background-position: -125px 0px;
  width: 124px;
  left: 100px;
}
.navi1 ul li.sm3 {
  background-position: -249px 0px;
  width: 124px;
  left: 200px;
}
.navi1 ul li.sm4 {
  background-position: -373px 0px;
  width: 125px;
  left: 300px;
}
.navi1 ul li.sm5 {
  background-position: -498px 0px;
  width: 126px;
  left: 400px;
}
.navi1 ul li:hover{
  z-index: 1000;
}
.navi1 ul li.sm1:hover {
  background-position: 0px -75px; 
}
.navi1 ul li.sm2:hover {
  background-position: -125px -75px; 
}
.navi1 ul li.sm3:hover {
  background-position: -249px -75px; 
}
.navi1 ul li.sm4:hover {
  background-position: -373px -75px; 
}
.navi1 ul li.sm5:hover {
  background-position: -498px -75px; 
}
/* --------------------Menu style #2-------------------- */
.navi2 {
  width: 525px;
  position: relative;
  display: block;
  margin:0 auto;
  height: 72px;
}
.navi2 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi2 ul li {
  height: 72px;
  background-image: url(http://www.codefans.net/jscss/demoimg/201303/tab-2.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  position: absolute;
  padding-top: 5px;
}
.navi2 ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
.navi2 ul li.sm1 {
  background-position: 0px 0px;
  width: 125px;
  left: 0px;
}
.navi2 ul li.sm2 {
  background-position: -125px 0px;
  width: 124px;
  left: 100px;
}
.navi2 ul li.sm3 {
  background-position: -249px 0px;
  width: 124px;
  left: 200px;
}
.navi2 ul li.sm4 {
  background-position: -373px 0px;
  width: 125px;
  left: 300px;
}
.navi2 ul li.sm5 {
  background-position: -498px 0px;
  width: 126px;
  left: 400px;
}
.navi2 ul li:hover{
  z-index: 1000;
}
.navi2 ul li.sm1:hover {
  background-position: 0px -75px; 
}
.navi2 ul li.sm2:hover {
  background-position: -125px -75px; 
}
.navi2 ul li.sm3:hover {
  background-position: -249px -75px; 
}
.navi2 ul li.sm4:hover {
  background-position: -373px -75px; 
}
.navi2 ul li.sm5:hover {
  background-position: -498px -75px; 
}

/* --------------------Menu style #3-------------------- */
.navi3 {
  width: 525px;
  position: relative;
  display: block;
  margin:0 auto;
  height: 72px;
}
.navi3 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi3 ul li {
  height: 72px;
  background-image: url(http://www.codefans.net/jscss/demoimg/201303/tab-3.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  position: absolute;
  padding-top: 5px;
}
.navi3 ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
.navi3 ul li.sm1 {
  background-position: 0px 0px;
  width: 125px;
  left: 0px;
}
.navi3 ul li.sm2 {
  background-position: -125px 0px;
  width: 124px;
  left: 100px;
}
.navi3 ul li.sm3 {
  background-position: -249px 0px;
  width: 124px;
  left: 200px;
}
.navi3 ul li.sm4 {
  background-position: -373px 0px;
  width: 125px;
  left: 300px;
}
.navi3 ul li.sm5 {
  background-position: -498px 0px;
  width: 126px;
  left: 400px;
}
.navi3 ul li:hover{
  z-index: 1000;
}
.navi3 ul li.sm1:hover {
  background-position: 0px -72px; 
}
.navi3 ul li.sm2:hover {
  background-position: -125px -72px; 
}
.navi3 ul li.sm3:hover {
  background-position: -249px -72px; 
}
.navi3 ul li.sm4:hover {
  background-position: -373px -72px; 
}
.navi3 ul li.sm5:hover {
  background-position: -498px -72px; 
}

/* --------------------Menu style #4-------------------- */
.navi4 {
  width: 525px;
  position: relative;
  display: block;
  margin:0 auto;
  height: 72px;
}
.navi4 ul {
  float: none;
  list-style-image: none;
  list-style-type: none;
  margin: 3px 0;
}
.navi4 ul li {
  height: 72px;
  background-image: url(http://www.codefans.net/jscss/demoimg/201303/tab-4.png);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
  position: absolute;
  padding-top: 5px;
}
.navi4 ul li a{
  width: 100%;
  height: 100%;
  display: block;
}
.navi4 ul li.sm1 {
  background-position: 0px 0px;
  width: 125px;
  left: 0px;
}
.navi4 ul li.sm2 {
  background-position: -125px 0px;
  width: 124px;
  left: 100px;
}
.navi4 ul li.sm3 {
  background-position: -249px 0px;
  width: 124px;
  left: 200px;
}
.navi4 ul li.sm4 {
  background-position: -373px 0px;
  width: 125px;
  left: 300px;
}
.navi4 ul li.sm5 {
  background-position: -498px 0px;
  width: 126px;
  left: 400px;
}
.navi4 ul li:hover{
  z-index: 1000;
}
.navi4 ul li.sm1:hover {
  background-position: 0px -5px; 
}
.navi4 ul li.sm2:hover {
  background-position: -125px -5px; 
}
.navi4 ul li.sm3:hover {
  background-position: -249px -5px; 
}
.navi4 ul li.sm4:hover {
  background-position: -373px -5px; 
}
.navi4 ul li.sm5:hover {
  background-position: -498px -5px; 
}
</style>
</head>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

不规则形状的jquery菜单，其实说心里话，这款菜单确实挺漂亮，不过缺点也不少：1、不方便修改，因为菜单主要是使用图片实现的，修改一个菜单文字需要修改4张图片，有些麻烦；2、不利于优化网站，因为图片肯定比纯文字加载慢，而且对搜索引擎来说也不太好，所以建文只做学习CSS实例编写，用时候要优化一下。不规则形状的jquery菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/995.html

不规则形状的jquery菜单

网页特效