星期一, 4月 07, 2008

兩種以圖片取代清單來製作導覽列的方法

兩種以圖片取代清單來製作導覽列的方法
兩種方法各有特點,端看何者適合您的網站應用。

HTML語法:

清單一,以六張圖片組成的導覽列



清單二,以一張圖片組成的導覽列




CSS語法:
body { margin:0 auto; padding:0;text-align: center;}
h3 { margin-top:20px; }
/*-------------------------------清單一,以六張圖片組成的導覽列-------------------------------*/
#menubar {background: url(img/bg_nav.gif) repeat-x; height:50px; width:950px;margin:0 auto; padding-left: 20px; }
#nav {margin: 0;padding: 0;height: 50px;list-style: none;display: inline;overflow: hidden;}
#nav li {margin: 0;padding: 0;list-style: none;display: inline;}
#nav a {float: left;padding: 50px 0 0 0;overflow: hidden;height: 0px !important;height /**/:50px; /* for IE5/Win only */}
#nav a:hover {background-position: 0 -50px;}
#nav a:active, #nav a.selected {background-position: 0 -100px;}
#menu01 a {width: 103px;background: url(img/menu_01.gif) no-repeat top left ;}
#menu02 a {width: 103px;background: url(img/menu_02.gif) no-repeat top left ;}
#menu03 a {width: 103px;background: url(img/menu_03.gif) no-repeat top left ;}
#menu04 a {width: 103px;background: url(img/menu_04.gif) no-repeat top left ;}
#menu05 a {width: 103px;background: url(img/menu_05.gif) no-repeat top left ;}
#menu06 a {width: 103px;background: url(img/menu_06.gif) no-repeat top left ;}
/*-------------------------------清單二,以一張圖片組成的導覽列-------------------------------*/
#menuall {background: url(img/bg_nav.gif) repeat-x; width:950px;height:50px;margin:0 auto; padding-left: 20px; }
#menuall ul {list-style: none;display: inline;text-indent:-9999px;}
#menuall li {float: left;margin: 0;padding: 0;width: 103px;height:50px;}
#menuall_01 {background: url(img/menuall.gif) no-repeat 0px 0px ;}
#menuall_02 {background: url(img/menuall.gif) no-repeat -103px 0px ;}
#menuall_03 {background: url(img/menuall.gif) no-repeat -206px 0px ;}
#menuall_04 {background: url(img/menuall.gif) no-repeat -309px 0px ;}
#menuall_05 {background: url(img/menuall.gif) no-repeat -412px 0px ;}
#menuall_06 {background: url(img/menuall.gif) no-repeat -515px 0px ;}
#menuall li a {display:block;width: 103px;height:50px;}
#menuall li#menuall_01 a:hover {background: url(img/menuall.gif) no-repeat 0px -50px ;}
#menuall li#menuall_02 a:hover {background: url(img/menuall.gif) no-repeat -103px -50px ;}
#menuall li#menuall_03 a:hover {background: url(img/menuall.gif) no-repeat -206px -50px ;}
#menuall li#menuall_04 a:hover {background: url(img/menuall.gif) no-repeat -309px -50px ;}
#menuall li#menuall_05 a:hover {background: url(img/menuall.gif) no-repeat -412px -50px ;}
#menuall li#menuall_06 a:hover {background: url(img/menuall.gif) no-repeat -515px -50px ;}
#menuall a.selected {background: url(img/menuall.gif) no-repeat -103px -100px ;}
張貼留言